将数据从 chrome 扩展程序传递到网页

Question

我可以将数据从我的网页传递到 chrome 扩展程序。我的代码如下。

var id = "myExtensionId";
    chrome.runtime.sendMessage(id, { messageFromWeb: "Sample message" }, function (response) {
});

我可以在扩展端获取选项卡 ID。但是我怎样才能将数据从扩展发送回选项卡呢？以下代码正确吗？

chrome.runtime.onMessageExternal.addListener(
    function(request, sender, sendResponse) {
        if (request.messageFromWeb) {
            console.log(request.messageFromWeb);
        }

        chrome.tabs.sendMessage(sender.tab.id,{ greeting: "hello" });
    }
);

代码，chrome.tabs.sendMessage(sender.tab.id,{ greeting: "hello" }); 不会抛出错误。 应该如何在网页上监听以获取来自扩展程序的事件？

Answer 1

从内容脚本到网站脚本

因为内容脚本和网站中的脚本可以看到相同DOM，你可以用它来进行它们之间的通信。就这么简单：

内容脚本：

// data you want to sent
var data = {
    random: 'Some data',
    more: 'More data'
};

// send data through a DOM event
document.dispatchEvent(new CustomEvent('csEvent', {detail: data}));

网站脚本：

// Listen you CRX event
document.addEventListener('csEvent', function (event) {
    var data = event.detail;

    // Do something with you data from CRX
});

从内容脚本到背景脚本

如何操作取决于您需要哪种类型的连接：一次性或长期。来自 Chrome 开发者页面 Messaging:

There is a simple API for one-time requests and a more complex API that allows you to have long-lived connections for exchanging multiple messages with a shared context.

如果您只想发回响应，这里是一个示例：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");

        sendResponse({farewell: "Message back!"});
    });

编辑以将内容脚本添加到网站脚本方式

将数据从 chrome 扩展程序传递到网页

Pass data from chrome extension to webpage

javascript

google-chrome-extension

从内容脚本到网站脚本

内容脚本：

网站脚本：

从内容脚本到背景脚本