When Google released its Chrome web browser, a lot of people (including me) loved it, but were missing Firefox like extensions, But these days are over now and Google's browser supports extensions.

So I decided to write a simple extension to see if the delay for extensions public release was for a good reason.  Extensions have been present in Chrome for a while, but only in the Beta or Developer versions.

I wrote a simple extension that generates a short URL for any web page you are viewing at any tab using HubSpot's own URL shortener service, Hub.tm , you can install it on your browser by going to https://chrome.google.com/extensions/detail/jhbjofkkhbgdgpbfkppblkpgkbefafkg

 It took less than an hour to write the extension, a really short time.   The developer guide is very clear, and the framework is built nicely. 

 The framework is all JavaScript- and JSON-based, which makes things easy.  You are using JavaScript to do all your logic, and using JSON for configuration and message passing between your extension code blocks.

I loved how JSON is used as a configuration format, as we already do at HubSpot in some places.  In my opinion, the JSON configuration format is more readable than XML, assuming you are carefully naming keys in your JSON.

Other things I liked about the Chrome extension framework:

  1. Extension files are  as any web application: images, .css files, .html files, .js files.  Even the configuration file is .json , so there is no funky or new files formats.
  2. Permission logic, and how can you control which URLs your extension can work on, which JavaScript code to be loaded and when.
  3. Built-in JSON serializer.
  4. Attaching to browser specific event (like tab opened, closed , extension icon clicked..).
  5. Isolated world scripts execution environment,  which means your extension JavaScript code will never conflict with any code included in any page viewed in the browser.  This is also good for security.
  6. How its easy to include external JavsScript , CSS libraries with your ext code.  I use jQuery in my extension, and it's trivial.
  7. You can make cross-domain AJAX calls , thanks to HTML5 support in the browser).
  8. The HTML5 local storage

Nonetheless, it's not all trivial.  I also have a couple of tips on speeding up your extension development learning curve: 

  1. If your extension works for any URL, you are doing a "Browser" action.
  2. If your extension works for specific URLs, or pages that must have some sort of pattern (e.g page that have an RSS feed) , you are doing a "Page" action.
  3. If you want to show some output to the user , use a "Browser" action "Popup" which is a  box that can contain inside it an HTML page (any HTML you want, including CSS, JavaScript, etc.)
  4. If you want to organize your JavaScript code, you will be using "Content Scripts", but remember they have limits.  Most notably, they can't do any AJAX requests, but they can access DOM of viewed pages. 
  5. If you want to have long-running tasks, or save state information, use the "Background" page.  This page is always on and always running , even if the user did not interact with your extension.
  6. If you ever wanted to check how an extension was built, you will find all the files of that extension on your disk inside the Chrome folder ;)

Overall, when you are writing an extension you will feel like you are writing a simple static web application (bunch of CSS , bunch of HTML, bunch of JS code , images..etc) , and everything you will be doing is something you know you have done hundred times before (e.g manipulating the DOM of a page).

That's it.  Happy Chrome Extension-ing ;)

Recommended Articles

Join our subscribers

Sign up here and we'll keep you updated on the latest in product, UX, and engineering from HubSpot.

Subscribe to the newsletter