从内容脚本向页面 Javascript 发送消息

Question

我在 Javascript 运行时中有一个选项卡的方法，我想从扩展的内容脚本中触发该选项卡。从表面上看，这需要在上下文之间传递消息，但我找不到 CS 到选项卡消息的任何文档，只有选项卡到 CS 或 CS 到后台。本质上，我想翻转内容脚本参考的“与嵌入页面的通信”部分。

到目前为止，我window通过注入一个小的 Javascript 有效负载将事件侦听器附加到选项卡（这将在正确类型的消息上触发选项卡方法）：

listenerScript = document.createElement('script');
listenerScript.textContent = "window.addEventListener('message',function(ev){console.log('New event: ' + ev);},false);console.log('installed');";
(document.head||document.documentElement).appendChild(listenerScript);
listenerScript.remove();

该侦听器已注册，但我无法弄清楚如何从我的内容脚本触发它。window.postMessage()内容脚本中的似乎没有做任何事情，并且文档仅讨论使用chrome.runtime创建端口，这是用于后台脚本的。

如何以最简单的方式将消息从内容脚本传递到选项卡？

Answer 1

代码是正确的，因此，考虑到您installed在控制台中看到的内容，唯一的解释是：

1. 页面被重定向，整个 DOM 及其侦听器被销毁。

2. 该页面已欺骗window.addEventListener或附加了自己的'message'侦听器，并在侦听器看到事件之前取消该事件（例如通过使用event.stopPropagation()等）

   在这种情况下，您需要声明您的内容脚本在页面开始加载之前运行，并使用一个监听器在事件沿着 DOM 链冒泡之前捕获该事件（useCapture， 的第三个参数addEventListener，应该是true）。

   清单.json：

   "content_scripts": [{
       "matches": ["<all_urls>"],
       "js": ["content.js"],
       "run_at": "document_start"
   }],
   

   内容.js：

   // this code runs before page starts loading
   var injected = document.documentElement.appendChild(document.createElement('script'));
   injected.text = '(' + function() {
       window.addEventListener('message', function(ev) {
           console.log('New event:', ev);
       }, true); // useCapture: true
       console.log('installed');
   } + ')()';
   injected.remove();
   
   document.addEventListener('DOMContentLoaded', function() {
       // this code will run when the DOM is ready
       window.postMessage({ foo: 'bar', text: "Hello from content script!" }, "*");
   });
   

   请注意，我们添加脚本是documentElement因为document_start通常没有head. 另请参阅：注入 DOM 脚本的其他方法。