Guide to Developing Chrome Context-Menu Applications

Introduction

I recently shipped the amaJSON Chrome extension and I believe I've come up with an improved process for understanding how to build similar applications.

This tutorial will help you create a practical "context-menu" Event Page extension.

With Extensions, Google has delivered (yet) another astounding technical platform with superior reference documentation. Nevertheless this documentation leaves delivery practices beyond a trivial proof of concept hard to determine or worse leaves the guidance to — "look at these examples." This guide fills in any gaps and attempts to move step-by-step.

For beginners to programming there's also a meta-lesson in this post: how to approach programming to someone else's API. I'll describe my research methods and approach throughout the technical tutorial.

Background

JavaScript The reader is assumed to have proficiency with JavaScript and to have facility with core features / issues associated with the language particularly closures, callbacks, enclosed variables, and functions as first-class data. This tutorial will provide you opportunities to "put it on pause" and go learn about these concepts as well. So for those learning them, it provides practical applications.

Reading diff Output; git familiarity

Throughout this tutorial I'll post code as diffs or make passing reference to core git ideas ("branching" or "commits"). The ability to read a diff is quite important so you can see what was removed and added. Knowledge of git, while not strictly necessary to benefitting from this post will help contextualize the "steps" and, hopefully, cast light on good developer practice (or, at the very least, my practice!).

Code created in this tutorial can be found in the GitHub repository.

Please report bugs / issues / "didn't work for me" there.

Posts

1. Requirements and Project Definition
2. Parsing the Google Documentation
3. Basic Page Action & Content Script
4. Context Menu UI & Passing Canned Responses
5. Canned Responses in LinkedIn

Comments

[Nigel Stratton]

Hi,

This is a great article with lots of wonderful detail and ideas but the github repo is gone. How would I get a copy of the code?

Thanks

[Steven G. Harms]

Thanks, Nigel. I inadvertently nuked this repo when I was cleaning up my repo footprint. Thankfully I had a backup copy on my laptop :). I hope it helps!

[Nigel Stratton]

Awesome. Thanks so much. On the slim chance you know, I have an extension which is a custom dev tools panel - which appears after Elements, Console, Sources, and so on. In my panel, I can press Ctrl+F and start a search with Chrome's built-in Search bar, but I can't work out a way to tell Chrome how many search hits there were. Therefore the Next and Prev buttons don't activate. You don't happen to know how to do that do you?

[Steven G. Harms]

Interesting setup! No, I can't say that I've done anything with that! But good luck!