How to pass variables to the popup.html which has loaded already?

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!