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

Run Visual Studio Code Natively on Termux Proot Ubuntu or Other Linux Distribution

-
 I recently got back to Android because I came across an article on installing Ubuntu "natively" on Android without systemd via Termux and proot. I will link relevant articles as I update this post. After I installed Ubuntu via proot, I searched for ways to get a GUI running. This can be done via VNC Server. Again, I will link relevant articles later. Then, I looked for ways to get VS Code running and found that most guides propose installing code-server and then accessing Code via a browser, which has some limitations with extensions. I would propose using vscode.dev instead if you generally have a good network connection on your phone. Because I had a gui running from step 2, I installed VS Code as you would normally on Ubuntu (from a .deb file or using the tar.gz file available for download for arm64 on the VS code website. I realised that I could not install .deb files on a stripped down Ubuntu environment (it worked when I installed ubuntu-desktop instead of gnome deskto...
Read more

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

Windows 8 on Acer Aspire One AOA 150 - a 4 year old netbook

-
Image
OS: Windows 8 RTM 90 day Evaluation 32bit PC: Acer Aspire One AOA 150 CPU: Atom N270 Graphics: Mobile Intel 945 Graphics Chipset with 256 MB memory HDD: 500gb 7200rpm SATA(custom) Screen Resolution: 1024x600 Installation: Installation was launched from within Windows 8 Release Preview. However, since upgrading from Windows 8 Release Preview to RTM  is not supported, a clean installation was done Installing Windows 8 : License Agreement Select Upgrade vs Custom Install Select Partition Windows 8 Installation  Windows 8 installation restarts the computer a couple of times. After installing devices, installation prompts you to select express settings vs custom settings. These settings include the new "Do Not Track" feature in Internet Explorer 10, which is enabled by default if you select Express Settings and is shown clearly. It also includes a "Share information with Apps including your name, picture and location" setting. This is to pe...
Read more