How to Create Chrome Extensions from Scratch
Step 1. Get a template
Google Chrome, like any other platform, requires its extensions to have a set structure, which may seem complex for beginners. That is why it is good to get a boilerplate template for an extension that will provide all necessities.
Extensionizr is the best boilerplate generator for chrome extensions. It allows you to choose one of the given extension types — browser action (an action for all pages or the browser), page action (an action for the current page), or hidden extension (a background action that is usually hidden in the front interface).
Moreover, it provides various fine-tuning options to include/exclude necessary add-ons, permissions, etc. You need to select “Browser action” as the extension type and “No background” as the background page for this tutorial.
When you are done choosing the options for creating your sample extension, hit the “Download it!” button in Extensionizr. Finally, extract the archive (.zip) to a directory and open your code editor to start writing the extension.