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

Question

我想创建一个

的扩展名

1. 当我点击html上的按钮（抓取公司和定义竞争对手）时，它会转到符合我标准的标签，并在每个标签中抓取一些变量
2. 然后它应该将变量粘贴回popup.html

我设法通过以下脚本完成第1步。

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（这是后台脚本）

var companynames = [];

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

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

})

正如您所看到的，现在当我点击按钮时，

1. 它转到匹配的页面 “https://www.linkedin.com/sales/profile/ *”并注入 “myScript2.js”
2. myScript2.js抓取“link”元素的第一个变量 并发送回bg.js
3. bg.js记录控制台中的所有公司名称

现在一切都很好。但我只是不知道如何将这些公司名称放回popup.html。问题是popup.html已经加载了。 我需要Angular JS来解决这个问题吗？ 另外，我的流程太复杂了吗？

谢谢！

Answer 1

假设弹出页面中有btn4（因为内容脚本中不允许chrome.tabs），您可以将bg.js中的所有逻辑移动到弹出页面，因为弹出页面也存在在扩展上下文中，它可以访问所有扩展api。

通常，对于弹出页面和后台页面之间的消息传递，您可以使用以下方法。

1. Message Passing，只是使用与在内容脚本和背景页面之间进行通信时相同的方式。
2. chrome.storage，您可以在后台/弹出页面中为存储节省价值，并在弹出/后台页面中检索它。
3. chrome.runtime.getBackgroundPage，您可以通过此方法直接调用弹出页面中后台页面中声明的全局方法/变量。