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!".
A Chrome Extension is just some basic HTML, CSS, and JavaScript that allows you to add some type of functionality to Chrome by using Chrome's JavaScript APIs. For this tutorial, we are going to focus on building a simple Hello World html page that uses basic JavaScript.
Let's get started:
1. The first thing that you need to do is create a project folder for your extension. Somewhere on your computer, create a new folder called "MyExtension".
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.
Now, we are going to add some basic JavaScript to update the text of our html page. For security reasons, we cannot add inline JavaScript to our html page, so we will need to create an external JavaScript file. You can read more about the content security policy here:
https://developer.chrome.com/extensions/contentSecurityPolicy
9. In our project folder, create a new JavaScript file called "popup.js". Open this file, and add the following code:
10. Next, we will need to refer to this external JavaScript file in our "popup.html" file. Open this file, and add the following line before the closing body tag: <script src="popup.js"></script>
Your code should now look like this:
11. 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:
This was a very basic tutorial that showed you how easy it is to get started making an extension. If you are interested in learning more about Chrome Extensions, you can read more here:
https://developer.chrome.com/extensions
Summary: This tutorial showed you how to create a simple Chrome Extension, and when you click on it, it will display a simple HTML page that uses JavaScript. You can download the completed version of the extension we made here:
MyExtension
I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.
Labels: Chrome Extension, Tutorial
