SiteLeds Firefox Extension

SiteLeds

About

SiteLeds is a Mozilla Firefox extension that allows you to monitor a Web site for availability and changes by displaying a small icon on the Firefox status bar.

The extension appears in the Hacking Firefox book I co-wrote.

Why

Did you ever catch yourself repeatedly refreshing a page just to see whether it has changed? Did your server ever stopped responding and it took you several hours to notice and submit a ticket with your hosting provider? SiteLeds puts a small led on your status bar. SiteLeds will monitor a URL for you and the led will change each time the page is changed or cannot be reached.

Currently a Sample Extension

The first version of SiteLeds is 0.1 and it is a basis for the extension creation tutorial in the Hacking Firefox book, so it's deliberately very simple and limited. For example, if you want to change the monitored URL, you can do so by changing the pageURL variable in siteledsOverlay.js.

Install SiteLeds 0.1

The Source Code

Below you'll find the complete source code for SiteLeds 0.1. If these files mean nothing to you but you want to learn how to create Firefox extensions, I suggest you get the book - it has very detailed explanations of everything you'll need and specifically of all the SiteLeds files below.

install.rdf

<?xml version="1.0"?>
 
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
 
    <Description about="urn:mozilla:install-manifest">
        <em:id>{E1B2492D-E6AC-4221-A433-C143E3A1C71E}</em:id>
        <em:version>0.1</em:version>
        <em:name>SiteLeds</em:name>
 
        <em:description>Site Status Monitor</em:description>
        <em:creator>Alex Sirota</em:creator>
        <em:homepageURL>http://www.iosart.com/firefox/siteleds</em:homepageURL>    
 
        <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:minVersion>0.9</em:minVersion>
                <em:maxVersion>1.1</em:maxVersion>
            </Description>
        </em:targetApplication>
     
        <em:file>
             <Description about="urn:mozilla:extension:file:siteleds.jar">
                 <em:package>content/</em:package>
                 <em:skin>skin/classic/</em:skin>
                 <em:locale>locale/en-US/</em:locale>
             </Description>
        </em:file>
      </Description>      
</RDF>

chrome.manifest

content siteleds jar:chrome/siteleds.jar!/content/
locale siteleds en-US jar:chrome/siteleds.jar!/locale/en-US/
skin siteleds classic/1.0 jar:chrome/siteleds.jar!/skin/classic/
overlay chrome://browser/content/browser.xul chrome://siteleds/content/siteledsOverlay.xul

chrome

content

contents.rdf

<?xml version="1.0"?>
 
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
 
    <RDF:Seq about="urn:mozilla:package:root">
        <RDF:li resource="urn:mozilla:package:siteleds"/>
    </RDF:Seq>
 
    <RDF:Description about="urn:mozilla:package:siteleds"
            chrome:displayName="SiteLeds"
            chrome:author="Alex Sirota"
            chrome:name="siteleds"
            chrome:extension="true"/> 
 
    <RDF:Seq about="urn:mozilla:overlays">
        <RDF:li resource="chrome://browser/content/browser.xul"/>
    </RDF:Seq>
 
    <RDF:Seq about="chrome://browser/content/browser.xul">
        <RDF:li>chrome://siteleds/content/siteledsOverlay.xul</RDF:li>
    </RDF:Seq>
 
</RDF:RDF>

siteledsOverlay.js

var gSiteLedsLastRequest = null;
var gSiteLedsLastContent = null;
 
function siteLedsCheckPage() {
    var pageURL = 'http://www.iosart.com/firefox/siteleds/index.html';
    gSiteLedsLastRequest = new XMLHttpRequest();
    gSiteLedsLastRequest.onload = siteLedsPageLoaded;
    gSiteLedsLastRequest.onerror = siteLedsPageError;
    gSiteLedsLastRequest.open('GET', pageURL);
    gSiteLedsLastRequest.send(null);
}
 
function siteLedsPageError() {
    var ledElement = document.getElementById('siteleds-statusbar-panel');
    ledElement.setAttribute('sitestate', 'error');
    setTimeout(siteLedsCheckPage, 900000);
}
 
