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

我曾尝试在chrome扩展中通过本机javascript和polymer注册自定义元素，但没有成功

---

我正在寻找在扩展中使用web组件的建议-有人这样做过吗？我的直觉是暂时在shadowdom上使用标准html标记（div等）注册这些元素，直到它被支持为止。有什么建议吗？

确实有可能。但是，有点老套

原始答案

以下是步骤：

• 本机web组件（无聚合物）
  注意：这需要使用
  Chrome将阻止在Chrome扩展中执行本机

  registerElement

  。要克服这个问题，您需要防止使用本机

  注册表项

  ，而使用模拟注册表项（polyfill）

在

webcomponents lite.js

中，注释掉以下代码（如果您愿意，可以使其更加优雅）：

scope.hasNative = false; //Boolean(document.registerElement);

瞧！原生的

注册表项
现在已经被polyfill所取代，chrome不会阻止它在扩展中使用


聚合物网组件

您需要执行上述步骤中列出的代码，此外，还需要通过以下代码加载聚合物

  var link = document.createElement('link');
  link.setAttribute('rel', 'import');
  link.setAttribute('href', "link_to_your_polymer.html");
  link.onload = function() {
     // Execute polymer dependent code here
  }



更新#1-改进的解决方案

经过进一步调查，我了解到动态加载时，Polymer无法在扩展中工作。因此，需要进行上述修改。一个更简单的替代方法是将Polymer加载到内容脚本中的头中，如下所示：

  function loadRes(res) {
    return new Promise(
      function(resolve, reject) {
        var link = document.createElement('link');
        link.setAttribute('rel', 'import');
        link.setAttribute('href', res);
        link.onload = function() {
          resolve(res);
        };
        document.head.appendChild(link);
      });
  }

  loadRes( chrome.extension.getURL("path_to_your_webcomponents-lite.js") ) // You may/may not need webcomponents.js here
    .then( loadRes( chrome.extension.getURL("path_to_your_polymer.html") ) )
    .then( loadRes( chrome.extension.getURL("path_to_your_custome_component") ) )
    .then(function(){
      // code that depends on web components 
    });

您必须将
chrome.extension.getURL
加载的URL添加到清单的
web\u可访问的\u资源
部分

以上内容是必需的，因为polymer.html必须通过html资源加载

请注意如果您的组件已经加载了webcomponents polyfill，您可能不需要在此处加载它们。
在2017年7月解决了这个问题。我发现的简单解决方案是将最新版本作为额外的内容脚本加载。polyfill文件中无需更改代码（特征检测可能已经改进）

从清单中摘录：

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["webcomponents-sd-ce.js", "contentscript.js"]
    }
]

“内容脚本”：[
{
“匹配项”：[“”]，
“js”：[“webcomponents sd ce.js”，“contentscript.js”]
}
]
对我来说，在我的
content.js
中使用
@webcomponents/custom elements
包就足够了。
另外，
webcomponents sd ce.js
的重量约为80kb，而
custom elements.min.js
的重量仅为16kb

只需将其作为依赖项安装，并将其导入
content.js
中，然后让您的包管理器完成其余的工作

npm i@webcomponents/custom元素

导入“@webcomponents/custom元素”

这就是我在项目中使用它的方式


我认为所有这些解决方法都不是必需的，自定义元素必须适用于没有polyfill的扩展。请投票支持以提请注意此缺陷。
由于您将所有内容都注入到主机页中，因此polyfill真的是必需的吗？它可能不需要。我最初使用polyfill是因为
registerElement当我通过内容脚本加载polymer时，
不允许从chrome扩展执行。现在我正在将这些资源加载到
中，我相信您可以放弃polyfill。我无法让它与此代码一起工作。您能告诉我清单应该是什么样子吗？我的内容脚本已执行（试用过）但是我的popup.html中没有呈现任何内容，因此我认为该文件不是injected。我遇到以下错误：无法读取null的属性“appendChild”。您需要确保每个url都列在web可访问的资源中。如果没有，chrome.extension.getUrl将返回null，这将导致您的错误链接似乎已死机。您可以找到
webcomponents sd-js
。实际上，您可以自己构建它。克隆项目。从项目的根运行
npm install
，然后运行
npm build
。它将创建一个名为
bundles
的文件夹。在那里您将找到您的文件。@TreycosI正要编写此答案，但意识到有人已经找到了它。或者您可以您只需在扩展的根文件夹中复制/粘贴
/node\u modules/@webcomponents/custom elements/custom elements.js
，并将其注册为清单中的内容脚本。json
这对我的Chrome扩展非常有效！非常简单，只需npm安装并导入MyCustomElement类顶部的polyfiill即可n我的自定义元素在我的内容脚本中工作！！如果扩展名中没有使用npm，您也可以下载polyfill文件，并且源代码可用。
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["webcomponents-sd-ce.js", "contentscript.js"]
    }
]