如果弹出窗口关闭,如何在background.js和popup.js之间发送数据?

时间:2019-05-22 20:14:59

标签: javascript google-chrome-extension

我需要将数据从popup.js发送到background.js,然后再将数据从background.js发送到popup.js。但是如果popup.html关闭,则由于port不存在,因此无法从background.js接收数据。如何解决?

我的代码:

popup.js

var port = chrome.runtime.connect({ 
name: 'Communication with background.js', 
});

port.postMessage("Hi BackGround");
port.onMessage.addListener(function(msg) {
console.log("message recieved" + msg);
});

background.js

chrome.runtime.onConnect.addListener(function(port) {
console.log("Connected .....");
port.onMessage.addListener(function(msg) {
console.log("message recieved " + msg);
port.postMessage("Hi Popup.js");
});
});

1 个答案:

答案 0 :(得分:0)

一旦弹出窗口消失,不仅端口关闭,而且popup.js脚本也不再运行。您可以将内容存储在background.js脚本中(持久),每次加载弹出窗口时,发送相关信息(您已经部分构建了此信息),也可以将信息存储在本地存储中并在每次加载时加载弹出窗口加载的时间。

popup.js background.js

chrome.storage.sync.set({'dataValue1': 'Some data 1.'});
chrome.storage.sync.set({'dataValue2': 'Some data 2.'});

popup.js

function updatePopup(){
  chrome.storage.sync.get(['dataValue1','dataValue2'], function(data) {
    //Update popupElement1 and popupElement2 with loaded data
    document.getElementById("popupElement1").value = data.dataValue1;
    document.getElementById("popupElement2").value = data.dataValue2;

  });
}

document.addEventListener('DOMContentLoaded', updatePopup);