Step by step guide to write a Google Chrome Extension

I have absolutely no experience in writing a Google Chrome Extension myself. But if i can do it. I believe majority of the developer will want to know how i did it and what are the process that involve for me to accomplish this task. Hence, i write this out hopefully people get the idea of how Google Chrome Extension is build and how easy it is to make one once you understand the rule involve in building a google chrome extension. On Google Chrome Extension "Getting Started" page, it's pretty simple and straight forward for anyone to build an app in that scale. However, understanding it will be the task i'm gonna set out for. Hopefully this will be short and easy to understand. Let's start.

Getting Started with Google Chrome Extension

Like many people out there, i started with "HELLO WORLD". Basically you need the following item for a simple Google Chrome extension.

  • a Folder to keep all your files
  • a manifest.json which is also a config file for Google Chrome Extension
  • png or ico image which act as a logo to represent your extension
  • html file which is the display of your chrome extension.

Once you have the above 4 things, your chrome extension is ready to build.  You can head down to the Google Chrome Extension "Getting Started" page to do the above and jump back here to what i wanted to do.

Description of my Google Chrome Extension

Before i get started, just wanted to explain a little bit on what i am going to do and what are the requirement of my extension. I am building a private extension for one of my website to ease my job a little bit. Here are the sequence of this Google Chrome Extension.

  1. I need a chrome extension (obviously)
  2. upon clicking on the extension, it should present me with a form
  3. within the form, the extension should determine the page "url" and "what is the title of the page" and place the correct url and title into the form.
  4. Once i click on the submit button, it will post the record to my website and submit this website feed.

A pretty straight forward chrome extension for any developer but for a starter, this is pretty interesting on how it can be done.

Setup the manifest.json file

Before anything, i believe the most important thing to start would be on the setup file. And here is what i have