我创建了一个自定义的Polymer元素，并尝试在Chrome扩展程序中使用它。但是，我遇到了以下问题。
我无法从内容脚本访问元素的API。这就是我的意思。
my-element的模板
<link rel="import" href="../polymer/polymer.html">
<dom-module id="my-element">
<template>
... some html...
</template>
<script src="js/my-element.js"></script>
</dom-module>
在my-element.js中
Polymer({
is: 'my-element',
init: function () {
console.log('init');
}
});
在content.js中
var link = document.createElement('link');
link.setAttribute('rel', 'import');
link.setAttribute('href', chrome.extension.getURL('my-element.html'));
link.onload = function() {
var elem = document.createElement('my-element');
document.body.appendChild(elem);
elem.init(); // Error: undefined is not a function
};
document.body.appendChild(link);
有趣的是，我可以看到它my-element在页面上正确呈现，包括阴影dom和其他所有内容。而且，如果我document.querySelector('my-element').init()在宿主网页的控制台中运行，则该命令将正确执行。但是，在内容脚本中执行相同的代码会产生错误。
我试图将Polymer本身包含为内容脚本。我遇到了registerElement问题，但是由于这个问题，我解决了。在这种情况下，我已经window.Polymer在中定义了content.js。My-element的API可以完全访问，但是当我将它添加到宿主网页的DOM时，它的shadow dom无法呈现。
您正在访问内容脚本的沙箱：
内容脚本在称为隔离世界的特殊环境中执行。他们有权访问所注入页面的DOM，但不能访问该页面创建的任何JavaScript变量或函数。看起来每个内容脚本都好像在其上运行的页面上没有其他JavaScript在执行。反之亦然：在页面上运行的JavaScript无法调用任何函数或访问由内容脚本定义的任何变量。
来自https://developer.chrome.com/extensions/content_scripts#execution-environment
Polymer组件的脚本在宿主页中运行，因此内容脚本不可见。
您可以将新的脚本标签注入到宿主页面中，并从扩展名中的.js文件中获取它，例如
var script = document.createElement('<script>');
script.src = chrome.extension.getURL('something.js');
document.appendChild(script);
这将something.js在宿主页面的上下文中运行，从而授予它对宿主页面中所有其他脚本（包括您的Polymer组件）的访问权限，但也使其对内容脚本不可见。请特别注意在主机页面中注入脚本的安全隐患。
如果您不能/不愿意将所有扩展逻辑推入该注入的脚本中，例如，因为您需要访问chrome.*API或宿主页面和内容脚本之间进行某种其他形式的通信，请查看消息发布。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句