Creating a Firefox Extension in 3 Easy Steps

-
We recently created an extension for the Hipatic website.

Here is how to create the most basic extension in 3 easy steps!

Step 1:
Create files & folders.
Name it myfirstextension@mysite.com
Inside this folder create files named chrome.manifest & install.rdf
Inside the same folder create a folder named chrome
Inside the folder named chrome create a folder named content
Inside the folder named content create a file named sample.xul

Step2:
Filling up the files!

open install.rdf and copy the following code

<?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>myfirstextension@mysite.com</em:id>
  <em:version>1.0.0</em:version>
  <em:type>2</em:type>

  <em:targetApplication>
   <Description>
    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
    <em:minVersion>1.5</em:minVersion>
    <em:maxVersion>3.0.*</em:maxVersion>
   </Description>
  </em:targetApplication>

 <em:name>My Very First Extension</em:name>
 <em:description>My Very First Extension</em:description>
 <em:creator>Me</em:creator>
 <em:homepageURL>http://www.hipatic.co.cc/</em:homepageURL>
  </Description>      
</RDF>


Open chrome.manifest and fill in this

content sample chrome/content/ 
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul


Finally open sample.xul (which is in the folder chrome/content/) and copy the following

<?xml version="1.0"?>
<overlay id="sample" 
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <statusbar id="status-bar">
          <statusbarpanel id="my-panel" label="Please visit www.hipatic.co.cc" tooltiptext="Visit www.hipatic.co.cc" onclick="window.open('http://www.hipatic.co.cc')"/>
 </statusbar>
</overlay>


Step 3:
Zipping Up & serving the file!
Zip up the contents of the folder(don't zip the folder, zip it's contents!) you created myfirstextension@mysite.com Using Windows/Winzip/WinRAR. Make sure the format is ZIP in case you use WinRAR. Rename the archive thus created from .zip to .xpi . Now drag the .xpi file you have cretaed to your fiefox browser window. An installation window will pop up. Install the etension and restart the browser! Hurray, you have created your first extension!!

PS:
Modding your first extension:
In the file sample.xul
instead of
<statusbarpanel id="my-panel" label="Please visit www.hipatic.co.cc" tooltiptext="Visit www.hipatic.co.cc" onclick="window.open('http://www.hipatic.co.cc')"/>

you can write
<statusbarpanel id="my-panel" label="Please visit My Website" tooltiptext="Visit My Website" onclick="window.open('http://www.mysite.com')"/>

or you can append javascript files for more functions(More of that later!)

Comments

Post a Comment

Popular posts from this blog

CPU Temperature Guide for Intel Core 2 Duo : Range of Normal CPU Temperatures

-
Is your CPU Temperature too High? How high is high enough? Is 60 degree Celsius high enough or is 70 degree Celsius the threshold? Hipatic covers your temperature problems right here. Below we discuss Intel Core 2 Duo. If your CPU is overheating, visit our CPU Overheating Guide and CPU Overheating: Symptoms, Causes, & Solutions To measure CPU Temperatures you may need Real Temp Intel Core 2 Duo: (If you wish to access the PDF related to your processor, please first follow the link given under sources at the end of the article instead of directly accessing the pdf link given under each sub heading. This will help you access the latest information on your processor from Intel's website & will also prevent hotlinking.) 1. Intel® Core™2 Duo Processor E8000 Series Intel ® Core™2 Duo Processor E8600, E8500, E8400, E8300, E8200, E8190 Thermal Profile Range: 45.1 degree Celsius (Power - 0W) to 72.4 degree Celsius (Power 65W) Source: http://download.intel.com/design/processor/dat
Read more

CS50: "undefined reference to `GetString' " and other errors

-
Image
I was going through the CS50 lectures of Fall 2011. CS50 recommends using the CS50 Appliance which is a VirtualBox installation of Fedora with libraries and software needed for the CS50 course. However, if you are already running a flavour of Linux (Ubuntu 12.04 in the case of this article) and want to do the examples natively, read on. On Linux, the CS50 manual gives instructions on how to install the CS50 Library for C  for Linux ( Fedora / Ubuntu ). After installing the CS50 Library for C, I tried running some samples. While making pointers.c in the Week 5 lecture, I came across this error $make pointers cc     pointers.c   -o pointers pointers.c: In function ‘main’: pointers.c:27:5: error: ‘for’ loop initial declarations are only allowed in C99 mode pointers.c:27:5: note: use option -std=c99 or -std=gnu99 to compile your code make: *** [pointers] Error 1 If instead of using make, you use gcc pointers .c you will get a similar error. To correct this, I ran $gcc pointers.
Read more

Appengine: Custom Error Handlers using webapp2 - Python 2.7

-
Google Developers has a writeup on Custom Error Responses using app.yaml Here is a sample app.yaml app.yaml application: appname version: 1 runtime: python27 api_version: 1 threadsafe: true handlers: - url: /static static_dir: static http_headers: Vary: Accept-Encoding - url: /articles/.* script: articles.app On the Development Environment, I get the following error when I visit http://localhost:8080/ i.e the home page Not found error: / did not match any patterns in application configuration. On Appengine, a standard 404 Error is shown Error: Not Found The requested URL / was not found on this server. This is because the app.yaml file does not specify any handler for "/" Here is the articles.py file articles.py import webapp2 class HomePage(webapp2.RequestHandler): def get(self): self.response.write.out("Hello Birds!") app = webapp2.WSGIApplication( [ (r'/articles/', HomePage) ], debug=True) Specify
Read more