Chrome 扩展：连接“内容脚本”注入 DOM

发布于 2024-12-14 10:12:38 字数 1001 浏览 2 评论 0原文

我意识到我们可以从内容脚本处理共享 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 (not strict rewriting error messages)

有没有办法我们可以像我在第二个例子中尝试的那样从注入的 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"
}],

原文

I realized we can work at shared DOM (according to manual) from content scripts.

We can connect injected DOM content with our Content Scripts via

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

But when injected DOM implements something like this:

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

thrown error is cannot call fnCallback() on undefined ourController (not exactly rewritten error messages)

Is there aby way we can communicate with our javascript object from injected dom like i tried in second example?

Object is defined in content_script.js like this:

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

and this code is placed directly in script loaded according to manifest like this:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笔落惊风雨 2024-12-21 10:12:38

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

执行环境

内容脚本在称为隔离世界的特殊环境中执行。它们可以访问所注入页面的 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通信的点击事件函数

Solution to this problem comes out from documentation:

Execution environment

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

So any injected content is not able to work with content script. Only solution is to use code like this from withing content scripts

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
        });
    })

It will add click-event function which can communicate with content_script

回复收藏 0 原文

~没有更多了~