Chrome 扩展内容脚本中的聚合物元素

Question

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

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

我的元素的模板

<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 问题，但感谢this 问题我解决了。在这种情况下，我在content.js 中定义了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。