Cheers,
I'm currently developing a chrome extension intended to automate part of my daily work and improve the workflow of processes.
As an initial POC, I'm trying to replace the entire DOM of the active tab with input from a textarea in the extension's popup.
Apparently, when I override the body's HTML with a variable it doesn't work, however, using an hardcoded string it does work.
This is the code of 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
}
And this is how popup.html looks like:
popup.html image
Expected behavior:
The content of the page should be replaced with the input's value.
Actual behavior:
After pressing the button, the content of the page is "test" instead of the input's value, no matter what the input is.
Things I've tried:
- On debug, I see that
data_from_inputdoes extract the correct value from the input. However, setting a breakpoint inside thedestroyDOMfunction does not work as the breakpoint is not triggered for some reason, even though the text changes to 'test' meaning that this function actually runs. - If I remove the line that changes the content to 'test', nothing at all happens when I press the button.
- Setting a hardcoded value to
data_from_input(first line in the code) and avoiding overriding it by removing line 3 does not work as well - still get 'test'.
Why does it only work with an hardcoded string and not with a variable?
Any ideas what could possibly cause that issue?