Chrome extension

2020-03-31T13:28:51Z

Arjen: made more simple

Creating a Chrome browser extension can 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 a folder

And adding to it the following files:
* <code>manifest.json</code> a metadata file in JSON format containing properties of your extension: name, description, version number
* <code>icon.png</code> the icon of the extension
* <code>popup.html</code> content shown when user clicks the extension icon
* <code>jquery-3.1.1.min.js</code> a jquery library [https://code.jquery.com/jquery-3.1.1.min.js download this]
* <code>content.js</code> JavasScript file where we'll add the action we'll like the extension to perform
==files==
===manifest.json===
<source lang="javascript">
{
"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"]
}

]

}

</source>

===popup.html===
<source lang="html4strict">
<!doctype html>

<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
background:red;
color: white;
}
</style>


</head>
<body>
<h2>Red extention</h2>
</body>
</html>
</source>

===content.js===
<source lang="JavaScript">
console.log('hello from red extension');

/* make body background red; all elements ('*') with blue color and rotated 180deg */
$('body').css('background', 'red', 'important');
$('*').css('color','blue', 'important');
$('*').css('-webkit-transform','rotate(180deg)', 'important')
</source>

==load the extension==
To load the extension:
* visit chrome://extensions in your brows
* Ensure that the Developer mode checkbox in the top right-hand corner is checked.
* Click Load unpacked extension… to pop up a file-selection dialog.
* Navigate to the directory in which your extension files live, and select it.
* Alternatively, you can drag and drop the directory where your extension files live onto chrome://extensions in your browser to load it.
* If the extension is valid, it'll be loaded up and active right away! If it's invalid, an error message will be displayed at the top of the page. Correct the error, and try again.

=Examples=
Raphael Rozendall [http://www.abstractbrowsing.net/ Abstract Browsing ]

[https://chrome.google.com/webstore/detail/text-free-browsing/ioglfbphilinnhdmfbmfljmhemegfcdg/related?utm_source=vk/ Text Free Browsing ]

[https://chrome.google.com/webstore/detail/cornify-unicorn-and-rainb/ghdnfbmfflgelndafnlgabneckbmfpla?utm_source=vk/ Cornify ]

[[Category:Research]]
[[Category:Tutorial]]

Publication Station - User contributions [en-gb]

Chrome extension