Question

我正在尝试创建与youtube交互的chrome扩展程序。它加载内容脚本，然后该脚本应该从web_accessible_resources注入experiment.js脚本。我的所有代码都没有来自experiment.js。

我已将此作为参考：Insert code into the page context using a content script

的manifest.json

{
    "version": "1.0",
    "manifest_version": 2,
    "permissions": ["tabs", "https://*/*"],
    "content_scripts": [{
        "js": ["contentscript.js"],
        "matches": [ "https://*.youtube.com/*", "http://*.youtube.com/*"]
    }],
    "web_accessible_resources": ["experiment.js"],
    "browser_action": {
      "default_icon": "icon.png"
    }
}

contentscript.js

var s = document.createElement('script');
s.src = chrome.extension.getURL('experiment.js');

s.onload = function() {
    this.parentNode.removeChild(this);
};

(document.head||document.documentElement).appendChild(s);

experiment.js

alert('loaded');
console.log('loaded');

编辑：我刚刚使用了另一种解决方案，将来自experiment.js的代码包含在一个数组中的contentscript.js中并加入每一行。该过程在我之前添加的参考文章中称为“方法2”。

Answer 1

基本上问题是由内容脚本限制引起的。出于安全原因（我猜），内容脚本不能使用由网页或其他内容脚本定义的变量或函数。它被称为沙盒。

通过创建新的<script>元素向页面添加新脚本时，可以将此脚本添加到页面的沙箱中。因此，内容脚本无法看到添加到页面中的内容，即使它是您的扩展程序代码。

最简单的解决方案是快速解决问题。您只需将脚本添加到清单文件或使用programmatic injection。

除了限制之外，内容脚本还可以使用共享DOM与页面进行通信。在这种情况下，您可以使用<script>标记向页面添加脚本，并使用window.postMessage与内容脚本进行通信。

Chrome扩展程序内容脚本不会从Web可访问资源加载脚本

1 个答案: