数据未显示在弹出窗口中（Chrome 扩展）

Question

我正在编写一个 chrome 扩展程序。我选择 content.js 中的单词并通过单击 contextMenu 保存我的选择。我使用“chrome.runtime.sendMessage({ action: 'sendArray', arr: arr })”将保存的单词发送到 popup.js。问题是 popup.js 控制台和 popup.html 中看不到任何数据。但有一个例外。如果我在弹出窗口打开时选择一个单词并保存它，那么它就会出现。 我该如何解决这个问题？

popup.js

document.addEventListener('DOMContentLoaded', function () {
  let wordList = document.getElementById('wordList');

  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
      if (request.action === 'sendArray') {
        var receivedArray = request.arr;
        
        wordList.innerHTML = "";

        receivedArray.forEach((data) => {
          let listItem = document.createElement('li');
          listItem.textContent = data;
          wordList.appendChild(listItem);
        });
      }
    });
  });
});

内容.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  var selectedWord = window.getSelection().toString().trim();

  if (request.action === 'saveSelectedWord') {
    chrome.storage.local.get({ key: [] }, function (result) {
      let arr = result.key || [];
  
      arr.push(selectedWord);
    
      chrome.storage.local.set({ key: arr }, function () {
        console.log("Value is set", arr);
        chrome.runtime.sendMessage({ action: 'sendArray', arr: arr });
      });
  
      console.log(arr);
    });
  }
});

背景.js

chrome.runtime.onInstalled.addListener(function () {
  chrome.contextMenus.create({
    title: 'Seçilen Sözcüğü Kaydet',
    contexts: ['selection'],
    id: 'saveSelectedWord'
  });
});

chrome.contextMenus.onClicked.addListener(function (info, tab) {
  if (info.menuItemId === 'saveSelectedWord') {
    chrome.tabs.sendMessage(tab.id, { action: 'saveSelectedWord' });
  }
});

Answer 1

因为

popup.js

文件中的 javascript 仅在弹出窗口存在（即打开）时才起作用。要使用

content.js

选择的数据，我建议使用 Chrome 扩展存储 保存它们。将数据保存到存储中后，您可以在每次打开弹出窗口时通过在脚本开始时检索它们来取出它们。