为什么无法在Chrome扩展程序中创建自定义元素？

Question

我试图在一个浏览器扩展程序来创建自定义元素,但customeElements.define是null.

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

显然,Chrome不希望扩展来创建自定义元素.但为什么？这是安全隐患吗？

我似乎无法在Chrome的扩展程序指南中找到任何说明不允许的内容.

Answer 1

我找到了阅读此页的解决方案，但信息太麻烦了，我想为未来的读者写下这个答案（我正在使用 Manifest v3）

首先，安装polyfill：

npm install @webcomponents/webcomponentsjs -D

然后将 polyfill 添加到文件content_scripts的块中 manifest：

npm install @webcomponents/webcomponentsjs -D

（重要的是：当然，您必须在内容脚本之前加载它，因为需要先加载polyfill才能使用它）

现在应该可以了。干杯

注意：customElements 功能已在大多数现代浏览器中实现，但由于某些原因，该界面无法从内容脚本中使用，因为脚本在隔离环境中运行（不与window扩展运行所在的网页共享相同的对象空间）。

Answer 2

目前custom element可以在 Chrome 扩展 UI 中使用。在 Popup ui、选项页面 ui 和内容脚本中，但它需要一个 polyfill，就是this。 https://github.com/GoogleChromeLabs/ProjectVisBug - 这是 Chrome 扩展中的一大自定义元素。