(扩展)我更新选项卡时保存更改的值

马克西姆·布亚科夫(Maxim Buyakov)

因此,我有一个输入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
     });
});
伊万·诺科诺科(IvánNokonoko)

为了保留所做的更改,我将使用localStorage(永久)或sessionStorage(持续时间与窗口一样长)。这样,您可以跟踪所做的更改,并在更新网页时重新进行更改。

例如:

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
});

这样,您的更改将在重新加载页面后保留,直到关闭窗口。为了让他们坚持即使窗口被关闭,替代sessionStoragelocalStorage

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我如何制作选项卡,当单击这些选项卡时,会更改许多元素的样式

在TabControl中更改选项卡时,UI中未更新对ItemsControl的ItemsSource的更改

当输入更改(例如选项卡更改)时,如何告诉我的 modalDialog 自动关闭?

更改下拉值时更改禁用选项卡的类别

在新选项卡中打开输入字段的值。我想实时更改输入字段的值

更改选项卡时如何获取Flutter ScrollController以保存ListView.builder()的位置?

我已经打开的Chrome扩展程序选项卡在扩展程序更新时已关闭

Firefox Web扩展更改新选项卡附件的URL

带有可扩展行的角度材料表,在更改选项卡时自动扩展 使用 stackBlitz 示例

如何在QT中更新进度条时更改选项卡

在 viewpager 中更改选项卡时内容未更新 - Tablayout

Flex-在TabNavigator中更改选项卡时清除DateField值

MahApps更改选项卡时更改LeftWindowCommands项目

从 UITabbarController 中选择选项卡时如何更新 VC 中的值?

更改选项卡时如何调用子选项卡NativeBase中的函数

JavaFX中选项卡关闭时的两次选项卡更改事件

选择选项卡并使中间的主选项卡时如何更改图标?

在IntelliJ IDEA中关闭选项卡时更改为最近使用的选项卡?

更改选项卡时如何获取UI Bootstrap选项卡以发送事件

更改选项卡时,TabNavigator 会跟踪所有选项卡

Android-ViewPager-更改第二个选项卡时,在第一个选项卡上更新UI(滑动检测)

Cocoa Touch:每次点击选项卡上的选项卡时,如何更新表格视图?

单击选项卡图标时,我想更改react-native-router-flux场景中的选项卡图标颜色

EXCEL自动选项卡颜色更改未更新

PhpStorm每次保存时删除选项卡/空格

通过JavaScript更改选项卡的内部文本值

更改 ngModel 值以切换选项卡

闪亮:单击图像时更改选项卡

更改选项卡时关闭以模态显示的 ViewController