执行后台脚本后 Chrome 扩展更新扩展的视图

如何解决执行后台脚本后 Chrome 扩展更新扩展的视图

我想在扩展的选项卡中显示一个带有服务器响应的 div。 我的问题是我的 background.js 中没有定义 div。

我用这段代码来执行一些函数：

  saveButton.addEventListener('click',async () => {
    let [tab] = await chrome.tabs.query({ active: true,currentwindow: true });

    chrome.scripting.executeScript({
      target: { tabId: tab.id },function: saveProperty,});
  });

我的问题是我的 div 没有在“saveProperty”函数中定义。

编辑

div 在扩展的选项卡中定义。

let showError = document.getElementById('showError');

saveProperty 函数用于获取网页内容并保存在数据库软件中。

此扩展程序用于制作网页抓取。

function saveproperty() {
  chrome.storage.sync.get(
    ['api_key','current_table'],[...]

    function sendData() {
      let req = new XMLHttpRequest();
      req.open("POST",url,true);
      req.setRequestHeader('Content-Type','application/json');
      req.addEventListener("load",function () {
        if (req.status >= 200 && req.status < 400) {

          // I get the error : showError is not defined.
          showError.textContent = 'Saved';
          showError.style = 'display:block';
          showError.style.backgroundColor = '#6dae24';
          setTimeout(function() {
            showError.style = 'display:none';
          },1500);

        } else {
          console.error(req.status + " " + req.statusText + " " + url);
          console.error(req.responseText);
        }
      });
      req.addEventListener("error",function () {
        console.error(req.responseText);
      });
      req.send(json);
    }
  });
}

非常感谢您的帮助！

解决方法

executeScript 在自然没有该 div 元素的不同页面（网页）中运行代码。

解决方案是在其页面中处理该 div。例如，您注入的函数可以发送一条消息：

saveButton.addEventListener('click',async () => {
  const [tab] = await chrome.tabs.query({active: true,currentWindow: true});

  chrome.runtime.onMessage.addListener(function onMessage(msg,sender) {
    if (sender.tab?.id === tab.id) {
      chrome.runtime.onMessage.removeListener(onMessage);
      Object.assign(document.getElementById('showError'),msg.props);
    }
  });

  chrome.scripting.executeScript({
    target: {tabId: tab.id},function: saveProperty,});
});

function saveProperty() {
  //............
  if (ok) {
    chrome.runtime.sendMessage({
      props: {
        textContent: 'Saved',style: 'display:block; background-color: #6dae24',},});
  }
}