How to Create Chrome Extensions from Scratch

Step 3. Load the extension

After you are done writing your extension, it is the time to test it through Google Chrome’s feature that offers to load non-store, unpacked extensions. But first, you must enable the developer mode in your browser: click the options button > choose “More tools> Extensions, and then toggle on “Developer mode“.

Load unpacked extension in Google Chrome

Now you will see more buttons under the search bar. Here click the “Load unpacked” button. It will ask for the directory — browse and select your extension’s directory, and it will load the extension. If you edit or update the code of your extension, you can click the reload button to load the latest changes.

Reload button loads the latest changes

In our example, you will see the extension’s icon beside the profile icon because we added a browser action in our sample extension. You can click that icon to add and view to-do items in our extension as that is the specified action.

Click the Todoizr's icon in Google Chrome

Distribute an extension

Though it is easy to upload an extension to Chrome Web Store, the process is too long to cover all the details. In short, you create a developer account, package your extension, and then submit it along with its content details (like name, icon, screenshots, etc.); as listed in its step-by-step guide.

What next? Read and code

As you may have expected, the purpose of this tutorial is to get you started with the extension development for Google Chrome. I have tried to cover the basic concepts; however, you need to know a lot more for doing serious extension development.

That said, below are some of my favorite go-to resources for learning to develop extensions for Google Chrome and other Chromium-based browsers:

  1. All abilities, components, and features of extensions.
  2. Sample extensions by the team behind Google Chrome.

If you have gone through these resources and are ready for some challenge, try adding below features in the extension you just completed developing:

  1. An option to delete the saved to-do items.
  2. A feature to show notifications when done adding an item.

Show Comments