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.)

Amit Levy · Accepted Answer · 2022-05-08 18:11:08Z

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

answered May 8, 2022 at 18:11

Amit Levy

1414 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mosh Mobile Software Engineer Over a year ago

I want to modify the CSS attached of that tag

Amit Levy Over a year ago

@MoshMobileSoftwareEngineer Then just modify paragraphs[0].style instead. For instance, paragraphs[0].style = "color: blue";

Collectives™ on Stack Overflow

How can I manipulate the DOM using the chrome extension javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related