Suppose I want to run the printHelloWorldError function from this code in Firefox or Google Chrome. There are several ways to do it.
This code will add a div tag to the body tag of the page with the message 'Hello World'.
Option 1 - From Firefox/Google Chrome Console
Edit the code above to add a line with this at the end: 'printHelloWorldError();' (don't include the single quotes). Right click any page, Inspect (the element), Find the Console. Paste the modified code in the console and hit Enter. You should see the words 'Hello World' at the bottom of the page.
Option 2 - From the Firefox/Google Chrome Browser
Option 3 - From the Firefox/Google Chrome Bookmark
You can right click the Firefox Brower, show the Bookmark Toolbar, create a New Bookmark with the name 'Print Error' and for the location enter the above code. Then, anytime you hit this bookmark, the code will execute.
Option 4a - From a Right Click Menu added through a Firefox Extension
Create an install.rdf file.
For other options like hompageURL, optionsURL, aboutURL, iconURL (ie em:iconURL="chrome://mypackage/content/myicon.png") which use the chrome.manifest file, see developer.mozilla.org
Note: The ID needs to either be an e-mail address or a GUID. See link above for more details.
Create a chrome.manifest file.
Create a folder called mycontent. In it, create a file called rightClickMenuForFirefox.xul
Modify the printError.js file to add a method printHelloWorldErrorForRightClick. The challenge in the right click menu for Firefox and Chrome is getting access to the document for the page. This is why there is a function named DocumentFunction whose job is to return the document for the page. This way, we can see the change on the web page we are looking at.
Here is the file structure.
Highlight, install.rdf, chrome.manifest, mycontent, right click, send to, Compressed (zipped) folder. Rename the new file as RightClickMenuForFirefox.xpi. Go to Firefox 'about:config', 'I'll be careful, I promise', search for xpinstall.signatures.required, set to false so the new extension won't need signing. Go to Firefox address bar and type 'about:addons', click Extensions and drag the file RightClickMenuForFirefox.xpi on this page. Firefox will install this unsigned Extension, restart. From there, you should be able to right click any page and select 'Print Error'.
There are many other things that you can do with the Firefox Extension such as adding an icon, adding a skin, etc.
You can also configure menus as well as menu items. Just add something like this with appropriate closing menu and menupopup closing tags.
Option 4b - From a Right Click Menu added through a Google Chrome Extension
In the mycontent folder, create a file called manifest.json
Note: I debated whether to store this in the same directory as install.rdf, but the Chrome packager uses a folder, which in this case will be mycontent, so that the .crx file created will be at the same level as install.rdf. This is unfortunate and the only difference is that the scripts value would be mycontent/rightClickMenuForGoogleChrome.js instead of rightClickMenuForGoogleChrome.js and execute script command would have to have mycontent/printError.js instead of printError.js if the manifest.json was up one level.
Create a file rightClickMenuForGoogleChrome.js
Here is the file structure.
Go to Google Chrome, in address bar type 'chrome://extensions', select Developer mode, Load unpacked extension, select the mycontent folder.
You can also package with the Pack extension (Developer mode must be checked). Browse to mycontent folder as extension root directory (leave private key field empty). This will create a .crx file and .pem file. The .pem file is a private key file but is not needed if the field was left empty. Later, you can drag and drop this .crx file directly onto the 'chrome://extensions' page.
You can also add other menu options to run more code. Just make sure the appropriate onclick methods are defined.