Tuesday, April 19, 2016

Hello World Javascript Extension for Chrome and Firefox

Developing a Chrome Extension

The folder structure will be as follows:
  • src
    • content
      • HelloWorld.js
      • rightClickMenuForGoogleChrome.js
    • manifest.json

HelloWorld.js

// Main function
HelloWorld=function() {
  alert('Hello World');
};

rightClickMenuForGoogleChrome.js

HelloWorldImportJS = "content/HelloWorld.js";

// To get all these menus to work, there are a few differences between Firefox and Chrome Extensions
// gContextMenu is defined when using Firefox extension and in this case, DocumentFunction should return gContextMenu.gContextMenu.target.ownerDocument instead of document

chrome.contextMenus.create({
  id: 'helloWorldTool',
  title: "Hello World Tool",
  contexts:["all"]
});
  chrome.contextMenus.create({
    id: 'helloWorld',
    parentId: 'helloWorldTool',
    title: "Run Hello World",
    contexts:["all"],
    onclick: function(info, tab){
      chrome.tabs.executeScript(tab.id, {file:HelloWorldImportJS}, function() {
        chrome.tabs.executeScript(tab.id, {code:"HelloWorld();"});
      });
    }
  });

manifest.json

{
  "manifest_version": 2,
  "name""Hello World Tool",
  "short_name""HWT",
  "description""Hello World Tool Description.",
  "version""1.0",
  "minimum_chrome_version""38",
  "permissions": [
    "contextMenus"
    "tabs",
    "http://*/*", 
    "https://*/*" ],

  "background": {
    "scripts": [
      "content/rightClickMenuForGoogleChrome.js"
    ]
  }
}

Chrome Web Store Publishing

Try It Out

  • Go to the link to the Published Extension and click "Add to Chrome"
  • Add to Chrome
  • Right click pages and test "Run Hello World"

Developing a Firefox Extension

The folder structure will be as follows:
  • src
    • content
      • HelloWorld.js
      • rightClickMenuForFirefox.xul
    • chrome.manifest
    • install.rdf

HelloWorld.js

See above.

rightClickMenuForFirefox.xul

<?xml version="1.0"?>
<overlay id="helloWorldToolOverlay"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <statusbar id="status-bar">
        <statusbarpanel id="mypanel" label=""/>
    </statusbar>
    <script type="application/x-javascript" src="chrome://helloWorld/content/HelloWorld.js"/>
    // This is for the right click menu.
    <popup id="contentAreaContextMenu">
        <menuseparator id="helloWorldSeparator" insertafter="context-stop"/>  
        <menu id="helloWorldTool" label="Hello World Tool" insertafter="context-stop">            
            <menupopup> 
                <menuitem id="helloWorld" label="Run Hello World" oncommand="HelloWorld();"/> 
            </menupopup> 
        </menu>
    </popup>
</overlay>

chrome.manifest

content    helloWorld content/ contentaccessible=yes
overlay    chrome://browser/content/browser.xul    chrome://helloWorld/content/rightClickMenuForFirefox.xul

install.rdf

<?xml version="1.0"?>
<RDF:RDF xmlns:em="http://www.mozilla.org/2004/em-rdf#"
         xmlns:NC="http://home.netscape.com/NC-rdf#"
         xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
  <RDF:Description RDF:about="urn:mozilla:install-manifest"
                   em:id="helloWorldTool@helloWorld.com"
                   em:version="1.0"
                   em:name="Hello World Tool"
                   em:type="2"
                   em:unpack="true"
                   em:description="Hello World Tool Description."
                   em:creator="scottizu@gmail.com"
                   em:homepageURL="http://www.ebay.com"
                   >
    <em:targetApplication RDF:resource="rdf:#$RI.6J3"/>
  </RDF:Description>
  <RDF:Description RDF:about="rdf:#$RI.6J3"
                   em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
                   em:minVersion="1.5"
                   em:maxVersion="45.*" />
</RDF:RDF>

Firefox Web Store Publishing

  • Zip content, chrome.manifest and install.rdf
  • Rename as "HelloWorldTool.Firefox.pre.xpi"
  • Login to https://addons.mozilla.org/en-US/developers/
  • Submit an Add-on
  • Choose File, HelloWorldTool.Firefox.pre.xpi, Upload
  • Category: Web Development, Mozilla Public License, version 2.0, Preliminary Review
If you want to distribute by yourself, you can install the extension.  Then go to the installation folder: (C:\Users\sizu\AppData\Roaming\Mozilla\Firefox\Profiles\2xrz9a7g.default-1451441818907\extensions\helloWorldTool@helloWorld.com ).  If it has a META-INF folder, this contains the digital signature for the Firefox Extension.  Zip the content, META-INF, chrome.manifest, install.rdf file and rename "HelloWorldTool.Firefox.xpi".  You can go to 'about:addons' in Firefox, click the settings wheel, Install Add on and select this file.  The extension will then show in 'about:addons'.

Try It Out

  • Go to the link to the Published Extension in Firefox and click Add to Firefox
    • https://addons.mozilla.org/en-US/developers/addon/hello-world-tool/versions/1850966
    • https://addons.mozilla.org/en-US/firefox/addon/hello-world-tool/
  • Add to Firefox
  • Right click pages and test "Run Hello World"