Chrome extension - Revision history

Arjen: made more simple

2020-03-31T13:28:51Z

made more simple

← Older revision		Revision as of 13:28, 31 March 2020
Line 1:		Line 1:
	Creating a Chrome browser extension can ~~be extremely~~ 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.		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		We'll start by creating a folder

	And adding to it the following files:		And adding to it the following files:
Line 9:		Line 9:
	* <code>icon.png</code> the icon of the extension		* <code>icon.png</code> the icon of the extension
	* <code>popup.html</code> content shown when user clicks the extension icon		* <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 ~~downloaded~~ ]		* <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		* <code>content.js</code> JavasScript file where we'll add the action we'll like the extension to perform
	==files==		==files==

Arjensuijker at 12:22, 9 April 2019

2019-04-09T12:22:25Z

← Older revision		Revision as of 12:22, 9 April 2019
Line 90:		Line 90:

	[https://chrome.google.com/webstore/detail/text-free-browsing/ioglfbphilinnhdmfbmfljmhemegfcdg/related?utm_source=vk/ Text Free 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 ]		[https://chrome.google.com/webstore/detail/cornify-unicorn-and-rainb/ghdnfbmfflgelndafnlgabneckbmfpla?utm_source=vk/ Cornify ]

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

Arjensuijker at 12:21, 9 April 2019

2019-04-09T12:21:10Z

← Older revision		Revision as of 12:21, 9 April 2019
Line 87:		Line 87:

	=Examples=		=Examples=
	~~An interesting example of Chrome extensions is~~ Raphael Rozendall [http://www.abstractbrowsing.net/ Abstract Browsing ]		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:Research]]
	[[Category:Tutorial]]		[[Category:Tutorial]]

Andre at 14:31, 19 December 2016

2016-12-19T14:31:59Z

← Older revision		Revision as of 14:31, 19 December 2016
Line 86:		Line 86:
	* 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.		* 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.

	[[Category:~~research~~]]		=Examples=
	[[Category:~~tutorial~~]]		An interesting example of Chrome extensions is Raphael Rozendall [http://www.abstractbrowsing.net/ Abstract Browsing ]

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

Andre at 14:28, 19 December 2016

2016-12-19T14:28:46Z

← Older revision		Revision as of 14:28, 19 December 2016
Line 11:		Line 11:
	* <code>jquery-3.1.1.min.js</code> a jquery library [https://code.jquery.com/jquery-3.1.1.min.js downloaded ]		* <code>jquery-3.1.1.min.js</code> a jquery library [https://code.jquery.com/jquery-3.1.1.min.js downloaded ]
	* <code>content.js</code> JavasScript file where we'll add the action we'll like the extension to perform		* <code>content.js</code> JavasScript file where we'll add the action we'll like the extension to perform
			==files==
	==manifest.json==		===manifest.json===
	<source lang="javascript">		<source lang="javascript">
	{		{
Line 38:		Line 38:
	</source>		</source>

	==popup.html==		===popup.html===
	<source lang="html4strict">		<source lang="html4strict">
	<!doctype html>		<!doctype html>
Line 66:		Line 66:
	</source>		</source>

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

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

			[[Category:research]]
			[[Category:tutorial]]

Andre: /* manifest.json */

2016-12-19T14:24:33Z

manifest.json

← Older revision		Revision as of 14:24, 19 December 2016
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>

Andre: 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..."

2016-12-19T14:21:21Z

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..."

New page

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:
* <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 downloaded ]
* <code>content.js</code> JavasScript file where we'll add the action we'll like the extension to perform

==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>