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

I am trying to create a simple chrome extension that has a button in the popup window, and when the user clicks that button, some text in that popup changes. Here is what I have:

popup.html file:

<!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 file:

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";
}

I am able to see "button is clicked" in the console, but do not see the content of popup change from "hello" to "foo bar". I suspect this is because the target I used in executeScript is wrong, but I am not sure what's the right way to fix it. Any thoughts?

CodePudding user response：

It should be:

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

instead of:

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