从注入的阴影dom

Question

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

通过内容脚本注入html / css，并将模板导入到创建阴影dom的主机元素。我不认为影子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);
}

我一直在努力解决这个问题。我只是不明白如何从页面上下文向我的应用程序发送事件。我需要添加监听器吗？ Idk，谢谢你的帮助。

Answer 1

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

Answer 2

来自content script doc ...

  

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

所以我通过以某种方式更改DOM并使用.bind()观看内容脚本的更改来实现此目的。