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');
};

Code Formatted by ToGoTutor

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();"});
      });
    }
  });

Code Formatted by ToGoTutor

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"
    ]
  }
}

Code Formatted by ToGoTutor

Chrome Web Store Publishing

• Zip content and manifest.json.
• Rename as "HelloWorldTool.Chrome.zip"
• Login to https://chrome.google.com/webstore/developer/dashboard
• Add New Item
• Choose File, HelloWorldTool.Chrome.zip, Upload
• Category: Developer Tools, Language: English
• Publish Changes: Cost is $5

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>

Code Formatted by ToGoTutor

chrome.manifest

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

Code Formatted by ToGoTutor

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>

Code Formatted by ToGoTutor

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"