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": [
    "", "tabs"

here is my icon.png

and the popup.html

body {
    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;

var hostUrl = '';
var req = new XMLHttpRequest();
req.onload = showTable;

function showUrl(anchor) {
    var urlLocation = '' + anchor.href;

function showTable() {
    var title = document.createElement("div");
    title.innerText = 'Recent Earthquakes in CA and NV';
    var hr = document.createElement("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)');

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

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

        var br = document.createElement("br");

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.


One Response

  1. Me ha servido de mucho! Gracias

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: