从弹出窗口到内容脚本的 Chrome 扩展消息

Chrome extension messaging from popup to content script

本文关键字：脚本 Chrome 扩展 消息 窗口      更新时间：2023-09-26

我正在尝试从我的弹出窗口.js向内容发送消息.js但我只是不明白为什么它不起作用。

这是我的设置：

manifest.json 

{
    "manifest_version": 2,
    "name": "Form Builder",
    "description": "This extension populates a form.",
    "version": "0.1",
    "content_scripts": [{
        "all_frames": true,
        "matches": ["http://*/*", "https://*/*"],
        "js" : [
            "/js/jquery/jquery.min.js", 
            "/js/formLoader.js",
            "/js/content.js"
        ]
    }],
    "options_page": "/html/options.html",
    "permissions": ["https://localhost:8443/", 
                    "tabs", "activeTab", "storage", "background"
    ],
    "icons": { "16": "/images/icons/wb_icon_16.png",
               "48": "/images/icons/wb_icon_48.png",
              "128": "/images/icons/wb_icon_128.png" 
    },
    "browser_action": {
        "default_popup": "/html/popup.html"
    }
}

内容.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse){
    sendResponse("received message: " + request);
    formLoader.setFormData(request, sendResponse);
    // Why isn't this getting executed when I send a message from popup?
    sendResponse("Thank you");
});

弹出窗口.js

var popup = {
    // a few parts snipped out for brevity
    sendMessage: function(message) {
        chrome.tabs.sendMessage(tab.id, message, function(message) {
            console.log(chrome.runtime.lastError);
            popup.handleCallbacks(message);
        });
    },
    handleCallbacks: function (message)  { 
        console.log("handleCallbacks: " + message);
    }
}

表单加载器.js

var formLoader = {
    init : function() {
        $("#PostingBody").val("formLoader.init");
    },
    setFormData: function(data, callback) {
        callback("[formLoader.js] got data: " + data);
    }
}
formLoader.init();

当我做这样的事情时：

popup.sendMessage(data);

在我的控制台中，我得到：

Object {message: "Could not establish connection. Receiving end does not exist."}
handleCallbacks: undefined

为什么没有接收端？ 我对内容中的听众做错了什么.js？

感谢：这个答案来自另一个问题

对于 Chrome 26+，请使用 chrome.runtime.onMessage 和 chrome.runtime.sendMessage。

尽管我很肯定，但我发现了几个页面和参考文献没有提到这一点。

相关文章：