Google chrome extension help : change the background-color of the clicked tag

Question

I'm developing this extension for Google chrome and basically what it does is when the extension is activated user can highlight the currently displaying web content of a web page(like when we highlight a PDF). (There are existing extensions, this is for my learning purpose).

And i'm new to extension development and have less knowledge about the required technical stuff.

As a start i made this simple extension which change the background color of the currently displaying web page when the extension icon is clicked.

code sample of .js file :

function clickss(e) {
   chrome.tabs.executeScript(null,{code:"document.body.style.backgroundColor='yellow'"});
   window.close();
}

document.addEventListener('DOMContentLoaded', function () {
      clickss();
});

this will change the body background color instantly. So how can i make/modify this to only change the color of a tag (div , p , h) when user click on the particular tag(when user click on a web page only the tag related to that point of click, should change its background color).

As i'm new to this i highly appreciate kind answers.

Answer 1

Just get the tags and attach a click event listener for each one.

You can use getElementsByTagName()

var divs = document.getElementsByTagName("div");
for(var d in divs) {
   divs[d].addEventListener('click', clickss);
}

function clickss(e) {
   this.style.backgroudColor = "yellow";
}