主页 / 问题 / 764904
Accepted
Tick-Tack
Asked:2020-12-29 22:51:02 +0000 UTC2020-12-29 22:51:02 +0000 UTC

在标签刷新时保存更改的扩展值

  • 772

所以，我popup.html有一个输入。如果您输入数据，popup.js则将数据发送到content.js并且它已经更改了页面上的某些内容。但更新后，页面上的更改消失了。我怎样才能使它们只有在输入新数据时才会保留和更改？

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});//отправка значения инпута
    })
});
<input type="text" id="inp">
<button id="btn">Send</button>

content.js：

chrome.runtime.onMessage.addListener(function(request) {
     const txt  = request.text; //пришло значение инпута
     chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
          //вставка в html
     });
});

我在输入中输入了一些数字，按下按钮，但在控制台中出现错误（见截图）

在此处输入图像描述

javascript

2 个回答

  1. 例子：

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

btn.addEventListener('click', function() {
  var inp = input.value;
  text.innerHTML = inp;
  localStorage.setItem('dataForMyInput', inp);
});

window.onload = function() {
    text.innerHTML = localStorage.getItem('dataForMyInput') || '';
}
    • 2
  2. Best Answer

    假设您使用类似的解决方案将数据从 发送popup到。content-script

    在这种情况下，可以稍微改进一下。下面是一个独立的扩展代码。

    要跟踪选项卡更新并存储数据结构，我建议在扩展程序中添加一个后台脚本。然后事情变得非常简单：

    清单.json 

    {
  "manifest_version": 2,
  "name": "Test",
  "version": "1.0",
  "description": "",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content-script.js"
      ],
      "run_at": "document_end"
    }
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

    popup.html 

    <input type="text" id="data">
<button id="go">Send</button>
<script src="popup.js"></script>

    popup.js

    const btn = document.querySelector('#go');
const input = document.querySelector('#data');

btn.addEventListener('click', function() {
    const text = input.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(foundTabs) {
        const activeTab = foundTabs[0];

        // Отправка текста в content-script
        chrome.tabs.sendMessage(activeTab.id, {text: text});

        // Отправка данных в background-скрипт для сохранения
        chrome.runtime.sendMessage({
            tabId: activeTab.id,
            text: text
        });
    })
});

    内容脚本.js

    const input = document.querySelector('#lst-ib'); // для примера используется поле ввода Google.com

chrome.runtime.onMessage.addListener(function(request) {
    input.value = request.text;
});

    背景.js

    // Структура вида "id таба -> какой текст вставить"
const observedTabs = new Map();

// Слушаем сообщения из popup.js
chrome.runtime.onMessage.addListener(function(request) {
    const tabId = request.tabId;
    const text = request.text;

    // Сохраняет text для таба по id
    observedTabs.set(tabId, text);
});

// Отслеживаем изменения в табах
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {

    // Если id таба находится в списке отслеживаемых и вкладка завершила загрузку...
    if(observedTabs.has(tabId) && changeInfo.status === 'complete') {
        const text = observedTabs.get(tabId);

        // ..то отправляем в content-script сообщение с текстом (такое же как и в popup)
        chrome.tabs.sendMessage(tabId, {text: text});
    }
});


// Удаляем таб из память в случае, если вкладка закрылась
chrome.tabs.onRemoved.addListener(function(tabId) {
   observedTabs.delete(tabId);
});

    请注意，在observedTabs重新加载扩展程序或浏览器之前，数据一直存在。如果您需要持续访问保存的数据，您可以使用localStorage或chrome.storage.local。

    • 0

相关问题