Google Chrome扩展程序帮助：更改单击标记的背景颜色

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