Chrome 扩展 javascript 功能未定义

Posted 2023-02-19

【中文标题】Chrome 扩展 javascript 功能未定义

【英文标题】：Chrome extension javascript function is not defined

【发布时间】：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

【参考方案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% 确定，因为我从未在我的内容脚本中使用过这种分隔。