Javascript 在Chrome扩展上的内容和弹出窗口之间传递信息_Javascript_Google Chrome_Google Chrome Extension

Javascript 在Chrome扩展上的内容和弹出窗口之间传递信息

javascript google-chrome google-chrome-extension

Javascript 在Chrome扩展上的内容和弹出窗口之间传递信息,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,我正试图在chrome扩展上将content.js中的一些信息传递到Popup.js，但我不知道怎么做，我已经阅读了文档，但仍然不知道它是如何工作的，我只让content.js工作。我的想法是在弹出窗口上创建一个列表，该列表基于content.js提供的数组 content.js: console.log("Working"); const list = new Array(); const interval = setInterval(() => { let names = docume

我正试图在chrome扩展上将content.js中的一些信息传递到Popup.js，但我不知道怎么做，我已经阅读了文档，但仍然不知道它是如何工作的，我只让content.js工作。我的想法是在弹出窗口上创建一个列表，该列表基于content.js提供的数组

content.js:

console.log("Working");
const list = new Array();
const interval = setInterval(() => {
let names = document.getElementsByClassName("cS7aqe");
console.log(names);

if(names.length > 0){

    for(let name of names){
        console.log(name.textContent);

        list.includes(name.textContent) ? null : list.push(name.textContent);

    }

    console.log(list);

    let options = {
        active: true,
        currentWindow: true
    }

    chrome.tabs.query(options, gotTabs);

}

},1000)

function gotTabs(tabs) {
   console.log("gotTabs executed");
   console.log(tabs); 
   let msg = {
       msg: list
   }
   chrome.tabs.sendMessage(tabs[0], msg);
}

// for(let name of list){

//     chrome.browserAction.getPopup(() => {
//         let ul = document.getElementById("List");
//         let li = document.createElement("li");
//         li.innerHTML = name;
//         ul.appendChild(li);
//     })

//     }


chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse) {
    console.log(message);
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerar Chamada</title>
    <script src="popup.js"></script>
</head>
<body>
    <h1>Chamada</h1>
    <ul id="chamada"></ul>
</body>
</html>

弹出窗口。js:

console.log("Working");
const list = new Array();
const interval = setInterval(() => {
let names = document.getElementsByClassName("cS7aqe");
console.log(names);

if(names.length > 0){

    for(let name of names){
        console.log(name.textContent);

        list.includes(name.textContent) ? null : list.push(name.textContent);

    }

    console.log(list);

    let options = {
        active: true,
        currentWindow: true
    }

    chrome.tabs.query(options, gotTabs);

}

},1000)

function gotTabs(tabs) {
   console.log("gotTabs executed");
   console.log(tabs); 
   let msg = {
       msg: list
   }
   chrome.tabs.sendMessage(tabs[0], msg);
}

// for(let name of list){

//     chrome.browserAction.getPopup(() => {
//         let ul = document.getElementById("List");
//         let li = document.createElement("li");
//         li.innerHTML = name;
//         ul.appendChild(li);
//     })

//     }


chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse) {
    console.log(message);
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerar Chamada</title>
    <script src="popup.js"></script>
</head>
<body>
    <h1>Chamada</h1>
    <ul id="chamada"></ul>
</body>
</html>

弹出窗口。html:

console.log("Working");
const list = new Array();
const interval = setInterval(() => {
let names = document.getElementsByClassName("cS7aqe");
console.log(names);

if(names.length > 0){

    for(let name of names){
        console.log(name.textContent);

        list.includes(name.textContent) ? null : list.push(name.textContent);

    }

    console.log(list);

    let options = {
        active: true,
        currentWindow: true
    }

    chrome.tabs.query(options, gotTabs);

}

},1000)

function gotTabs(tabs) {
   console.log("gotTabs executed");
   console.log(tabs); 
   let msg = {
       msg: list
   }
   chrome.tabs.sendMessage(tabs[0], msg);
}

// for(let name of list){

//     chrome.browserAction.getPopup(() => {
//         let ul = document.getElementById("List");
//         let li = document.createElement("li");
//         li.innerHTML = name;
//         ul.appendChild(li);
//     })

//     }


chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse) {
    console.log(message);
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerar Chamada</title>
    <script src="popup.js"></script>
</head>
<body>
    <h1>Chamada</h1>
    <ul id="chamada"></ul>
</body>
</html>

问题：

console.log("Working");
const list = new Array();
const interval = setInterval(() => {
let names = document.getElementsByClassName("cS7aqe");
console.log(names);

if(names.length > 0){

    for(let name of names){
        console.log(name.textContent);

        list.includes(name.textContent) ? null : list.push(name.textContent);

    }

    console.log(list);

    let options = {
        active: true,
        currentWindow: true
    }

    chrome.tabs.query(options, gotTabs);

}

},1000)

function gotTabs(tabs) {
   console.log("gotTabs executed");
   console.log(tabs); 
   let msg = {
       msg: list
   }
   chrome.tabs.sendMessage(tabs[0], msg);
}

// for(let name of list){

//     chrome.browserAction.getPopup(() => {
//         let ul = document.getElementById("List");
//         let li = document.createElement("li");
//         li.innerHTML = name;
//         ul.appendChild(li);
//     })

//     }


chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse) {
    console.log(message);
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerar Chamada</title>
    <script src="popup.js"></script>
</head>
<body>
    <h1>Chamada</h1>
    <ul id="chamada"></ul>
</body>
</html>

内容脚本不能使用大多数

chrome

API，如chrome.tabs或browserAction

内容脚本在网页加载后运行

弹出窗口仅在显示时运行

chrome.browserAction.getPopup返回弹出窗口的文件名，而不是窗口对象

解决方案：

console.log("Working");
const list = new Array();
const interval = setInterval(() => {
let names = document.getElementsByClassName("cS7aqe");
console.log(names);

if(names.length > 0){

    for(let name of names){
        console.log(name.textContent);

        list.includes(name.textContent) ? null : list.push(name.textContent);

    }

    console.log(list);

    let options = {
        active: true,
        currentWindow: true
    }

    chrome.tabs.query(options, gotTabs);

}

},1000)

function gotTabs(tabs) {
   console.log("gotTabs executed");
   console.log(tabs); 
   let msg = {
       msg: list
   }
   chrome.tabs.sendMessage(tabs[0], msg);
}

// for(let name of list){

//     chrome.browserAction.getPopup(() => {
//         let ul = document.getElementById("List");
//         let li = document.createElement("li");
//         li.innerHTML = name;
//         ul.appendChild(li);
//     })

//     }


chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse) {
    console.log(message);
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerar Chamada</title>
    <script src="popup.js"></script>
</head>
<body>
    <h1>Chamada</h1>
    <ul id="chamada"></ul>
</body>
</html>

内容脚本应该侦听消息，仅在收到消息时执行操作，发送带有数据的响应。弹出窗口将使用setInterval定期发送消息-这更安全，因为网页可能会意外地清除内容脚本的DOM计时器

popup.html：将脚本移动到html的末尾，以便在DOM就绪时运行：

popup.js：

chrome.tabs.query({active: true, currentWindow: true}, ([tab]) => {
  setInterval(ping, 1000, tab);
});

function ping(tab) {
  chrome.tabs.sendMessage(tab.id, 'getData', data => {
    const ul = document.querySelector('ul');
    ul.textContent = '';
    ul.append(...res.map(createItem));
  });
}

function createItem(text) {
  const li = document.createElement('li');
  li.textContent = text;
  return li;
}

content.js：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg === 'getData') {
    const elems = [...document.getElementsByClassName('cS7aqe')];
    const texts = elems.map(el => el.textContent);
    const uniqTexts = [...new Set(texts)];
    sendResponse(uniqTexts);
  }
});

您将遇到的一个重要问题是，popup.js仅在显示弹出窗口时才处于活动状态。否则，该页不存在，因此无法接受消息。我的建议是让内容脚本向后台脚本传递一条消息，以保持数组状态。然后弹出一条信息请求，谢谢！你的回答很有帮助！