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

{
"name": "PRIVATE SUBMIT",
"version": "1.0",
"description": "PRIVATE app to submit a website into for viewing",
"permissions": ["tabs", "http://*/*"],
"browser_action": {"default_icon": "icon.png","popup": "form.html"}
}

some explanation. Here we are giving permission to any tab with any URL other than https url. The name, description and version is self explained. The browser action is what our extension on the browser looks and will do for us. default icon is an image and popup. That's all we need on your manifest.json.

Our form

Here will list out the form i have when it pop up upon clicking on the extension. I have also added jQuery library from google code into my google chrome extensionfor my conveniences.

<div>
<label for="name">Name*</label>
<input id="name" class="input" type="text" name="name" value="" />
</div>

<div>
<label for="url">URL*</label>
<input id="url" class="input" type="text" name="url" value="" />
</div>

<div class="submit"><input id="button" class="button" type="button" value="Submit!" /></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">
  chrome.extension.onConnect.addListener(function(port) {
    var tab = port.sender.tab;

    // This will get called by the content script we execute in
    // the tab as a result of the user pressing the browser action.
    port.onMessage.addListener(function(info) {
      $("#url").val(tab.url);
      $("#name").val(info.title);
  	});
  });

      chrome.tabs.executeScript(null, {file: "content_script.js"});

$(document).ready(function() {

  $('#button').click(function(){
	var name	= $("#name").val(),
	    url		= $('#url').val();
	$.ajax({
            type: "POST", //or GET
            url: "http://private.com/submitasite/",
            data: {
  		name: name,
  		url: url},
            crossDomain:true,
            cache:false,
            async:false,
            success: function(msg){
              console.log(msg);
           },
           error: function(jxhr){
               console.log(jxhr.responseText);
                //do some thing
           }
         });
  	return false;
  });
});
</script>

Upon execution of the popup when a user clicked on the extension, the form will first load out and execute a programming executed content_script.js to fetch some data from the current website page. It will fetch the title of the page and pass it back to the listener where it will store it into our textfield. Now, all we have to do is click on the submit button where the ajax will be fired to wherever your service is located. Before that, you will also need the instruction of the content script.

var additionalInfo = {
  "title": document.title,
};
chrome.extension.connect().postMessage(additionalInfo);

The content script is pretty straight forward. We create a json object and post it to our extension where everything else is explained previously. For the backend part, you should know what to do right? 🙂

No related posts.