I started to create a Google chrome extension to highlight the web content. As the first step i was able to create this extension which highlight the whole "p" tag when a user click on it. There are 4 file. (manifest.json, tabcolor.js ,color.js,popup.html (to call the js files,but not necessary,there are other ways )) the manifest.json file looks like
{
"name": " page color 2.",
"version": "1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_title": "Set this page's color.",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
the popup.html file will looks like
<!doctype html> <html> <head> <title>Set Page Color Popup</title> <script src="color2.js"></script> </head> </html>the color.js file looks like
function clickcolor(e) {
chrome.tabs.executeScript(null,{file : "tabcolor.js"});
window.close();
}
document.addEventListener('DOMContentLoaded', function () {
clickcolor();
});
the tabcolor.js file looks like
var divs = document.getElementsByTagName("p");
for(var d in divs) {
divs[d].addEventListener('click',function(){this.style.background='yellow';});
}
It will appears to be like this ,
0 comments:
Post a Comment