Chrome扩展内容脚本中的Polymer

问题描述

我试图在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. 我正在将聚合物材料加载到d​​iv中。它是否需要直接加载到身体？如果是这样，这是如何完成的？


2. 我假设用ajax加载build.html将首先工作。这是一个不正确的假设吗？
   

解决方案

编辑：
虽然下面的方法工作，我不认为我可以推荐它，除了范围非常有限的项目 - 单个域目标或简单的小部件。

---

我的猜测是，Chrome浏览器阻止 registerElement（）的扩展名会导致您的问题。
注入一个HTML文件，然后调用 polymer.js 似乎将该库放在主机页面的上下文中，而不是内容脚本。

下面是我从他们的教程中一起入侵的概念证明： $ b

manifest.json

  {
name：polymer-test，
version：0.0.1，
manifest_version：2，
 // CSP可能会过度杀伤b $ bcontent_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> 
 //聚合物.html抛出错误w / o layout.html  - 没什么大不了的
 +'< link rel =importhref ='+ chrome.extension.getURL（'/ polymer.html'）+ ''>'
 +'< link rel =importhref ='+ chrome.extension.getURL（'/ custom.html'）+'>'
 +'< ; my-counter counter =1> Points< / my-counter>'
 +'< / div>'）; 
  

counter.html

 < polymer-element name =my-counterattributes =counter> 
< template> 
< style>< / style> 
< div id =label>< content>< / content>< / div> 
值：< span id =counterVal> {{counter}}< / span>< br> 
< button on-tap ={{increment}}>增加< /按钮> 
< / template> 
< script> 
 Polymer（{
 counter：0，//默认值
 counterChanged：function（）{
 this。$。counterVal.classList.add（'highlight'）; 
}，
 increment：function（）{
 this.counter ++; 
} 
}）; 
< / script> 
< / polymer-element> 
  

I'm trying to use Polymer in a chrome extension. The overall goal is to leverage styling encapsulation so my content scripts run isolated from the CSS of the page being visited.

Beginning with a custom element in my-element.html

I'm using Vulcanize like so:

vulcanize -o build.html my-element.html

If I try something like this in my content script:

// 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 loads ok, but my-element is not working. It just creates an empty tag with none of my shadow DOM contents.

I see a couple potential problems with what I'm doing:

1. I'm loading the polymer stuff into a div. Does it need to be loaded directly into body? If so, how is this done?
2. I'm assuming loading build.html with ajax will work in the first place. Is this an incorrect assumption?

解决方案

Edit:While the method below does work, I don't think I can recommend it except for projects very limited in scope -- single domain target or simple widget.

---

My guess is that Chrome blocking registerElement() for extensions is causing you issues.Injecting an HTML file which then calls polymer.js seems to put the library in context of the host page rather than the content script.

Here's a proof of concept I hacked together from their tutorial:

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>

这篇关于Chrome扩展内容脚本中的Polymer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！