Why can't you create Custom Elements in content scripts?

Question

I attempted to create a custom element in a Chrome extension content script but customElements.define is null.

customElements.define('customElement', class extends HTMLElement {
    constructor() {
        super();
    }
    ...
});

So apparently Chrome doesn't want content scripts to create custom elements. But why? Is it a security risk?

I can't seem to find anything in Chrome's extension guide that says it's not allowed.

Answer 1

I found the solution reading this page but the information was so cumbersome I wanted to write this answer for future readers (I am using Manifest v3)

Firstly, install the polyfill :

npm install @webcomponents/webcomponentsjs -D

Then add the polyfill in your content_scripts block in your manifest file :

"content_scripts": [{
  "matches": [ "..." ],
  "js": [
    "./node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
    "content.js"
  ]
}]

(important: you have to load it before your content script of course as the polyfill needs to load before you can use it)

Now it should works. Cheers

Note: the customElements feature is implemented in most modern browsers but for some reasons the interface is not available from a content script because the scripts are run in an isolated environment (not sharing the same window object space from the webpage the extension runs in).

Answer 2

As of now custom element can be used in chrome extensions UI. In Popup ui, option page ui and in the content script as well But it requires a polyfill which is this. https://github.com/GoogleChromeLabs/ProjectVisBug - this is the one big custom element in the chrome extension.

Answer 3

After testing, I found that in content scripts, only the customElements object is missing, while other objects can be used. For example: Shadow DOM, HTML Templates, CSS Shadow Parts, CSS variables.

My test results:

console.log('customElements', window.customElements);  // null
console.log('Shadow DOM', Element.prototype.attachShadow); // yes
console.log('HTML Templates', document.createElement('template').content); // yes

const style = document.createElement('style');
style.textContent = ':root::part(test) {}';
document.head.appendChild(style);
console.log('CSS Shadow Parts', !!style.sheet!.cssRules); // yes

const style2 = document.createElement('style');
style2.textContent = ':root { --test: 0; }';
document.head.appendChild(style);
console.log('CSS variables', !!style.sheet!.cssRules.length); // yes

Therefore, there is no need to use a bloated webcomponentsjs polyfill, but instead use the lightweight custom-elements polyfill.

https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements

When using the custom-elements polyfill, it is also necessary to use lit/polyfill-support.js. The purpose of lit/polyfill-support.js is to connect Lit with the polyfill.

Pay attention to the import order!

import '@webcomponents/custom-elements';
import 'lit/polyfill-support.js';

https://lit.dev/docs/tools/requirements/#polyfills

Answer 4

You don't need any polyfills. I thank @fxnoob for pointing me to ProjectVisBug, but it doesn't use a polyfill.

Instead of using customElements.define in the main content script that is loaded with chrome.tabs.executeScript, VisBug uses that script as merely a wrapper to inject a <script> tag. This tag loads the main JavaScript bundle and the custom element is defined there.

manifest.json:

{
    "manifest_version": 2,
    "version": "0.0.1",
    "name": "My Extension",
    "permissions": ["activeTab"],
    "background": {
        "scripts": ["background.js"]
    },
    "browser_action": {
        "default_title": "Click to toggle"
    },
    "web_accessible_resources": ["build/*"]
}

background.js:

chrome.browserAction.onClicked.addListener(function(activeTab) {
    chrome.tabs.executeScript(activeTab.id, {
        file: "./inject.js",
        runAt: "document_start",
    });
});

inject.js:

const script = document.createElement("script");
script.type = "module";
script.src = chrome.runtime.getURL("build/main.js");
document.body.appendChild(script);

const myElement = document.createElement("my-element");
document.body.prepend(myElement);

build/main.js:

class MyElement extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: "open" });
    }
}

customElements.define("my-element", MyElement);