How can I manipulate the DOM using the chrome extension javascript

Question

I want to create a chrome extension that is similar to the Toucan extension

For example I have this example.html without the extension

When I loaded the extension of Toucan it will manipulate the DOM of the website it will change some text content of the

tag. Unfortunately, I don't have any idea how to achieve this in javascript. (I have knowledge about content, background and popup in manifestation json.)

Answer 1

The general direction is to use a content script (defined in the extension manifest), that contains something like the following:

let paragraphs = Array.from(document.getElementsByTagName("p"));

Then, you can modify the first paragraph using

paragraphs[0].innerText = "new text";