从 content.js 脚本访问 DOM var答案

【问题标题】：Access DOM var from content.js script从 content.js 脚本访问 DOM var
【发布时间】：2015-03-14 14:06:52
【问题描述】：

我正在尝试通过我的 google chrome 扩展程序使用 content.js 脚本访问网页上的全局变量（计时器）。然而，每次它返回未定义，即使我可以通过开发者控制台轻松访问它。

var mySocket;
console.log('content.js');

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    switch(request.task){
        case "socketInjection":
            window.setTimeout(
            function(){ console.log(timer);}, 5000);

            break;
    }
  });

我在那里使用 setTimeout 例程，以确保页面已完全加载（无论如何它应该已经加载）。

谁有解决方案？在此先感谢丹尼尔

【问题讨论】：

Building a Chrome Extension - Inject code in a page using a Content script的可能重复

标签： google-chrome google-chrome-extension

【解决方案1】：

扩展程序和内容脚本都具有与页面不同的全局范围，因此如果页面上的扩展程序或中有timer = 5之类的内容，则在内容中不可见脚本。

见

https://developer.chrome.com/extensions/content_scripts

但是，内容脚本有一些限制。他们不能：

使用由其扩展页面定义的变量或函数

使用网页或其他内容脚本定义的变量或函数

这个答案讨论了一些选项：

Share in-memory objects in Chrome extension content scripts?

【讨论】：

【解决方案2】：

我误解了 content.js 的上下文

内容脚本在称为隔离的特殊环境中执行世界。他们可以访问他们被注入的页面的 DOM，但不适用于页面创建的任何 JavaScript 变量或函数。它查看每个内容脚本就好像没有其他 JavaScript 在它正在运行的页面上执行。反过来也是一样的：页面上运行的 JavaScript 不能调用任何函数或访问任何由内容脚本定义的变量。

独立世界允许每个内容脚本对其进行更改无需担心与 JavaScript 环境冲突页面或其他内容脚本。例如，内容脚本可以包括 JQuery v1，页面可以包括 JQuery v2，它们不会互相冲突。

孤立世界的另一个重要好处是它们完全将页面上的 JavaScript 与扩展中的 JavaScript 分开。这使我们能够为内容脚本提供额外的功能，不应该从网页访问而不担心网络访问它的页面。

【讨论】：