Chrome extension
From Publication Station
Creating a Chrome browser extension can be extremely simple.
https://developer.chrome.com/extensions/getstarted provides a good starting point tutorial. But I'll try provide a simpler tutorial, on how to create a extensions that turns the background of pages red and rotates all the elements.
We'll start by creating an extension folder
And adding to it the following files:
manifest.jsona metadata file in JSON format containing properties of your extension: name, description, version numbericon.pngthe icon of the extensionpopup.htmlcontent shown when user clicks the extension iconjquery-3.1.1.min.jsa jquery library downloadedcontent.jsJavasScript file where we'll add the action we'll like the extension to perform
manifest.json
{
"manifest_version": 2,
"name": "Communist extension",
"description": "This extension turns you page red",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [ ],
"content_scripts": [
{
"matches": ["<all_urls>" ],
"js": ["jquery-3.1.1.min.js", "content.js"]
}
]
}
popup.html
<!doctype html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
background:red;
color: white;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
-->
</head>
<body>
<h2>Red extention</h2>
</body>
</html>
content.js
console.log('hello from red extension');
$('body').css('background', 'red', 'important');
$('*').css('color','blue', 'important');
$('*').css('-webkit-transform','rotate(180deg)', 'important')
