Chrome扩展:连接"内容脚本"注入DOM

Chrome Extensions: connect "Content Script" with injected DOM

本文关键字：quot 脚本 注入 DOM Chrome 扩展 连接      更新时间：2023-09-26

我意识到我们可以从内容脚本共享DOM(根据手册)。

我们可以通过

将注入的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(不是完全重写的错误消息)

是否有一种方式，我们可以与我们的javascript对象从注入dom像我在第二个例子中尝试通信?

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

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

，这些代码直接放在脚本中，按照manifest加载，如下所示:

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

这个问题的解决方案来自文档:

执行环境

内容脚本在称为孤立世界的特殊环境中执行。它们可以访问被注入的页面的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
        });
    })

它将添加click-event函数，该函数可以与content_script

通信
相关文章：