Chrome extension

From Publication Station
Revision as of 14:24, 19 December 2016 by Andre (talk | contribs) (→‎manifest.json)

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.json a metadata file in JSON format containing properties of your extension: name, description, version number
  • icon.png the icon of the extension
  • popup.html content shown when user clicks the extension icon
  • jquery-3.1.1.min.js a jquery library downloaded
  • content.js JavasScript 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')