（扩展）更新选项卡时保存更改的值

Question

所以，我在 popup.html 中有一个输入。如果您输入数据，popup.js 会将数据发送到 content.js 并且它已经更改了选项卡上的某些内容。但是更新选项卡后选项卡上的更改消失了。您如何才能做到只有在 input?

中输入新数据时它们才会保留并更改

popup.html и popup.js

var input = document.querySelector('#inp');
var text = document.querySelector("#text");
var button = document.querySelector("#btn");

btn.addEventListener('click', function() {
  var inp = input.value;

  chrome.tabs.query({active: true, currentWindow: true}, function(foundTabs) {

 const activeTab = foundTabs[0];

 chrome.tabs.sendMessage(activeTab.id, {text: inp});//sending value of input
    })
});

<input type="text" id="inp">
<button id="btn">Send</button>

content.js:

chrome.runtime.onMessage.addListener(function(request) {
     const txt  = request.text; //get input value
     chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
          //insert in html
     });
});

Answer 1

要永久保存更改，您需要将状态保存在某处。

为此，我建议查看 the Chrome developer background page。

您可以从后台页面向您的content script发送消息，即content.js。

Answer 2

为了保留所做的更改，我会使用 localStorage（永久）或 sessionStorage（持续时间与 window 一样长）。这样，您就可以跟踪所做的更改，并在网页更新时重新进行更改。

例如：

content.js

//whenever the page is loaded/updated, check if there was a saved value
var my_text = sessionStorage.getItem("my_text");
if (my_text) {  // if there was, update the page accordingly.
  document.querySelector("input").value = my_text;
}

chrome.runtime.onMessage.addListener(function(message){  //when a message is received...
  my_text = message.text;
  document.querySelector("input").value = my_text;  //...update the webpage ...
  sessionStorage.setItem("my_text", my_text);  // ... and save the value
});

这样您的更改将在页面重新加载时持续存在，直到 window 关闭。要使它们在 window 关闭时仍然存在，请将 sessionStorage 替换为 localStorage。

（扩展）更新选项卡时保存更改的值

(extension)Saving the changed values when i updating the tab

html

javascript

jquery

extension-methods

google-chrome-extension