將數據從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開發者頁面消息 ：

有一個用於一次性請求的簡單API和一個更復雜的API，它允許您使用長期連接來與共享上下文交換多個消息。

如果您只想發回一個回復，這里有一個例子：

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

編輯將內容腳本添加到網站腳本方式