1

I'm currently trying to write a Chrome extension that notifies me about DOM changes on the target page. The content script uses a a long lived connection to send a message to the background page if the element changes. Console.log displays the content of the message and everything seems to be fine. But if I send the same message from background page to popup console.log displays undefined. I used chrome.runtime.sendMessage and chrome.extension.sendRequest but the result is the same. Using chrome.runtime.connect to connect background to popup throws a Attempting to use a disconnected port object although it worked for sending messages from content script to background page.

I want to send the notification from content_script to background to popup. Though I'm not sure if I even need to send it to the background in the first place or if it's better to send it straight to the popup.

I'm still new to Chrome extensions and trying to figure out how the examples from Google's site work.

my code :

Manifest.json

{
    "name": "Chrome Extension \\o.o/",
    "description": "doing stuff",
    "version": "1.0",
    "manifest_version": 2,
    "permissions":
        [
        "tabs",
        "http://*/*",
        "background"
        ],
    "background":
        {
            "scripts": ["background.js"]
        },
    "content_scripts": 
        [{
            "matches": [" /* my website */ "],
            "js": ["content_script.js"]
        }],
    "browser_action":
        {
            "default_popup": "popup.html"
        }
}

content_script.js

var audio = document.getElementById("audioSource");

// Open up a long-lived connection to background page
var port = chrome.runtime.connect({name:"stuffChanged"});

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log("stuff happened, audio source changed to " + audio.src);
        // notify background page
        port.postMessage({notification: audio.src});
    })
});

observer.observe(document.getElementById("audioSource"), {attributes: true});

background.js

var toPopup = chrome.runtime.connect({name:"update"});

chrome.runtime.onConnect.addListener(function(port){
    if(port.name == "stuffChanged"){
        port.onMessage.addListener(function(msg){
                var notif = msg.notification;
                // message from content_script, works
                console.log(notif);

                // send to pop up
                // returns undefined
                chrome.runtime.sendMessage({update: notif});
                // disconnected port object
                toPopup.postMessage({notification: notif});
        });
    }
});

popup.js

// returns undefined
chrome.extension.onMessage.addListener(function(msg){
    console.log(msg.udpate);
});

// doesn't work at all
chrome.runtime.onConnect.addListener(function(toPopup){
    toPopup.onMessage.addListener(function(msg){
        console.log(toPopup.notification);
    });
});

Can anyone help ?

amdixon
  • 3,814
  • 8
  • 25
  • 34
Shiza
  • 23
  • 7
  • Have you tried this: http://stackoverflow.com/questions/12265403/passing-message-from-background-js-to-popup-js? Seems like the same issue. – Brian Jun 13 '15 at 00:36
  • I figured if the popup is not open it's like it doesn't exist at all. So sending messages to an inactive popup is impossible? For now I worked around it with notifications. – Shiza Jun 13 '15 at 01:29
  • I think you can do it, you just need to pass the data through something like localstorage. The post I linked had some workarounds. – Brian Jun 13 '15 at 02:25
  • I looked into localStorage and it looked pretty convenient, thanks for the tip! So every time something on the target page changes I'll send the change to the background.js and store it in its localStorage. And every time I open the popup I'll send a message to background.js requesting the content of its localStorage onload. One more question: localStorage is saved as JSON so i can send to whole storage as message. According to Mozilla Web API Storage is an interface so I wondered if it's possible to create my own Storage object to make sure it only contains data from my content script? – Shiza Jun 13 '15 at 10:05
  • It is pretty easy https://developer.chrome.com/extensions/storage – Brian Jun 13 '15 at 11:30

0 Answers0