Chrome擴展內容腳本中的聚合物

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無效。 它只是創建一個沒有我的shadow DOM內容的空標記。

我發現我正在做的幾個潛在的問題：

1. 我正在將聚合物填充到div中。 是否需要直接裝入體內？ 如果是這樣，這是怎么做到的？
2. 我假設加載build.html與ajax將首先工作。 這是一個不正確的假設嗎？

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庫來解決這樣的問題。 邊界創建的元素與現有網頁的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