我正在尝试在 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 内容的空标签。
我发现我正在做的事情有几个潜在的问题:
- 我正在将 polymer Material 加载到一个 div 中。是否需要直接加载到body中?如果是这样,这是如何完成的?
- 我假设首先使用 ajax 加载 build.html 会起作用。这是一个错误的假设吗?
最佳答案
编辑: 虽然下面的方法确实有效,但我不认为我可以推荐它,除了范围非常有限的项目——单一域目标或简单的小部件。
我的猜测是 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>
关于javascript - Chrome 扩展内容脚本中的 polymer ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25089832/