roachfiend.com

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) {

}


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:

chrome://extensions/

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.