Making a Chrome Exntion: Hello World

Making a Chrome Extension: Hello World

1/16/2018

To see a video of me making a chrome extension with you, please watch this youtube video.

What Are Browser Extensions?

Extensions (also known as Addons) help our Web Browsers (such as Chrome and Firefox) perform specific tasks that are useful to us. For example, I use an Adblock extension that, anytime a webpage loads, is called and blocks all advertisements from loading.

There are many useful reasons to use a browser extension, mainly to get helpful functionality that you'd like for certain websites, purposes, or the web browser itself.

Our Own Chrome Extension

We're going to be making our own Chrome Extension. Just a simple one, for the sake of showing that we can do it. Later (in another article), we'll expand upon our knowledge to make a more useful extensiion.

An Extension is...basically the same thing as a webpage. We need some HTML, CSS, JavaScript, and any necessary media files (such as PNG pictures). If you haven't already, go ahead and set up an empty project folder. You can download this project on github, but there isn't much code so just keep reading.

The first thing we need is a "manifest.json" file. Create it. This manifest file basically describes our extension and declares some actions and permissions that we may need. Ours will be pretty basic.

{
    "name": "Extensions w/ srcmake",
    "description" : "Our basic Hello World Extension.",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action":         
                {
                "default_popup": "hello.html",
                "default_icon": "src48x48.png"
                }
  }

You can see that we specify the html for a tiny popup window, and icon for chrome to display.

Let's define this "hello.html" file:

<html>
    <body>
      <h1>srcExtension</h1>
    </body>
  </html>

Finally, make sure you have the icon, which is a 48x48 png file named "src48x48". (Save the picture below and rename it if you choose not to download the project on github.

Okay so our project folder is setup. Now we need to test this in Chrome. In chrome's address bar, type "chrome://extensions". Make sure "Developer Mode" is checked, and click "Load Unpacked Extension". Locate your project folder, and make sure your extension is enabled.

Now, the extension should be able to be used. On the top right of your Chrome menu, click the icon.

And that's it. We made a Chrome Extension.
To continue learning about Chrome Extensions, see the reference list at the end of this article.
To see the article where we make a FireFox extension, please click here.

To see me walk through this demo with you, please watch the following youtube video:

Like this content and want more? Feel free to look around and find another blog post that interests you. You can also contact me through one of the various social media channels.

Twitter: @srcmake
Discord: srcmake#3644
Youtube: srcmake
Twitch: www.twitch.tv/srcmake
Github: srcmake

References:
1. https://developer.chrome.com/extensions
2. https://developer.chrome.com/extensions/overview
3. https://robots.thoughtbot.com/how-to-make-a-chrome-extension

Comments are closed.

Author

Hi, I'm srcmake. I play video games and develop software.

Pro-tip: Click the "DIRECTORY" button in the menu to find a list of blog posts.

License: All code and instructions are provided under the MIT License.

Discord

Chat with me.

Youtube

Watch my videos.

Twitter

Get the latest news.

Twitch

See the me code live.

Github

My latest projects.