Fatal编程技术网

Google chrome extension 从内容脚本向页面javascript发送消息

google-chrome-extension

Google chrome extension 从内容脚本向页面javascript发送消息,google-chrome-extension,javascript-events,content-script,Google Chrome Extension,Javascript Events,Content Script,我在Javascript运行时中有一个方法，用于从扩展的内容脚本触发的选项卡。从表面上看，这需要在上下文之间传递消息，但我找不到任何CS-to-tab消息的文档，只有tab-to-CS或CS-to-background。本质上，我想翻转内容脚本参考的部分 到目前为止，我通过注入一个小的javascript负载将事件侦听器附加到选项卡的窗口（这将触发正确消息类型的选项卡方法）： 此侦听器已注册，但我不知道如何从内容脚本触发它window.postMessage（）似乎没有任何作用，文档中只讨论了使

我在Javascript运行时中有一个方法，用于从扩展的内容脚本触发的选项卡。从表面上看，这需要在上下文之间传递消息，但我找不到任何CS-to-tab消息的文档，只有tab-to-CS或CS-to-background。本质上，我想翻转内容脚本参考的部分

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

此侦听器已注册，但我不知道如何从内容脚本触发它<内容脚本中的code>window.postMessage（）似乎没有任何作用，文档中只讨论了使用
chrome.runtime
创建端口，该端口用于后台脚本

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

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

  • 页面被重定向，整个DOM及其侦听器被销毁
  • 该页面欺骗了
    窗口。添加了EventListener
    或附加了自己的
    “消息”
    侦听器，并在侦听器看到事件之前取消该事件（例如，通过使用
    事件.stopPropagation（）
    等）

    在这种情况下，您需要声明您的内容脚本以运行并使用一个侦听器，该侦听器在事件冒泡进入DOM链之前捕获事件（
    useCapture
    ，
    addEventListener
    的第三个参数应为
    true
    ）

    manifest.json：

    "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at": "document_start"
}],
    注意，我们将脚本添加到
    documentElement
    ，因为在
    document\u开始时
    通常没有
    头
    。 另见：

    • 代码是正确的，因此，考虑到您在控制台中看到
    已安装
    ，唯一的解释是：

  • 页面被重定向，整个DOM及其侦听器被销毁
  • 该页面欺骗了
    窗口。添加了EventListener
    或附加了自己的
    “消息”
    侦听器，并在侦听器看到事件之前取消该事件（例如，通过使用
    事件.stopPropagation（）
    等）

    在这种情况下，您需要声明您的内容脚本以运行并使用一个侦听器，该侦听器在事件冒泡进入DOM链之前捕获事件（
    useCapture
    ，
    addEventListener
    的第三个参数应为
    true
    ）

    manifest.json：

    "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at": "document_start"
}],
    注意，我们将脚本添加到
    documentElement
    ，因为在
    document\u开始时
    通常没有
    头
    。 另见：

    • 您链接的文档显示
    window.postMessage（{type:“FROM_PAGE”，text:“Hello FROM The webpage！”}，“*”）而且它对我有效。只是不要忘记内容脚本中的
    “*”
    ？我尝试了您引用的代码，上面的代码片段被注入到页面中，但它没有记录任何内容。请记住，我试图转到
    CS->page
    ，而不是
    page->CS
    。这是我的测试扩展：我看到正在安装的注入脚本的日志消息和正在发送的消息，但事件侦听器从未触发。您链接的文档显示
    窗口。postMessage（{键入：“FROM_page”，文本：“您好，来自网页！”}，“*”；
    对我很有用。只是别忘了
    ”*“
    。是否从内容脚本？我尝试了您引用的代码，上面的代码片段被注入到页面中，但它没有记录任何内容。请记住，我试图转到
    CS->page
    ，而不是
    page->CS
    。这是我的测试扩展：我看到正在安装的注入脚本的日志消息和正在发送的消息，但事件侦听器从未触发。这是从另一个测试复制代码的产物。很好，但它仍然不能解决问题。使用
    消息
    将正确的版本推送到repo，仍然不会记录任何消息响应。使用
    消息
    代码可以正常工作。应该如此。确保页面未重定向到新URL。重定向可能是问题所在！我在另一个主机域上测试了它，消息显示。似乎注入的脚本实际上正在断开连接。发布一个新的答案，这样我就可以接受它了？这是从另一个测试复制代码的产物。很好，但它仍然不能解决问题。使用
    消息
    将正确的版本推送到repo，仍然不会记录任何消息响应。使用
    消息
    代码可以正常工作。应该如此。确保页面未重定向到新URL。重定向可能是问题所在！我在另一个主机域上测试了它，消息显示。似乎注入的脚本实际上正在断开连接。作为新答案发布，以便我可以接受？

    // 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!" }, "*");
});