Question

我创建了一个自定义的Polymer元素，并尝试在我的Chrome扩展程序中使用它。但是，我遇到了以下问题。

我无法从内容脚本访问我的元素的API。这就是我的意思。

my-element的模板

student

在my-element.js

中

<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>

in content.js

Polymer({
  is: 'my-element',
  init: function () {
    console.log('init');
  }
});

有趣的是，我可以看到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，它将被执行而没有错误。但是，在内容脚本中执行相同的代码会产生错误。

我尝试将Polymer本身作为内容脚本包含在内。我遇到了document.querySelector('my-element').init()问题，但由于this问题，我解决了这个问题。在这种情况下，我在registerElement中定义了window.Polymer。 My-element的API变得完全可访问，但现在当我将它附加到主机网页的DOM时，它不会呈现阴影dom。

Answer 1

您正在访问内容脚本的沙箱：

内容脚本在称为隔离的特殊环境中执行   世界。他们可以访问他们注入的页面的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组件）的权限，但也使其对内容脚本不可见。请特别注意在主页中注入脚本的security implications。

如果您无法/不愿意将所有扩展逻辑推送到注入的脚本中，例如因为您需要访问chrome.* API或主机页面和内容脚本之间的某种其他类型的通信，请查看message posting。

Chrome扩展程序内容脚本中的Polymer元素

1 个答案: