Chrome 扩展 javascript 功能未定义答案

【问题标题】：Chrome extension javascript function is not definedChrome 扩展 javascript 功能未定义
【发布时间】：2011-10-23 23:34:18
【问题描述】：

我正在开发一个 chrome 扩展，遇到了一个我无法解决的问题；/

我编写了清单文件和一些 java 脚本代码。除了按钮，一切都很好。当我单击它们时，它们应该使用参数触发 echo 函数并将其进一步发送到在 firebreath 中开发的插件。当我在 html 文件中手动注入代码时，一切正常，但是当通过 javascript chrome 控制台注入代码时，会提示我未定义回显函数。我尝试了几种注入代码的方法，但都没有奏效。

所以我向其他程序员寻求帮助或一些好的建议。（第一次发帖害羞）

主 javascript 文件 chrome_script.js

var Reg = /(\+48\s?[0-9]{3}[\-\ ]?[0-9]{3}[\-\ ]?[0-9]{3})|(\+48\s?[\(\ ]?[0-9]{2}[\)\ ]?[0-9]{2,3}[\-\ ]?[0-9]{2}[\-\ ]?[0-9]{2})/g

var content = document.body.innerHTML;

var phoneNumbers = content.match(Reg);

document.getElementsByTagName('head')[0].innerHTML +='<script src="'+chrome.extension.getURL("plug_fun.js")+'" type="text/javascript"></script>';

content = "<object id=\"plugin0\" type=\"application/x-testplugin\" width=\"100%\" height=\"300\"></object>" + content;

for (var i = 0; i < phoneNumbers.length; i++) {
    content = content.replace(phoneNumbers[i], "<button id=\"" + i + "\" type=\"button\" onclick=\"javascript:echo(" + phoneNumbers[i].replace(new RegExp("[\+\ ]", "g"),"") + ")\">" + phoneNumbers[i] + "</button>");
}

document.body.innerHTML = content;

javascript 文件 plug_fun.js，用于插件和按钮

function plugin0(){
    return document.getElementById('plugin0');
}
plugin = plugin0;  
function echo(a){
    var num = String(a);
    plugin().echo(num);
}

清单文件 manifest.json

{
    "name": "Phone Injection",
    "version": "0.2",
    "browser_action": {
        "default_icon": "Phone.ico"
    },
    "permissions": [
            "tabs", "http://*/*", "https://*/*", "file://*"
    ],
    "plugins": [
        { "path": "npTestPlugin.dll", "public": true }
        ],
    "content_scripts": [ {
        "matches": ["http://*/*", "https://*/*", "file://*"], 
        "js": ["chrome_script.js", "plug_fun.js"]
    }]
}

点击按钮时发现错误

Uncaught ReferenceError: echo is not defined

【问题讨论】：

标签： javascript google-chrome-extension npapi

【解决方案1】：

Chrome 扩展程序中的内容脚本在 Google 所谓的“孤立世界”中执行。这意味着不允许不同的脚本相互查看或交互，并且看起来好像页面上没有执行其他 JavaScript。请参阅下面直接从 Google 文档获取更多信息：

内容脚本在称为孤立世界的特殊环境中执行。他们可以访问被注入页面的 DOM，但不能访问页面创建的任何 JavaScript 变量或函数。它查看每个内容脚本，就好像它正在运行的页面上没有其他 JavaScript 执行一样。反过来也是如此：在页面上运行的 JavaScript 不能调用任何函数或访问由内容脚本定义的任何变量。引用自：http://code.google.com/chrome/extensions/content_scripts.html#execution-environment

我建议尝试将与 firebreath 插件交互的代码放在后台脚本中，尽管我会仔细检查并确保这些代码也不会在隔离环境中执行。

【讨论】：

后台页面也被隔离了；/
感谢您的帮助，我确实设法通过后台页面和通过消息与脚本进行通信来做到这一点。

【解决方案2】：

NPAPI 插件（包括在FireBreath 中开发的插件）在将它们放入页面后并不总是可用和立即可用。我会首先尝试设置一个 setTimeout 来延迟尝试调用 plugin().echo() 大约一秒钟；如果这不起作用，你的问题是别的。如果它确实有效，那么您可以添加一个 onload 参数标记，其中包含插件启动时应调用的函数名称。请注意，NPAPI 只允许在 param 标签中传递字符串，因此它必须是全局函数的名称。

有关使用 onload 参数的示例，请参阅 FireBreath FBTestPlugin test.html。

【讨论】：

好吧，我认为这不会有帮助，因为 javascript 函数“echo”甚至没有被调用，所以插件方法没有被访问。
如果问题是我所建议的，那么当您尝试调用 echo 以调用它时，插件加载不足；或者你是说你已经追踪到那个点并且你确定那行javascript没有被执行？因为如果插件加载不足，你肯定无法在调试器中捕获调用，因为调用永远不会到达插件。
我认为像@WadeNorris 所说的那样，隔离是一个问题。在后台页面插件工作正常。

【解决方案3】：

尝试按如下方式重新排列清单；

"content_scripts": [ {
    "matches": ["http://*/*", "https://*/*", "file://*"], 
    "js": ["plug_fun.js", "chrome_script.js"]
}]

现在，在chrome_script.js 中，您不需要手动添加plug_fun.js 文件，因为清单已经提前为您加载了它，所以希望您现在应该发现echo 存在。但是，我不能 100% 确定，因为我从未在我的内容脚本中使用过这种分隔。

【讨论】：