如何将变量传递到已经加载的popup.html？

Question

I want to create an extension that

1. When I click a button (Grab Companies and Define Competitors) on the html, it goes to the tabs that match my criteria and grabs some variables in each tab
2. Then it should paste the variables back on the popup.html

I managed to get step 1 done by the following scripts.

grabcomanddefinecompet.js

document.addEventListener('DOMContentLoaded', function (){
    document.getElementById('btn4').addEventListener('click', injection);
});

injection = function (){

    chrome.tabs.query
    (
        {
        lastFocusedWindow: true, 
        url: "https://www.linkedin.com/sales/profile/*"
        },
        function(tabs){
            for(i=0; i<tabs.length; i++)
            {
                chrome.tabs.executeScript(tabs[i].id, {file: "myScript2.js"})
            }
        }
    )
}

myScript2.js

getcompanynames = function(){
chrome.runtime.sendMessage(document.getElementsByClassName('link')[0].innerHTML);
}

getcompanynames();

bg.js (This is Background Script)

var companynames = [];

chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){

    companynames.push(response);
    console.log(companynames)

})

As you can see, right now when I click the button,

1. it goes to pages that match " https://www.linkedin.com/sales/profile/ *" and injects "myScript2.js"
2. myScript2.js grabs the 1st variable of "link" element and sends back to bg.js
3. bg.js logs all company names in the console

Everything is good now. But I just don't know how to put these company names back to popup.html. The problem is popup.html has already loaded. Do I need Angular JS to solve this problem? Also, is my process too complicated?

Thanks!

Answer 1

Assuming btn4 is in the popup page (since chrome.tabs is not allowed in content scripts), you could move all your logic in bg.js to popup page, because popup page also lives in the extension context and it has access to all extension apis.

In general, for message passing between popup page and background page, you could use the following ways.

1. Message Passing , just use same ways as you used for communicating between content scripts and background page.
2. chrome.storage , you could save value to storage in background/popup page and retrieve it in popup/background page.
3. chrome.runtime.getBackgroundPage , you could directly call global methods/variables declared in background page from popup page via this method.