google-chrome-extension - 从 chrome 扩展注册自定义元素

Question

我曾尝试通过原生 javascript 和 polymer 从 chrome 扩展程序中注册自定义元素，但没有成功。 The issue is documented here .

Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'polymer-element'. Elements cannot be registered from extensions.

我正在寻找在扩展中使用 Web 组件的建议 - 有没有人这样做过？我的直觉是暂时在 shadow DOM 上使用标准 html 标签(div 等...)注册这些元素，直到它被支持为止。有什么建议？

Answer 1

对我来说，使用 @webcomponents/custom-elements 就足够了包裹在我的 content.js .
还有 webcomponents-sd-ce.js权重约 80kb 和 custom-elements.min.js只有 16kb。
只需将其安装为依赖项并将其导入 content.js剩下的就交给你的包管理器吧。

npm i @webcomponents/custom-elements

import '@webcomponents/custom-elements'

这就是我在我的项目中使用它的方式 popup-tab-switcher .

我相信所有这些解决方法都是不必要的，自定义元素必须适用于没有 polyfill 的扩展。请投给 the issue in Chrome bugs提请注意这个缺陷。