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?
It should be:
document.getElementById("myText").innerHTML = "foo bar";
instead of:
document.getElementById("myText").innerHtml = "foo bar";