The purpose of this tutorial is to show you how to make a simple Chrome Extension. Throughout this tutorial we will be making a simple extension that when clicked, will show an HTML page with the text “Hello World!”.
2. Next, we are going to choose what the icon for our extension is going to be. We will use the following image for this tutorial:
You can either download this image and place it in your project folder, or use your own image.
3. Next, we will create the basic HTML page that will be displayed when the user clicks on the extension. In your project folder, create a new html page called “popup.html”.
4. Open the “popup.html” file, and add the following code:
5. Next, you will need to create a manifest file that will tell Chrome how to load our extension. In our project folder, create a new file called “manifest.json”.
6. Open the “manifest.json” file, and add the following code:
The top half of the file includes basic information about our extension, such as: the name, the description, and which version it is. The browser_action is used to let Chrome know which page should be loaded when the extension is clicked, and which icon should be displayed in the toolbar.
7. Now, we are going to test out our extension. In Chrome, navigate to your extensions page by entering “chrome://extensions” in the navigation bar.
You will need to click the check box next to Developer mode to enable it. Then click on “Load unpacked extension…”, and select your project folder in the popup that opens. Your extension should load, and you should see your icon next to your navigation bar.
8. Now, click on your extension and you should see a popup window with the “Hello World!” text.
Your code should now look like this:
Lastly, we need to test out the changes we made to our extension. In Chrome, navigate to your extensions, and reload your extension by clicking on “Load unpacked extension…” and then by selecting your project folder in the popup window.
Once your extension is loaded, click on the extension icon to test it. You should see the following: