web-dev-qa-db-ja.com

background.jsからpopup.jsにメッセージを渡す

独自のchrome拡張機能を実装しようとしています。この拡張機能では、特定のイベントでブラウザ通知を作成し、background.jsで計算されたデータでポップアップを埋めます。

これがmymanifestファイルです：

{
    "name": "Dummy name",
    "description": "Description",
    "manifest_version": 2,
    "version": "1.1.3",
    "icons": {
        "16": "icon_16.png",
        "48": "icon_48.png",
        "128": "icon_128.png",
        "256": "icon_256.png"
    },
    "browser_action": {
        "default_icon": "icon_48.png",
        "default_title": "Test",
        "default_popup": "popup.html"
    },
    "permissions": ["background","webRequest","webRequestBlocking","webNavigation","tabs","notifications"],
    "background": {
        "scripts":["jquery-1.8.1.min.js","classy.js","background.js"]
    }
}

Background.jsでのsendMessageの呼び出し

show : function(result) {
    var that = this;
    chrome.extension.sendMessage({greeting: "hello"}, function(response) {
        console.log(response);
    });

    if(window.webkitNotifications) {
        var notification = webkitNotifications.createHTMLNotification('notification.html');
        notification.show();
        setTimeout(function(){
            notification.cancel();
            }, '7000');
        }
    }

ポップアップ.jsのメッセージリスナー（chrome拡張機能サンプルから）

chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

私が得る唯一のエラーは

ポートエラー：接続を確立できませんでした。受信側は存在しません。

ご協力ありがとうございました ！

google-chromegoogle-chrome-extensionmessagingmessage-passing
18
François Pérez

ポップアップにはタブIDがないため、エラーが発生します。

その場合は、chrome.runtime.sendMessageとchrome.runtime.onMessage.addListenerを使用できます。

したがって、background.js

chrome.runtime.sendMessage({
    msg: "something_completed", 
    data: {
        subject: "Loading",
        content: "Just completed!"
    }
});

そしてpopup.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.msg === "something_completed") {
            //  To do something
            console.log(request.data.subject)
            console.log(request.data.content)
        }
    }
);

お役に立てば幸いです。

ありがとう、

21
Perfect

これを解決するには、最初にハンドシェイクメッセージをbackground.jsに送信してから、実際のデータをbackground.jsからpopup.jsに送信する必要があります。例：私の場合、私がしたことは

ポップアップ.js

chrome.runtime.sendMessage({data:"Handshake"},function(response){
        
                        });
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
        str = JSON.stringify(message.data);
});

background.js

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
//alert(message.data);
        chrome.runtime.sendMessage({data:datax},function(response){
                        });
                        });

Iamがやろうとしているのは、アイコンをクリックするとすぐにハンドシェイクメッセージがbackground.jsに送信され、それを受信すると、popup.jsで送信したい変数またはデータを送信してレンダリングできるということです。 popup.htmlで。

5
Akshay Singh

使用する runtime.sendMessageメッセージをバックグラウンドスクリプトに送信し、tabs.sendMessageバックグラウンドからコンテンツスクリプトまで。

タブIDを指定する必要があることに注意してください。

chrome.tabs.query({ active: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, { greeting: 'hello' }, (response) => {
        console.log(response);
    });
});

完全な例とドキュメントはここにあります： https://developer.chrome.com/extensions/messaging#simple

0
i11v