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加载确定，但my-element无效。它只是创建一个没有我的影子DOM内容的空标记。

我发现我正在做的一些潜在问题：

我正在将聚合物填充到div中。是否需要直接装入体内？如果是这样，这是怎么做到的？
我假设用ajax加载build.html将首先起作用。这是一个不正确的假设吗？

Answer 1

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

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

这是我从他们的教程中一起入侵的概念证明：

<强>的manifest.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>

Answer 2

我最近创建了Boundary，一个CSS + JS库来解决这样的问题。 Boundary创建的元素与现有网页的CSS完全分开。

以创建对话框为例。安装Boundary后，您可以在内容脚本中执行此操作

var dialog = Boundary.createBox({
    "id": "yourDialogID"
});

Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");

Boundary.appendToBox(
    "#yourDialogID",
    "<button id='submit_button'>submit</button>"
);

Boundary.find("#submit_button").click(function() {
  // find() function returns a regular jQuery DOM element
  // so you can do whatever you want with it.
  // some js after button is clicked.
});

#yourDialogID中的元素不会受到现有网页的影响。

希望这会有所帮助。如果您有任何疑问，请与我们联系。

https://github.com/liviavinci/Boundary

Chrome扩展内容脚本中的聚合物

2 个答案: