Day 7: Creating my First Chrome Extension

26 May, 2023

Contributors

Pritesh Kiri

@priteshkiri

Today is April 30th, 2023, I have completed all my design work, including the wireframes necessary for my project ShowwcaseXS, which I shared in my last blog post. Today, I will be immersing myself in the documentation for Chrome extensions.

I find the format of Chrome extension documentation to be quite appealing. They provide an introductory overview of Chrome extensions, as well as three projects that illustrate the various features and functionalities that can be added to web pages using the Chrome browser.

Before delving into the projects, it is important to complete the development basics module, which outlines the necessary setup for creating a simple Chrome extension. The three projects include a reading time that enables the insertion of elements into a website, a focus mode that executes code on the current page after clicking the extension action, and a tab manager that creates a popup for managing browser tabs.

As I have already completed the development basics, which provide a fundamental understanding of Chrome extensions, Let me show you what it looks like:

Tweelet (7).png

This is a simple Chrome extension, where we pop up something when the user clicks on the Chrome extension. This is pretty simple and straightforward.

Let me give you a quick 3-step guide to it:

Step 1:

Create a manifest.json file. This file contains all the configurations of the Chrome extension.

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

You can go to the documentation to understand more about this file.

Step 2:

Create a hello.html file. This will show as a popup when you click on the extension. This is because we have added action in the manifest.json.

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

Step 3:

Now we have to load this unpacked extension in developer mode. First visit
chrome://extensions/ and turn on the developer mode in the top right.

Then load the folder by clicking "Load unpacked" which contains these two files.

Tweelet (8).png

As soon you load the extension it will appear in your Chrome extension list. And then you just need to pin it and click on it. You will see a cute little pop on your extension.

I just completed my reading time extension and got to know about the content script. This helps us to write javascript on the web page using the Chrome extension.

Just Got one more project Idea while writing this blog. The idea is to implement voice writing in the showcase blog section. I did try implementing it by dom-manipulation, spent 3 hours doing that, but was not able to get the end result.

No worries will do that later if the time permits or I may implement that as functionality for the writing thread in ShowcaseXS.

Hackfest 2023 calendar
Let's go 🔥

Day 7: Creating my First Chrome Extension

More Articles