A browser extension is a small software module for customizing a web browser.
Steps to create a browser extension:
Create a new folder in your computer to hold the extension's files.
Create a .js file inside the folder you just created. Paste your code into the file and save it.
If you don’t have a text editor, you can just use TextEdit. Make sure the format is plain text.
Create a a file called manifest.json and include the following code:
{
"manifest_version": 2,
"name": "Colored",
"version": "1.0",
"description": "turning different types of content into color blocks",
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["script.js"]
}]
}
Replace the content in the name and description section with your own extension's name and description, and match the file name in the js with the name of the js file you just created.
Check if you have these two files in your extension folder.
In Chrome, open the extensions panel(Windows > Extensions).
Turn on the Developer mode using the toggle at the top right. You will see three new options appear below it:“Load unpacked”,“Pack extension” and“Update”.
Click“Load unpacked”. In the pop-up window, select your extension folder.
The extension will show up in your extension list. Make sure it’s turned on(the toggle at the bottom right).
Visit a webpage(the one your bookmarklet aims to) and see if your extension works.
Make a change and refresh your extension
When make changes to your JavaScript file, you don’t need to upload it again.
In your extension panel, you can refresh the file in your extensions manager by clicking the refreshing button to the left of your extension’s toggle.
Sharing your extension
You can just send the folder to someone(or let people download it) and have them install it as a developer(like above).
You can also put your extension on the Chrome Webstore, but you'll have to register as a developer and pay a registration fee to Google. This is great if you want to share the extension with many people.
Create a Bookmarklet
There’s another tool called bookmarklet that allows you to do some customization on a webpage.
A bookmark normally takes you to a new web page. A bookmarklet is a bookmark that runs javascript on the current page instead of taking you to a new page. To declare that it is a bookmarklet, the"location" it points to starts with javascript:.
Steps to create a bookmarklet:
Make a new bookmark in your browser(right-click on the bookmarks bar and click“Add Page”)
Create an Browser Extension
Steps to create a browser extension:
{ "manifest_version": 2, "name": "Colored", "version": "1.0", "description": "turning different types of content into color blocks", "content_scripts": [{ "matches": ["http://*/*", "https://*/*"], "js": ["script.js"] }]}Make a change and refresh your extension
Sharing your extension
Create a Bookmarklet
Steps to create a bookmarklet: