从 content-script 注入的 js 脚本中读取变量和函数答案

【问题标题】：Read variable and function from injected js script from content-script从 content-script 注入的 js 脚本中读取变量和函数
【发布时间】：2017-04-27 04:07:11
【问题描述】：

我从内容脚本中注入一个脚本，例如

content-script.js

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.extension.getURL('latest.js');
s.onload = function(){
   console.log(test);
}
(document.body || document.documentElement).appendChild(s);

latest.js

var test = 1000;

它添加正确，但现在我的问题是从内容脚本上的 latest.js 读取变量和函数，因为内容脚本有一些数据需要通过使用它的函数或变量传入 latest.js。

所以，onload 函数我尝试使用在 latest.js 中定义的 console.log(test) 但我不能使用它，它未定义。

帮帮我！！！

【问题讨论】：

chrome.extension.getURL 在内容脚本中不起作用-您可能需要查看message passing
一切正常，我的问题是读取 latest.js 中的变量
哦，我没有意识到你可以这样做，对不起......也许你需要等待s.onload发生，然后latest.js的内容将被解析JS 引擎，并且该文件中的任何代码/变量都将是“可用的” - 这实际上取决于 latest.js 的内容
onload 事件正在触发，请在脚本中尝试 window.test = 1000; - 就像测试一样
看起来developer.chrome.com/extensions/… 是问题所在——这又回到了使用message passing——不过，这会使“函数”更难“获取”——我想知道是否使用 fetch/XHR，创建一个空的脚本节点并添加内容会起作用

标签： javascript function variables google-chrome-extension content-script

【解决方案1】：

根据chrome扩展docs about a content scripts：

...内容脚本有一些限制。他们不能：使用由其扩展页面定义的变量或函数使用网页或其他内容脚本定义的变量或函数

因此，您的 latest.js 会弹出到受限区域，并且内容脚本无法直接读取该数据。

但文档也提供了一个解决方案：通过.postMessage 进行通信。

Example from the docs:

内容脚本

var port = chrome.runtime.connect();

window.addEventListener("message", function(event) {
  // We only accept messages from ourselves
  if (event.source != window)
    return;

  if (event.data.type && (event.data.type == "FROM_PAGE")) {
    console.log("Content script received: " + event.data.text);
    port.postMessage(event.data.text);
  }
}, false);

注入脚本（你的情况是latest.js）

document.getElementById("theButton").addEventListener("click",
    function() {
  window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "*");
}, false);

【讨论】：