Question

我正在尝试使用chrome扩展程序访问本地var。在页面脚本中尝试console.info(myVar)时，我收到myVar is not defined

但是，当使用chrome开发人员工具并在调试控制台中执行相同的代码段时，我将获得myVar的完整内容。

尝试访问window.myVar时的行为相同，在通过Chrome扩展程序打印时只是undefined。

使用以下代码段通过开发工具和页面脚本将脚本标记注入到正文中会导致完全相同的行为。

   $("body").append($("<script />", {
      html: "console.info(myVar);"
   }));

在开发工具中执行时会打印变量，但在pagescripts中会出现javascript错误

Answer 1

你看到的是预期的行为。

内容脚本在称为隔离的特殊环境中执行世界。他们可以访问他们注入的页面的DOM ，但不对页面创建的任何JavaScript变量或函数。它将每个内容脚本视为没有其他JavaScript 在正在运行的页面上执行。反过来也是如此：页面上运行的JavaScript无法调用任何函数或访问任何函数由内容脚本定义的变量。

http://developer.chrome.com/extensions/content_scripts.html#execution-environment

当您从页面，Chrome开发工具控制台或注入的脚本运行console.info(myVar);时，它会在页面上下文中运行，从而看到变量已定义。

但是，当您从扩展程序代码中运行相同的代码时，您将在完全不同的环境中运行，因此myVar未定义。

您可以使用共享DOM解决此问题 http://developer.chrome.com/extensions/content_scripts.html#host-page-communication

修改

除非有人更正我，否则以下console.info(myVar);代码会在script元素中注入，同时仍会在扩展程序的上下文中执行：

$("<script />", {
    html: "console.info(myVar);" // myVar points to extension's myVar, not page's
});

可以通过记录chrome.extension对象或在内容脚本中声明myVar来运行简单测试 - chrome.extension将可用，myVar将完全按照定义进行记录在内容中。

建议使用外部脚本（对于模块化也更好），将其添加到web_accessible_resources并创建script元素，其中src属性指向该外部脚本

下面的示例扩展代码警告＆＃34; test＆＃34;加载启用扩展程序的test.html页面时。

<强>的manifest.json

{
    "name": "Test",
    "version": "0.1.0",
    "manifest_version": 2,
    "description": "Just a test.",
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["contentscript.js"]
    }],
    "web_accessible_resources": [
        "myscript.js"
    ]
}

test.html （访问过的网页）

<!DOCTYPE html>
<html>
<head>
    <script>
        window.test = 'test';
    </script>
</head>
<body>
</body>
</html>

<强> contentscript.js

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = chrome.extension.getURL('myscript.js');
document.getElementsByTagName('head')[0].appendChild(script);

myscript.js （这是将在页面上下文中运行的外部脚本）

alert(window.test);

Answer 2

Oleg我在chat session.

中找到了问题的根源

我尝试使用以下代码片段注入脚本：

   $("body").append($("<script />", {
      html: "console.info(myVar);"
   }));

正如Oleg在他的回答中所写，看起来console.info部分在到达页面主体之前被执行，导致在这里有扩展上下文。非jQuery版本可以正常工作：

var g = document.createElement('script'); 
var s = document.getElementsByTagName('script')[0]; 
g.text = "console.info(myVar);" 
s.parentNode.insertBefore(g, s);

chrome扩展在定义的变量上抛出“未定义”

2 个答案:

修改