Developing a Chrome Extension
The folder structure will be as follows:
- src
- content
- HelloWorld.js
- rightClickMenuForGoogleChrome.js
- manifest.json
HelloWorld.js
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();"});
});
}
});
// 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"
]
}
}
"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
- 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>
<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
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>
<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"