Question

我意识到我们可以在内容脚本中使用共享DOM（according to manual）。

我们可以通过

将注入的DOM内容与我们的内容脚本连接起来

element.addEventListener('click',function(){ ourController.fnCallback(); });
// or
element.onclick = ourController.fnCallback;

但是当注入DOM实现这样的东西时：

<a href="javascript:ourController.fnCallback();">Click Me!</a>

抛出的错误是cannot call fnCallback() on undefined ourController（不是完全重写的错误消息）

我是否可以通过注入的dom与我们的javascript对象进行通信，就像我在第二个例子中尝试过一样？

对象在content_script.js中定义如下：

var ourController = {
    fnCallback: function(){
        // code here
    }
};

并且此代码直接放在根据清单加载的脚本中，如下所示：

"content_scripts": [ {
  "js": [ "content_script.js" ],
  "matches": [ "http://*/*", "https://*/*", "ftp://*/*" ],
  "run_at": "document_start"
}],

Answer 1

此问题的解决方案来自文档：

执行环境

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

因此，任何注入的内容都无法使用内容脚本。唯一的解决方案是使用类似的代码来自内容脚本

document.getElementById("elmID").addEventListener('click',function(){
        var data = //get the data from DOM or window state, not from content script
        chrome.extension.sendRequest({
            'request_data': data
        });
    })

它将添加可与content_script通信的点击事件功能

Answer 2

看起来你没有在同一个内容脚本中定义myController或fnCallback。

如果您发布了整个脚本，将会很有帮助。函数名称空间存在于何处？

Chrome扩展程序：将“内容脚本”与注入的DOM相关联

2 个答案: