Chrome extension persistent popup best practices

Question

I've understood from the docs that closing chrome extension popups when losing focus has been a design choice.

I'm working on an extension where the user chooses to save elements from a webpage. As he interacts with the main webpage I would like the popup to get updated but that's obviously not possible.

What's the proper way of handling this situation? (this is my first chrome extension)

Answer 1

You can have a content script detect the "save" action. Let's suppose it's a specific DOM element you know for sure it's going to be in the specific main, or that you create by yourself.

content.js

//content script
document.onreadystatechange = function () {
if (document.readyState == "complete") {
    // Grab the UI frmo the mainpage you want to append the save functionality
    var someElementsYouWantToAppendASaveButtonTo = document.getElementsByTagName("...");

    var len = someElementsYouWantToAppendASaveButtonTo.length;
    for (var i = 0; i < len; i++) { 
        // Create a UI save button to provide a functionality
        var theSaveButton = document.createElement("button");
        theSaveButton.value = "Save to Chrome Extension";

        // Send data to extension when clicked
        theSaveButton.addEventListener("click", function() {
            var dataToSentToExtension = {...} // Retrieve from the clicked element, or whatever you want to save
            chrome.extension.sendMessage(dataToSentToExtension, function(response) {
                if(response.success) console.log("Saved successfully");
                else console.log("There was an error while saving")
            });
        }, false); 

        someElementsYouWantToAppendASaveButtonTo[i].appendChild(theSaveButton)
    }
}
}

Then, on the background, you detect the response and set up the popup as you wish.

background.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.dataToSave) {
        chrome.storage.local.set(dataToSave, function() {...});

        // You can then set upn the proper popup for the next click or even switch to it
        switch(request.popupToDisplay) {
            case "awesomeDisplay":
            chrome.browserAction.setPopup({...})
            break;
        }


        var responseFromExtension = {success: true}
    } else {
        var responseFromExtension = {error: true}
    }
});

Answer 2

It seems you are looking to modify\update your popup.html page in accord to changes in a web page. If so, use content scripts and establish connection for single message communication with background page(Since focus is lost every time) and update popup.html indirectly.

References:

• Content Scripts
• Background Page
• Message Passing

Reference for communication between popup and background page apart from these, there are bunch of questions on these topics, they will get you started..