function siteLedsPageLoaded() {
    var ledElement = document.getElementById('siteleds-statusbar-panel');
 
    if (gSiteLedsLastRequest.status == 200) {
        var prevContent = gSiteLedsLastContent;
        gSiteLedsLastContent = gSiteLedsLastRequest.responseText;
        if ((prevContent != null) && (prevContent != gSiteLedsLastContent)) {
            ledElement.setAttribute('sitestate', 'modified');
        } else {
            ledElement.setAttribute('sitestate', 'ok');
            setTimeout(siteLedsCheckPage, 900000);
        } 
    } else {
        ledElement.setAttribute('sitestate', 'error');
        setTimeout(siteLedsCheckPage, 900000);
    }
}
 
window.addEventListener("load", siteLedsCheckPage, false);

siteledsOverlay.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://siteleds/skin/siteledsOverlay.css" 
                 type="text/css"?>
 
<!DOCTYPE overlay SYSTEM "chrome://siteleds/locale/siteledsOverlay.dtd">
 
<overlay id="siteleds-overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
     <script type="application/x-javascript" 
             src="chrome://siteleds/content/siteledsOverlay.js"/>
 
     <stringbundle id="siteleds-strings" 
             src="chrome://siteleds/locale/siteledsOverlay.properties"/>
 
     <statusbar id="status-bar">
         <statusbarpanel class="statusbarpanel-iconic"
                id="siteleds-statusbar-panel" 
                tooltiptext="&siteLeds.tooltip;"
                sitestate="unknown"
                insertbefore="statusbar-display"/>
     </statusbar>
</overlay>

locale

en-US

contents.rdf

<?xml version="1.0"?>
 
<RDF:RDF xmlns:chrome="http://www.mozilla.org/rdf/chrome#"
         xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 
    <RDF:Seq about="urn:mozilla:locale:root">
        <RDF:li resource="urn:mozilla:locale:en-US"/>
    </RDF:Seq>
 
    <RDF:Description about="urn:mozilla:locale:en-US"
                     chrome:author="Alex Sirota"
                     chrome:displayName="English(US)"
                     chrome:name="en-US">
        <chrome:packages>
            <RDF:Seq about="urn:mozilla:locale:en-US:packages">
                <RDF:li resource="urn:mozilla:locale:en-US:siteleds"/>
            </RDF:Seq>
        </chrome:packages>
    </RDF:Description>
</RDF:RDF>

siteledsOverlay.dtd

<!ENTITY siteLeds.tooltip "SiteLeds Status Icon">

siteledsOverlay.properties

pageModified=The monitored page was modified.
pageError=There was an error retrieving the monitored page.

skin

classic

contents.rdf

<?xml version="1.0"?>
 
<RDF:RDF xmlns:chrome="http://www.mozilla.org/rdf/chrome#"
         xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 
    <RDF:Seq about="urn:mozilla:skin:root">
        <RDF:li resource="urn:mozilla:skin:classic/1.0" />
    </RDF:Seq>
 
    <RDF:Description about="urn:mozilla:skin:classic/1.0">
        <chrome:packages>
            <RDF:Seq about="urn:mozilla:skin:classic/1.0:packages">
                <RDF:li resource="urn:mozilla:skin:classic/1.0:siteleds"/>
            </RDF:Seq>
        </chrome:packages>
    </RDF:Description>
</RDF:RDF>

siteledsOverlay.css

#siteleds-statusbar-panel[sitestate="unknown"] {
    list-style-image: url("chrome://siteleds/skin/state-unknown.png");
}
 
#siteleds-statusbar-panel[sitestate="ok"] {
    list-style-image: url("chrome://siteleds/skin/state-ok.png");
}
 
#siteleds-statusbar-panel[sitestate="error"] {
    list-style-image: url("chrome://siteleds/skin/state-error.png");
}
 
#siteleds-statusbar-panel[sitestate="modified"] {
    list-style-image: url("chrome://siteleds/skin/state-modified.png");
}

state-error.png
state-modified.png
state-ok.png
state-unknown.png