javascript - Chrome 扩展内容脚本中的 polymer

Question

我正在尝试在 chrome 扩展程序中使用 Polymer。总体目标是利用样式封装，以便我的内容脚本独立于所访问页面的 CSS 运行。

从 my-element.html 中的自定义元素开始

我像这样使用 Vulcanize:

vulcanize -o build.html my-element.html

如果我在我的内容脚本中尝试这样的事情:

// content_script.js
$.get(chrome.extension.getURL('build.html'), function(data) {
  var html = document.createElement('div');
  html.innerHTML = data;
  document.body.appendChild(html);

  var custom = document.createElement('my-element');
  document.body.appendChild(custom);
});

build.html 加载正常，但我的元素不工作。它只是创建一个没有我的影子 DOM 内容的空标签。

我发现我正在做的事情有几个潜在的问题:

1. 我正在将 polymer Material 加载到一个 div 中。是否需要直接加载到body中？如果是这样，这是如何完成的？
2. 我假设首先使用 ajax 加载 build.html 会起作用。这是一个错误的假设吗？

Answer 1

编辑:虽然下面的方法确实有效，但我不认为我可以推荐它，除了范围非常有限的项目——单一域目标或简单的小部件。

---

我的猜测是 Chrome 阻止扩展的 registerElement() 导致了问题。注入(inject)一个 HTML 文件然后调用 polymer.js 似乎将库放在主机页面的上下文中而不是内容脚本中。

这是我从他们的教程中一起破解的概念证明:

list .json

{
    "name": "polymer-test",
    "version": "0.0.1",
    "manifest_version": 2,
    // CSP might be overkill
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "content_scripts": [
        {
            "js": [
                "contentscript.js"
            ],
            "matches": [
                "<all_urls>"
            ]
        }
    ],
    "web_accessible_resources": [
        "counter.html",
        "polymer.html",
        "polymer.js"
    ]
}

contentscript.js

document.body.insertAdjacentHTML('beforeend', '<div>'
    // polymer.html throws an error w/o layout.html -- not a big deal
    + '<link rel="import" href="'+chrome.extension.getURL('/polymer.html')+'">'
    + '<link rel="import" href="'+chrome.extension.getURL('/custom.html')+'">'
    + '<my-counter counter="1">Points</my-counter>'
+ '</div>');

counter.html

<polymer-element name="my-counter" attributes="counter">
    <template>
        <style></style>
        <div id="label"><content></content></div>
        Value: <span id="counterVal">{{counter}}</span><br>
        <button on-tap="{{increment}}">Increment</button>
    </template>
    <script>
        Polymer({
            counter: 0, // Default value
            counterChanged: function() {
                this.$.counterVal.classList.add('highlight');
            },
            increment: function() {
                this.counter++;
            }
        });
    </script>
</polymer-element>