Chrome Extensions — Tweaking your browser professionally.
So in this article, I will walk you through the steps of making an extension to ease your browser experience and personalize it.
Let’s get started
Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. — https://developer.chrome.com/extensions
So its pretty clear that all you need are your preexisting skills from the “good old messed up the web”.
So in this article, I will guide you through a step by step process of making a chrome extension that modifies your new tab and replaces it with a custom page(‘in my case, I choose to show quotes and I will explain that’).
So, first of all, you need a method to take to the browser somehow and get all the desired configuration done. This is done by a JSON file called manifest.js. Take a note that the name is specified and no other name is allowed.
{
// manifest_version , name and extension version are mandatory
// description in the description of extension (optional)
"manifest_version": 2,
"name": "Colorful Crap",
"version": "2.0",
"description": "This extension modifies your new tab to let you get inspired",
// It is going to an object that has three images of size 128,48,16
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"browser_action" : {
"default_popup" : "popup.html"
},
"chrome_url_overrides" : {
"newtab" : "newtab.html"
},
"permissions": [
"storage"
]
}iconsare the icons that will appear inside your browser as your extensions icon and Google has provides some standard sizes for this. It is an optional field but a good idea to apply. Remember these need to be put in the root of your project or else you should provide a complete path.browser_action— defines what happens when the extension icon is clicked inside the browser.
3. chrome_url_overrides — This lets you override the default new tab provided by chrome. newtab.html is a page we will create later which will be a replacement for the current new tabs page.
4. Chrome has a lot of permission options and we are using storage which lets us store data inside the browser’s storage.
Now the newtab.html looks something like
<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8" /><title>NewTab - Crafted by MindArt</title><style>* {margin: 0px;padding: 0px;}body {background-color: #2a3338;}.container {width: 960px;margin: 30px auto;text-align:center;color: white;}#quote {letter-spacing: 1.5px;font-size: 56px;}#author {position: absolute;top:560px;left:980px;font-size: 28px;}</style><script type="text/javascript" src="init.js"></script><script type="text/javascript" src="newtab.js"></script></head><body><div class="container"><p id="quote"></p><p id="author"></p></div></body></html>
Just some plain HTML there nothing special, but the import part’s to note are the init.js and newtab.js scripts.
Let’s analyze them one by one.init.js — This is just a data initializing script that is used to load the data in the local storage when the user loads the extension for the first time.
/*** Dummy data to be used for testing.*/let quotes = {"Unknown":["The future depends on what you do today."],"Steve Jobs":["Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do.","That's been one of my mantras - focus and simplicity. Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it's worth it in the end because once you get there, you can move mountains."],"Bill Gates" : ["If you are born poor its not your mistake, But if you die poor its your mistake.","I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.","Success is a lousy teacher. It seduces smart people into thinking they can't lose.","Be nice to nerds. Chances are you'll end up working for one."]};
newtab.js — This file contains all the logic for the various color aspects and cycling through the code every 60 seconds.
// Generate random number between 0 to numconst getRandomInt = (num) => {return Math.floor(Math.random() * (num + 1));}// This function contains the execution login of the application.const logic = (quotesFetched) => {// Get all the keys(Authors) from quotesFetchedlet keys = Object.keys(quotesFetched);// Randomly picking one author.let author = keys[getRandomInt(keys.length-1)];// Loading all the quotes by selected author.let quotesArray = quotesFetched[author];console.log(`${author},${quotesArray}`);// Randomly picking a quote from quotes.let quote = quotesArray[getRandomInt(quotesArray.length-1)];// Adding content to html page.document.getElementById('quote').innerHTML = quote;document.getElementById('author').innerHTML = author;};// Starting point of the application.const start = () => {// Retriving stored data from chrome storage.chrome.storage.sync.get(null,function(items) {// Calling the logic function to start the application logic.if(Object.keys(items).length === 0 && items.constructor === Object) start();else {logic(items);// One min wait and repeat the process.setInterval(logic,60000);}});};// Function used to load data in the browser storage.(() => {// Checks if quote is available in storage, if so the extension is already loaded and nothing needs to be done.// if not then we load the quotes.chrome.storage.sync.get("Unknown",(items) => {if(typeof items["Unknown"] === 'undefined') {chrome.storage.sync.set(quotes,() => {console.log("Quotes have been initialized");});}});// Start the application.start();})();
Due to the random nature of the application, you will get new quotes each time. And there you have it, a fully functioning chrome extension.
For a further read, you should try
You can find the whole project at
Now to try the extension yourself, clone the repo.
Then go to chrome and type
chrome://extensionsThen you will be redirected to the extensions tab in chrome, you will see on the top right a developer toggle(or somewhere else for you), activate that and then go to LOAD UNPACKED. Then navigate to the location where you cloned the repo and select that directory. Now it's all done and you will see the extension loaded successfully in the extensions list. You will also see the icon in the top right bar. Click the icon and then try the new tab.
Hope this will be a helpful boost to your chrome extension journey.
Thank you for reading and happy learning.
