javascript - Chrome 扩展：无法使用变量修改活动页面的 DOM。仅使用静态字符串

Question

干杯，
我目前正在开发一个 chrome 扩展，旨在自动化我的部分日常工作并改进流程的工作流程。

作为初始 POC，我试图用扩展弹出窗口中文本区域的输入替换活动选项卡的整个 DOM。

显然，当我用变量覆盖正文的 HTML 时，它不起作用，但是，使用硬编码的字符串它确实起作用。

这是代码popup.js：

  var data_from_input = 'default value'
  submitButton.addEventListener("click", async () => {
    data_from_input = document.getElementsByName('input')[0].value;

    let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: destroyDOM,
    });
  });
  
 
  function destroyDOM() {
    document.body.innerHTML = "test"; // works
    document.body.innerHTML = data_from_input; // doesn't work. Page content is "test" no matter what's in the variable
  }

这就是它的popup.html样子： popup.html 图像

预期行为：

页面的内容应该替换为输入的值。

实际行为：

按下按钮后，无论输入是什么，页面的内容都是“测试”而不是输入的值。

我尝试过的事情：

1. 在调试时，我看到data_from_input确实从输入中提取了正确的值。但是，在destroyDOM函数内部设置断点不起作用，因为由于某种原因没有触发断点，即使文本更改为“测试”，这意味着该函数实际运行。
2. 如果我删除将内容更改为“测试”的行，那么当我按下按钮时什么都不会发生。
3. 将硬编码值设置为data_from_input（代码中的第一行）并通过删除第 3 行来避免覆盖它也不起作用 - 仍然得到“测试”。

为什么它只适用于硬编码字符串而不适用于变量？
有什么想法可能导致这个问题吗？

标签： javascriptgoogle-chromegoogle-chrome-extension