Difference between revisions of "Chrome extension"
From Publication Station
(Created page with "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...") |
|||
| Line 36: | Line 36: | ||
} | } | ||
</source> | |||
==popup.html== | |||
<source lang="html4strict"> | |||
<!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> | |||
</source> | |||
==content.js== | |||
<source lang="JavaScript"> | |||
console.log('hello from red extension'); | |||
$('body').css('background', 'red', 'important'); | |||
$('*').css('color','blue', 'important'); | |||
$('*').css('-webkit-transform','rotate(180deg)', 'important') | |||
</source> | </source> | ||
Revision as of 14:24, 19 December 2016
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')
