Getting Started with Google Chrome Extension
According to the latest report, 58.1% of people across the world use Google chrome. The advantages of Google chrome is simplicity, security, appealing app, platform-independent, and one of the best things is its extensions and add-ons. Google Chrome was one of the first browsers to support extensions. It later became a marketplace where you could make extensions and sell them. In this blog, I have explained a step by step guide about how to make the Google Chrome extension.
Requirements for Quotes Extension for Chrome
1. Create a chrome extension that shows quotes.
2. Show quotes in the pop-up while clicking on the extension icon.
Additional requirement
1. Redirect to external URL on extension uninstall.
2. Show quote pop-up automatically when the new tab opens.
Basic steps for creating a chrome extension
1. Create a folder and give your extension name to it.
2. In that folder create manifest.json file which is a must to create an extension.
3. In curly bracket write down,
{
"name": "Your extension name",
"version": "1.0", //version of your extension
"description": "Build an Extension!", //to describe your extension
"manifest_version": 2//must include this otherwise your chrome extension will give error
}
4. Save file.
5. Open chrome -> open setting menu -> click on more tools.
6. Then click on extension which will open the extensions window.
7. To load your extension in browser enable developer mode.
8. Then click on load unpacked and select your extension folder.
9. Click on the select folder.
10. Your extension is loaded in chrome!
How to create quotes extension for chrome?
1. Files required for this extension,
– Quotes api
Quotes api to fetch data from it and show in extension
– Manifest.json
To create chrome extension this file is required with its basic required attributes (Refer basic
steps for creating chrome extension)
– Html file
To show activity on your extension
– Js/css files
Js file to fetch the api using jQuery or any other script
Css to stylize your appearance of html file
2. Create manifest.json file and mention required details like manifest_version, name, version and description.
3. If you want to open pop-up on click of the extension icon then you have to mention “browser_action” in manifest.json and put your html file as “default_popup”.
"browser_action": {
"default_popup": "quotes.html"
},
4. Background files in the manifest file to run in the background for redirect url on uninstall.
"background": {
"scripts": ["js/uninstall.js"],
"persistent": false
}
5. Create an html file which will show quotes in pop-up.
6. Create quote.js file which fetches data from api and shown using a html file.
$.getJSON('https://favqs.com/api/qotd', function(data) {
var quote = `<h2>"${data.quote.body}"</h2>`
$(".quotes").html(quote);
var author = `- ${data.quote.author}<br>`
$(".quote-author").html(author);
});
7. Create uninstall.js which will run background script and fires events for redirect url on uninstall.
chrome.runtime.setUninstallURL("http:/your url")
For any further information or developer guide you can visit:
https://developer.chrome.com/extensions
Quotes API
To fetch api data
http://zetcode.com/javascript/jsonurl/
What challenges have I faced during this?
1. How to create chrome extension?
2. Find quotes api and fetch data from api.
3. How to redirect on external url after extension uninstall?
4. Auto pop-up opens on a new tab.
Mobio Solutions is a Business technology Solutions company who will guide you with strategic advice on the technology that fits best to your business solution. You can contact and get a 1 week free consultation service from the best technocrat of the team.
