chrome扩展如何修改弹窗内容？

Question

我正在尝试创建一个简单的 Chrome 扩展程序，它在弹出窗口 window 中有一个按钮，当用户单击该按钮时，该弹出窗口中的一些文本会发生变化。这是我拥有的：

popup.html 文件:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <button id="myButton">Button</button>
    <p id="myText">hello</p>
    <script src="popup.js"></script>
  </body>
</html>

popup.js 文件:

let myButton = document.getElementById("myButton");

myButton.addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: {tabId: tab.id},  // This is probably wrong???
    function: doSomething,
  });
});

function doSomething() {
  console.log("button is clicked");
  document.getElementById("myText").innerHtml = "foo bar";
}

我能够在控制台中看到“按钮被点击”，但没有看到弹出窗口的内容从“hello”变为“foo bar”。我怀疑这是因为我在 executeScript 中使用的目标是错误的，但我不确定修复它的正确方法是什么。有什么想法吗？

Answer 1

应该是：

document.getElementById("myText").innerHTML = "foo bar";

而不是：

document.getElementById("myText").innerHtml = "foo bar";

chrome扩展如何修改弹窗内容？

How to modify the content of popup page in chrome extension?

html

javascript

google-chrome-extension