从注入的 shadow dom 内部运行内容脚本中的函数答案

【问题标题】：Running a function in a content script from inside an injected shadow dom从注入的 shadow dom 内部运行内容脚本中的函数
【发布时间】：2016-02-25 02:39:58
【问题描述】：

所以我有一个可以注入一些 html 的扩展程序，这样屏幕的右下角就会显示我的一些书签网站。我希望能够单击这些元素并在我的内容脚本中运行代码。由于我可以访问所有 dom 元素，我认为我可以通过简单地使用 onclick 来做到这一点，但显然我不了解内容脚本的范围和页面本身。

通过内容脚本注入 html/css，并将模板导入到创建影子 dom 的宿主元素中。我不认为 shadow dom 影响了 js 作用域，但这是有可能的。

我已经注入了一些 html，所以可能的重复不适用。

onclick 看起来像..

<div onclick="selectLink(0)">Link</div>

在我的内容脚本中，我有

// changes the groups coresponding tab to the url specified by link
function selectLink(){
    var indexes = null;
    ship("select-link", {}, {}, indexes.group, indexes.link);
}

我已经为此苦苦挣扎了一段时间。我只是不明白如何从页面上下文向我的应用程序发送事件。我需要添加监听器吗？我的，谢谢你的帮助。

【问题讨论】：

范围应该和页面一样。。在iframe中是偶然的吗？
不，没有 iframe 它的子元素到 body。
Hmm.. 您可以尝试在插入 dom 后从扩展中检查事件并从 javascript 本身绑定 onclick 事件。也请查看developer.chrome.com/extensions/messaging
是的，那就是连接到扩展的其余部分，我只想从注入的 html 访问内容脚本。从页面内部，我认为我无法访问 chome api。
Building a Chrome Extension - Inject code in a page using a Content script 的可能副本 - 这篇大型帖子几乎包含您需要了解的有关注入脚本的所有信息，包括通信。

标签： javascript html dom google-chrome-extension

【解决方案1】：

是这样的。您需要使用 2 个范围。 1 是内容脚本范围，另一个是实际站点范围。当您将代码注入页面范围时，对于您要处理的任何事件，添加一个事件调度程序，该事件调度程序将customEvent 发送到您的内容脚本。您可以对数据执行任何操作，然后通过另一个 customEvent 将响应发送回实际站点范围并根据需要使用它。

【讨论】：

【解决方案2】：

来自content script doc...

如果页面希望与内容脚本（或通过内容脚本扩展），它必须通过共享 DOM。

所以我通过以某种方式更改 DOM 并使用 .bind() 观察内容脚本中的更改来完成这项工作。

【讨论】：