Making a Chrome Extension: Hello World
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.
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.
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:
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.
Comments are closed.
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.