Build your first Chrome Extension in under 5 mins

Ever wondered how chrome extensions are built? If not, stay tuned, we will be building a very basic chrome extension. The extension that we are going to build can be called Link Redder. Basically it will change the color of all the links in the webpage to red in color.

Building the extension

Create a folder using the file explorer anywhere, lets call it chrome-link-redder-ext. You can optionally open the folder using your favorite IDE. I love VSCode.

Create the following files inside the folder

manifest.json: Contains necessary configuration related to the extension.

content_script.js: The script that will be injected into the webpage.

Additionally you will need 2 icon files exactly with the following sizes

icon.png: With the size 19×19 pixels. This is displayed on chrome’s extension toolbar besides the URL bar

icon_128.png: With the size 128×128 pixels. This is displayed on chrome’s extension page chrome://extensions/

Put the following code inside manifest.json

{
  "manifest_version": 3,
  "name": "Link Redder",
  "description": "Turn links red",
  "version": "1.0.0",
  "icons": { "128": "icon_128.png" },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "content_script.js"
      ]
    }
  ],
  "permissions": ["activeTab"]
}

“name”, “description”, “version”, “icons” are self explanatory.

“content_scripts” specifies the config for the scripts that will be injected into the page. “matches” specifies the pattern that will be matched with the webpage URL. If the pattern matches then the content script will be injected into the webpage, not otherwise. Since we specified <all_urls> it will match all the URLs, therefore the extension will work on all the websites. “js” specifies the JavaScript script files that will be injected into the webpage.

Place the following code in the file content_script.js

(function linkRedder() {
  var links = document.getElementsByTagName("a");

  for (i = 0; i < links.length; i++) {
    links[i].style.color = "red";
  }
})();

The scripts above selects all the anchor tags on the webpage and change the color style to red for all of them.

Testing the Link Redder extension

Your extension is now ready, its time to try it out. . Follow these steps

Open Chrome's extension Page from the settings menu or go to chrome://extensions/
Enable the Developer mode toggle to enable using the Developer extensions.
Click on the Load Unpacked button. It will open the file explorer dialog.
Choose the folder chrome-link-redder-ext that you have created earlier.

You should now see your Link Redder extension in the Extensions list. Make sure that it is enabled. If you receive any error during this step, go and check the extension files again for any errors, fix the errors and click on the retry button in Chrome.

Next open any webpage to see the Link Redder in action. Here are the Before and After results on Google's webpage

Let me know in the comments if you had any feedback or problems during the process. Happy coding!

Building the extension

Testing the Link Redder extension

Leave a Reply Cancel reply