I just installed a “hello world” Chrome extension from this Chrome Extension tutorial page. When you surf to www.google.com, the Google logo is replaced with a Lolcat:
Here’s how to write your own Google Chrome extension in three steps:
1. Install the developer-channel version of Google Chrome. I don’t know if this is 100% necessary, but new support for plugins will probably show up in the developer version first. You can read instructions on how to switch to the developer version. It takes maybe 3-4 minutes — you basically run a small program to indicate your preference. In case you’re worried that the developer version will crash a lot: I’ve been running the developer version for months and haven’t seen any major issues. The developer version also gets new features (such as pressing “F11″ to get full-screen mode) way before the beta/stable releases of Chrome. I’m using version 2.0.170.0 of Chrome and the “hello world” extension worked fine for me.
2. Read the initial documentation. This is a brand-new feature, but you can already start hacking. Extensions currently have very Greasemonkey-like functionality: you identify which web pages should be modified, plus JavaScript to be added to those pages. By default, the extension’s JavaScript runs after the page loads, but you can specify that the extension’s JavaScript should run before the page loads. Right now, you can only load one JS file, but that could change in the future. You also can’t currently load Cascading Style Sheets (CSS), but that might also change.
I like several things about the extension framework:
- Your plugin has to have a unique identifier (40 digit hexadecimal number). Given an identifier such as “00123456789ABCDEF0123456789ABCDEF0123456″, an extension can include an image such as foo.gif and then easily access that image by using a full path such as “chrome-extension://00123456789ABCDEF0123456789ABCDEF0123456/foo.gif”
- The “content script” (the JavaScript of an extension) gets its own global scope separate from the web page, so you don’t need to worry about global variables conflicting. But you can still get access to the web page’s global variables using the “contentWindow” variable.
- Bundling your extension directory into a “.crx” Chrome Extension file is as simple as running a short Python script.
- Chrome also supports binary NPAPI (Netscape Plugin Application Programming Interface) plugins.
The Chrome extension manifest, which has metadata about your extension such as name, version, etc., looks much simpler to me than how Firefox wants extensions to be packaged. That’s a big plus in my book, because you spend most of your time writing code and not worrying about packaging up your plug-in. On the down side, I didn’t see any support for internationalization, which is one of the benefits of Firefox’s more comprehensive way of packaging up plugins. Another limitation of the current Chrome extension spec is that you can’t do much other than modify pages via JavaScript. And I didn’t see a way to introduce new widgets into the actual “chrome” of the Chrome browser.
3. Try it out! If you’re running the developer version of Chrome, you can install the “hello world” plugin from the extension howto page just by clicking to download the .crx file. Then type “chrome-ui://extensions/” and you’ll see something like this:
Once you see how it works, just start hacking around and see what happens. Remember, this howto document is only a few days old. I’m sure the Chrome team is thinking about ways to add more functionality to extensions, but the current developer version of Chrome already lets you do a lot of neat things.
One more nice thing: it looks like installing extensions doesn’t require you to restart the browser. 
And a hat-tip to Google OS for pointing out this document.
{ 47 comments… read them below or add one }
Thanks!!!!!! I can’t live without my extensions:
* Web Developer Toolbar
* NoScript
* Live HTTP Headers
* Link Checker
* User Agent Switcher
Things like internationalization, loading more JS/CSS files, modifying browser widgets etc. are all stuff we’re either thinking about or working on, but have yet to implement and ship
Very early days for extensions, but glad you’re excited. Stuff like easy creation/testing/packaging are design goals for Chromium extensions and given that the team doing it has a number of Firefox extension folk such as Aaron Boodman (Greasemonkey), I have high hopes.
Matt, you’re a sick, sick man.
Thanks for the great tutorial, now I need to go mess with my wife by replacing the Google logo with an “iGoogle by Apple” logo.
Thanks for sharing. Do you know if the extension can perform HTTP request across domains or if it bound to a single domain? Where is the best place to ask technical questions about chrome extensions?
I’ve tried using Google Chrome before but had to give it up because I can’t afford to be running two browsers (at least on my PC) but Chrome is amazingly fast and neat looking. But when came across this post, I’ve tried to test if these steps of writing a Chrome extension would work on a rather current version which was Chrome v1.2.141.5 but it seems that it doesn’t work even after I downloaded .crx file. I’ve looked into the step by step instructions on the Chrome Extension How-to but couldn’t make it work either. There’s also a phrase that is somewhat unclear–Find your chrome shortcut and add these flags to it:
chrome.exe –enable-extensions –load-extension=”c:\myextension”
How do you add these flags to the shortcut?
I’ve done a little experiment on this and came up with some listings (a couple of those) but just forgot to get a screen shot. More or less, if my testing we’re accurate, I’d rather say that these steps only works for the Developer version. By the way, I didn’t tried to change channels just for the sake of curiosity. I hope you could show us a little experiment on the version I used and the beta one. But overall, Google Chrome is interface friendly, a screen saver and is very promising and I was hoping that sooner it can be more customizable.
Now, someone please port Adblock!
Nice, verry nice!
Does anyone else think that cat looks like a bear cub with a cat’s head superimposed, or is that just me?
With Firefox add-on, we can overlay Firefox’s window, menu, status bar. But Chrome missing this. This is just like Greasemonkey. Disappointed, expect more.
I can’t wait to get started! Wait… I have a Mac. No love for me from Google.
Hello matt,
You said three easy steps to write a Chrome Extension. I was surprised to see that, people can actually make an extension that easy.
But after reading few lines, I realized that: this post is not written in English language, its kind of programming language and I guess only programmers/developers can understand this.
I know little bit of PHP, but I am 100% sure that I cannot write any type of extension, or can I?
Until someone creates a useful Extension, here’s some instructions on how to make a Google BACONIZER!! http://scriptedlife.com/google-chrome-plugin-extension-support-the-baconizer
I note that Google is very fond of unique identifiers in the form of vast hex strings.
Oh, well, could be worse, I suppose; could be a GUID.
Had a bit of trouble with the “run_at”: “document-start” because as the following link points out the syntax is actually “run-at” with a dash instead of the underscore. So a typo on the howto page.
http://code.google.com/p/chromium/issues/detail?id=4478#c5
Michael
Perhaps if Google would refrain from repurposing common terms we’d be able to use the normal paths to access extension resources, i.e. chrome:// instead of chrome-extension://.
Kudos anyways on taking the first steps towards enabling extensions, and thanks for the succinct how-to. Overwhelmingly the reason I hear for not using Chrome is the lack of extension support.
Hi Matt,
These extensions are going to be a great addition. Once they start roling out useful extensions there no reason I won’t be using Chrome. I prefer Chrome for it’s ease of use / speed, but firefox has the extensions to help go by my every day work.
I look forward to what the developers release
I completely agree with angilina, for a general surfer it’s not easy to write such extensions
but yes it’s good info for techi people
Hmm there still seem to be a bit of flaws there, but in general Its a good addition. Trying to port some greasemonkey scripts to chrome..
After running the python library to compile it into a .crx installation by dragdrop does not work well. I only get the ‘download UI’ but it does not install (the howto describes it does.. )
Now I can only load 1 extension by loading it with path variables. In general it works quite well. I just would like to be able to build a working .crx for people to drag’n'drop once this extension thing is going to be defaulted.
Thanks!
errr,
any secret feauters ?
need to try this one… gotta get Google Chrome installed first
Although it’s a nice tool, I’d be very miffed if someone replaced any of my images with one of theirs. I’m sure there was some legal arguement over this a few years back – something to do with IP whereby I give you permission to look at and use my site but not to change any part of the sire without my permission.
I didn’t know that Chrome accept extensions !
Is it possible to create Open Search Modules ?
Thank you for the tutorial
Oh no seriously I also didn’t know that before reading this post. One is the reason I sticked to Firefox is because it came wtih too many add-on options which I can’t live without it, and personally I like Chrome as well, so a good alternative for me in future. Thanks for Sharing!
Hi Matt,
Checkout my first chrome extension http://www.htmlremix.com/projects/developer-style-switch-chrome-extension
You can load custom style file to any live website.( Hope this will help web developers)
Is chrome supports extensions like FireFox addons?
Someone already has ported “Adblock”! (Ok, it’s not the exact same thing, but really, it might as well be!) Adsweep.org AWESOME!!!!!!
Hi Matt,
thanks for posting this, it’s exactly what I have been looking for.
for interest this page came up number 1 out of a total of 125,000 results when searching for “how to write chrome plugin”
We’re all looking forward to some news on Chrome OS and how this will be impacting on the roll out of more advanced web applications.
It uh… actually doesn’t do that on mine.
I can’t find the install file for the Hello World thing in full. I could go through the WHOLE tutorial and make it myself apparently… but is there an installer? I want to muddle around with it, but I’m not really wanting to start from the ground up. I do better if I take something apart first.
Chrome is picking up with it’s extensions.
Checkout Tutorial on How to create Twitter client as Google Chrome Extension.
Pretty easy one.
Chrome extensions are a huge deal. It’s what made me switch from sluggish Firefox to Chrome for good. I blogged about it recently here:
http://b6s.net/general/google-chrome-add-ons.html
I wish there was some central “official” place where we can find new extensions. A trusted source, maybe with someone checking them for malware?
Long back I wrote a tutorial on How to write Chrome Extensions with example of Twitter Client: http://www.taranfx.com/blog/google-chrome-4-extensions-how-to-create-twitter-client-download-tutorial
Lets make Chrome extensions better than Firefox!
We noticed that there isnt many extensions for webmasters out there yet. So we started by making one called Analytics helper. All it does it show a green icon when Google Analytics-code found in source-code and show the Analytics ID.
We also wrote a blogpost about Analytics helper at Metronet.no. Any feedback or new ideas would be great.
https://chrome.google.com/extensions
it there any tutorial to port firefox addon to chrome ?
i made an open source chrome extension to update users about new posts on a blogger blog check it out here
Hi,
Yours is a good introduction to making extensions. I was wondering if it is currently possible to modify the right click menu by building an extension. I have made a few extensions so far and I am missing that ability. I need it for my extension which modifies iGoogle(find it here)
Anyone know a place where I could find freelance developers to order a plugin idea I have ?
Could one of you knowledgable tech folks please write an extension or plugin or whatever it needs to be to stop the tabs pulling away when you try to switch between them and your mouse moves ever so slightly? It’s so annoying! Maybe the amount your mouse has to move before tabs pull away could be increased?
Thousands of chrome users would love you!
Howdy all, just a thought here….
Not sure how to explain this idea but here goes:
A lot of FB games and now Bigpoint games have a “build up your city, etc.” type games with countdown timers, how bout showing the countdowns on the tab if i clik away from that tab? Dunno the first thing about writing the code for this so enjoy my idea if you think it’s viable
Mike
Hi Matt,
Thanks for the article. I am new in extension development. I already tried out your tutorial and I got a chrome extension. Now what I want to know is – Is there any article (step by step Tutorial) that would guide me how to convert the chrome extension to firefox extension? Thanks
Finally I decided to try writing some chrome extension and successfully created hello world. Next I am going to try displaying page rank icon. Finger Cross
It would be nice to look into existing extensions and learn from there.
I have tested Google Chrome for a couple of months now and are happy with it but I still miss some extensions and have to use firefox. Hopefully this will change in near future. For personal use :chrome, for business use : firefox .
well goggle chrome might have a nice looks.. but its the firefox that is favorite for php developers.. no issue on testing on firefox.. but some time arrangements for chrome.. but yeah chrome has a nice feuture… and this article rocx…. i give you that.. @angelinaa: bohahahaha
The problem I have with this and with Google’s so-called tutorials is that they start out with something useless and pointless and then immediately dive in deep.
I wrote a very simple extension that ANYBODY should be able to understand and follow. You can find that at http://hubpages.com/hub/A-simple-but-useful-first-Chrome-extension
But moving on from there is not so easy. For example, I’d think a reasonable next step in a good tutorial would be to simply open another webpage in new window or tab while passing the current url to that page: newpage.xxx/cgi-bin/whatever?currentpage.html
Someone interested in learning could build from that example, doing things like passing pages to html validators and so on. Does it exist? Not that I can find, so that’s probably my next step.
After that, a good tutorial would show how to modify the DOM. Of course that’s mostly js, but a simple sample should do something very simple. That’s the fault I find with most tutorials: instead of something easy, they jump off to some complex task that 70% of readers might not understand at all. Keep it simple – change ‘s to ‘, for example.
Building on these examples, you’d next show how to do the same things in different ways: through the context menu, then through browser actions.
Then, using the same examples, you’d show how to trigger them based on specific pages.
If you got people through that, MAYBE they’d then be ready for the Google tutorials without feeling that you’d taught them to swim by first splashing some water in a sink and then dumping them into the middle of the ocean!
As an SEO who is in business development – Chrome is now much better for pitches than Firefox. Not only it is faster, the extensions give me everything we need to demonstrate how to optimise a site – I’m a big fan.
@Matt:
This is the only place on the web that seems to document that resources can be accessed from your extension folder by a chrome-extension://identifier/file.ext
@Michael:
You saved my life. Thanks for finding that bug! I could not figure out why my extension’s js wasn’t injecting at the right time.
My only question that remains unsolved is Why does chrome.google.com redirect to http://www.google.com and not the chrome homepage?
Hi,
I have an extension written for Mozilla Firefox i have those javascript files in .js format i need to use them and create an extension for google chrome can you help me out?
This tutorial is outdated.