Writing a simple Google Chrome extension in HTML5 and Javascript

Hi guys, I just want to show you how simple it is to write a Google Chrome extension in HTML5. I assume you are already familiar with HTML and Javascript and also use chrome for web development. There are basically three files needed for this simple Chrome extension, your app icon, your HTML and CSS files and your manifest file.

  1. Manifest.json file
  2. HTML & CSS/Javascript files
  3. Icon file

We will start by creating a simple Map application using the Google maps API, this application will point to your location on the map when clicked from Google Chrome.

Now let’s start developing. We will have three files in our chrome extension folder.

The first file is our icon file, which is a 128×128 png file “icon.png” that will show on the toolbar. The second file is our manifest (json) file “manifest.json” that explains what the app is about to chrome.

{
    "name": "Where am I?",
    "version": "1.0",
    "description": "A cool extension that shows a map of your current location in a popup box without interfering with the page you are currently on.",
    "browser_action": {
        "default_icon": "icon.png"
    },
    "browser_action": {
        "default_icon": "icon.png",
        "popup": "popup.html"
    },
    "permissions": [
        "geolocation"
    ]
}

Next is our HTML / Javascript file where we write the code. Here I’m using “popup.html” which contains all our HTML and Javascript codes required to make a request to Google maps API.

Here is the HTML file (popup.html)

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- call the api -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.4.2/jquery.min.js"></script><!-- jquery -->
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
    function success(position) 
    {
        var s = document.querySelector('#status'); // this is the div that displays the success or error message
        if (s.className == 'success') 
        {
            return;
        }
        s.innerHTML = "Found you!";
        s.className = 'Success';
        var mapcanvas = document.createElement('div');
        mapcanvas.id = 'mapcanvas';
        mapcanvas.style.height = '200px'; // the width and height of the map
        mapcanvas.style.width = '400px';
        document.querySelector('#map').appendChild(mapcanvas); //this is where we want to dump the map
        var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); //call google maps api with our longitude and latitude positions
        var myOptions = {
            zoom: 15, //zoom level
            center: latlng,
            mapTypeControl: false,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
        var marker = new google.maps.Marker({
            position: latlng, 
            map: map, 
            title:"You are here!"
        });
        $.cookie("MyLat", position.coords.latitude); // Storing latitude value
        $.cookie("MyLon", position.coords.longitude); // Storing longitude value
    }
    function error(msg) 
    {
        var s = document.querySelector('#status');
        s.innerHTML = typeof msg == 'string' ? msg : "failed";
        s.className = 'Fail';
    }
    if (navigator.geolocation) 
    {
        navigator.geolocation.getCurrentPosition(success, error);
    } 
    else
    {
        error('Not supported'); //HTML Support, shows geolocation not supported
    }

    //Jquery Code 
    $(document).ready(function()
    {
        $("#check").click(function()
        {
            var lat = $.cookie("MyLat"); //our longitude
            var lon = $.cookie("MyLon"); // our latitude
            alert('Latitued: '+lat);
            alert('Longitude: '+lon);
            var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&sensor=false";
            alert('Google Map API: '+url);
            //Get Json Request Here
        });
    });
</script>
<meta name="viewport" content="width=620" />
<h2> Where am I? </h2>
<em>by tbenjis </em>
<input type='button' id='check' value='Check-out'/>
<div id="status">Loading.............</div> <!-- changes to found you! if everything goes fine -->
<div id="map"></div> <!-- this div shows our map -->

To test your application, you will need to enable the “developer mode” on Google Chrome extension.

Type in “chrome://settings/extensions”  in your chrome browser, this will take you to the extension page.

Then click on “Load unpacked extension” button to select the folder where you have your files. If you want to distribute your extension to other users or upload it to the Chrome app store, you will need to pack your extension. To do this, click on the “pack extension” button and follow the instructions there.

If you really do not understand the concept of chrome extensions, I’ll suggest you checkout http://code.google.com/chrome/extensions/overview.html . There is an overview of chrome extensions there.

I have uploaded a zip file containing the files listed above, unzip the file and use the “Load unpacked extension” method to test it on your browser.

Please comment below for questions or suggestions.

Resources

Download Source

I write codes... web, mobile, desktop and hack stuffs

Leave a Reply

Your email address will not be published. Required fields are marked *