I’ve been branching out to try and pick up some “real” programming skills. The more I delve into Firefox or Chrome extensions, the more I realize I need a solid understanding of fundamental coding. So, I’ve decided to learn Python. To help me reinforce what I’m learning, I’ve started up a new site called “Let’s Learn Python,” in the hopes that others will benefit as well. Come learn it with me.
Google Chrome is the latest browser to let users add, edit and contribute their own coding efforts. Extensions or plugins are what makes web browsers so handy and extendable. Firefox users have long known this– Google Chrome’s extension capabilities are so far not as well known, but hopefully will soon have a synergistic effect on both applications. More publicity for competing products ensures a wide array of choices.
Google has their own “Getting Started” tutorial which is extremely helpful. You can get your feet wet here:
http://code.google.com/chrome/extensions/getstarted.html
Note that at this point, you will need the Developer version of Chrome. You can grab it here:
http://www.chromium.org/getting-involved/dev-channel
Structure
The Chrome extension’s backbone is the manifest file. Specifically, manifest.js. It describes what will be packaged in the extension and describes the name, a brief description, whatever explicit permissions you grant it, and other details. The fields in full are described here:
http://code.google.com/chrome/extensions/manifest.html
The most basic Chrome extension only requires a manifest.js file and another javascript file. For this tutorial, we will use a pre-existing Firefox extension, which is a very basic one- Allow Right Click. This is simply a file that prevents attempts to inhibit the context menu from activating. This is seen on some web sites as a protection scheme of sorts, to try and prevent a user from saving an image or viewing the source. You can get around either of those by simply viewing the cache, but it does come in handy sometimes.
You can test out the effectiveness of the scripts here:
http://www.dynamicdrive.com/dynamicindex9/noright.htm
http://www.dynamicdrive.com/dynamicindex9/noright2.htm
http://www.dynamicdrive.com/dynamicindex9/noright3.htm
Function
Here is the bypass script in its entirety:
void(document.ondragstart=null);
void(document.oncontextmenu=null);
void(document.onselectstart=null);
void(document.onclick=null);
void(document.onmousedown=null);
void(document.onmouseup=null);
void(document.onbeforecopy=null);
void(document.onbeforecut=null);
void(document.oncopy=null)
Save this in a file by itself as rightclick.js.
This issues a series of null statements that will “void out” attempts to manipulate your context menu. The manifest file for this particular extension is below, which you can save as manifest.js, editing it as desired:
{
"authors": [ {
"email": "ehamiter@gmail.com",
"name": "Eric Hamiter"
} ],
"content_scripts": [ {
"js": [ "rightclick.js" ],
"matches": [ "http://*/*" ]
} ],
"description": "Bypass right-click prohibited pages.",
"homepage": "http://erichamiter.com",
"update_url": "http://erichamiter.com/chrome/updates.xml",
"name": "Allow Right Click",
"version": "1.0"
}
The first part is self-evident. The matches section will match any web page- in this case that is precisely what we want. In some cases, though, if you only want it to activate on certain pages, you can limit it here.
As of now, you cannot use a wildcard domain for the matches section- say, images.google.*. This would be very handy instead of matching images.google.com, images.google.co.uk, et cetera. You can get around this limitation by using a javascript trick in your script:
if (location.hostname.indexOf("images.google.") == 0) {
script here
}
You’ll also notice an update section. This works the same as a Firefox extension- it checks an xml file on your server to see if there is a newer version. The updates.xml relevant section on my server is below:
<gupdate protocol="2.0">
<app appid="fhbfcblhfgbemciedggloeeekecmlhcf">
<updatecheck codebase="http://erichamiter.com/chrome/allowrightclick.crx" version="1.0"/>
</app>
</gupdate>
The app appid is generated by Chrome after you package the extension, which I will describe in a bit.
So, we have rightclick.js and manifest.js. Put both of these files in a single folder, named appropriately- “allowrightclick” or something similar. Simple is the best option.
In your Chrome browser, type in this address:
Or alternatively, click on the wrench icon and select Extensions. You should see a screen similar to this one:
Toggle the developer mode selection, and you should see these choices: Load unpacked extension, Pack extension, Update extensions now.
For now, we want the first option: Load unpacked extension. Select it and it will prompt you for the location of your files. Select your folder and hit ok. I wound up with this (your ID will be random and unique, just like you):
Now try out the previous test sites and see if it’s working:
http://www.dynamicdrive.com/dynamicindex9/noright.htm
http://www.dynamicdrive.com/dynamicindex9/noright2.htm
http://www.dynamicdrive.com/dynamicindex9/noright3.htm
If you can successfully right-click and get a menu, it’s working! So, to pack up the extension as a bona-fide Chrome extension, you just visit your extension page again, and select “Pack extension.” Select the previous folder, and it will prompt you for the extension root and directory and an optional private key:
Select your directory again, and you do not need the private key file. If you edit or update the extension, then you can add the private key file which will generate in a moment, and then future updates will retain the same ID.
Chrome will pop up an alert box reminding you that you should keep your key safe:
It saves the two files (extension.crx and extension.pem) in the parent folder of your working extension directory. The .crx file is your new Chrome extension, ready to distribute and to be added to any Beta or Developer version of Chrome. The .pem file is your personal key file and you should keep it safe somewhere. This will be needed to update the file to maintain the same ID.
To test out the new file, uninstall your unpacked extension, and open your .crx file with Chrome. Control-O will open a file; navigate to your .crx file; hit continue, then install. You should get a notice that it has installed successfully.
There are a few different places for trying out new extensions:
https://chrome.google.com/extensions
http://www.chromeextensions.org/
http://www.chromeplugins.org
There are a small but steadily growing number of cool Chrome extensions out there. Create one today and let the world know about it.
I’m selling my iBook which currently does not run like a champ. You can not play games on it, surfing the web is is also impossible, and there are numerous office applications that will also fail. What’s not to like?
http://cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&item=220408128874
This has been used to craft some Firefox extensions you love and/or hate. Buy a piece of history today!
*seriously, it is a giant turd.
This is just a little quickie that I find handy to use. I’ve been meaning to write this for a while but life kept getting in the way.
Prefsearch is an easy-peasy way to search the names of preferences in about:config via Google. There are a million preferences scattered about in there, and I found myself repeatedly copying a preference name, opening a new tab, going to Google, and searching for said name. This is just a simple hack that lets you right-click on a name, select “Google Name,” and you can figure out what happens next.
If you can’t, I’ll let you in in the secret: a new tab is opened in focus or in the background, whatever you have your preferences set as, and Google tells you what’s what regarding the name you just selected. Groovy.
Screen shot:
Install Prefsearch 0.1
(Size: 8kb Release Date: January 19th 2008)
Tested on Firefox 2.0.0.11
