Chrome Extension

The recent Haiti’s 7.0 earthquake has turned my “earthquake alert mode” on. I visit this web page pretty often to check for the major ones.

And I have started to use google chrome after its linux’s release is out. I always wanted to create a “hello world” chrome extension. So tonight (Friday night), I was able to find some quiet time to create a google-chrome extension to show recent earthquakes in CA and NV.

This extension contains 3 things. (place them in a directory.)

1. manifest.json
2. icon.png
3. popup.html

This is the manifest.json

{
  "name": "Recent Earthquakes in CA and NV",
  "version": "1.0",
  "description": "Recent Earthquakes (> 3.0) in California-Nevada.",
  "browser_action": {
    "default_icon": "icon.png",
     "popup": "popup.html"
  },
  "permissions": [
    "http://quake.usgs.gov/", "tabs"
  ]
}

here is my icon.png

and the popup.html

<style>
body {
    min-width:500px;
    background-color: #FFFFCC;
}
div {
    font-size: 13px;
    font-weight: bold;
}

span.mag {
    font-size: 10px;
    color: red;
}
span {
    font-size: 10px;
    color: black;
}

a {
    font-size: 10px;
}
</style>

<script>
var hostUrl = 'http://quake.usgs.gov';
var req = new XMLHttpRequest();
req.open(
    "GET",
    "http://quake.usgs.gov/recenteqs/Quakes/quakes0.htm",
    true);
req.onload = showTable;
req.send(null);

function showUrl(anchor) {
    var urlLocation = '' + anchor.href;
    chrome.tabs.create({url:urlLocation});
}

function showTable() {
    var title = document.createElement("div");
    title.innerText = 'Recent Earthquakes in CA and NV';
    document.body.appendChild(title);
    var hr = document.createElement("hr");
    document.body.appendChild(hr);

    var body = req.responseText;
    var i = body.indexOf('<A HREF="/recenteqs/Maps/');
    body = body.substring(i);
    i = body.lastIndexOf('</PRE>');
    body = body.substring(0, i);

    i = body.indexOf('<STRONG>');
    while (i != -1) {
        body = body.substring(i);
        i = body.indexOf('<A HREF="');
        j = body.indexOf('">');
        var map = hostUrl + body.substring(i+9, j);

        j = body.indexOf('<FONT COLOR="#CC0000"');
        i = body.indexOf('>', j);
        body = body.substring(i+2);
        i = body.indexOf('<A ');
        var mag = body.substring(0, i-1);

        i = body.indexOf('<A HREF="');
        j = body.indexOf('">');
        var details = hostUrl + body.substring(i+9, j);

        body = body.substring(j+2);
        i = body.indexOf('</A>');
        var detailsLoc = body.substring(0, i);

        body = body.substring(i+5);
        i = body.indexOf('</FONT>');
        var mapLoc = body.substring(0, i);

        i = body.indexOf('</STRONG>');
        body = body.substring(i+9);
        i = body.indexOf('<STRONG>');

        var span = document.createElement("span");
        span.setAttribute('class', 'mag');
        span.innerText = 'Mag ' + mag;

        var detailLink = document.createElement("a");
        detailLink.setAttribute('href', details);
        detailLink.setAttribute('onClick', 'showUrl(this)');
        detailLink.appendChild(span);
        document.body.appendChild(detailLink);

        var span = document.createElement("span");
        span.innerText = ' . . ';
        document.body.appendChild(span);

        var mapLink = document.createElement("a");
        mapLink.setAttribute('href', map);
        mapLink.setAttribute('onClick', 'showUrl(this)');
        mapLink.innerText = mapLoc;
        document.body.appendChild(mapLink);

        var br = document.createElement("br");
        document.body.appendChild(br);
    }
}
</script>

Next, go to the chrome extension page and switch to developer mode to load unpack extension. Basically, just point to the directory that I have created. And this is how it looks like.

Advertisement