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.

Our Project Recently, JavaScript educator Kyle Simpson mused on LinkedIn that he found himself sending the same messages repeatedly on the site. He said he would have liked to have the ability to select pre-typed or “canned” responses for LinkedIn. Our extension will therefore create canned responses for linkedin.com. Let’s write out a few user stories to guide our development. User Stories AS A LinkedIn user I WANT to be able to reply with canned responses SO THAT I can more effectively manage my inbox AS A $TOOL user I WANT to be able to add new responses SO THAT I can more effectively manage my inbox AS A $TOOL user I WANT to activate my response by using a drop down from a context menu AS A $TOOL user I want the drop down to have a list of “headings” which correspond to long-form text responses e.

Meta-Post This post is really a meta-post. Here I’m going to document how I went about educating myself on a Google API. If you’re a seasoned hand at picking up API docs and making a product out of it, you might want to skip this post and move to the next part. Getting Underway Our starting point for documentation is the Chrome Extensions page. It serves as a table of contents for us and prompts us to first visit their tutorial page. The first introduced type of user interface to an extension described is the browser action which: “…[allows] us to place a clickable icon right next to Chrome’s Omnibox for easy access.

Introduction In this post we actually implement our canned response extension. This post is vertically long (mostly because of code samples and screen shots). Type along and take it slow. Extension development rewards patience and discipline. If you can’t be disciplined be patient. If you can’t be patient be disciplined. Whatever it is, don’t get overwhelmed by the length of this post. For beginner developers, I hope also to show you my software development process for unfamiliar code APIs. First Goal: Unprivileged Page Doing Something, Anything Let’s create a new developer extension. I’m not going to cover the directory setup because it’s covered very well in the Extension tutorial.

Interlude In the previous section we set up our communications conduit, and wrestled with the basics of the Chrome Extension API. We’re now going to do a pass where we change the “debuggy” messages from being noise into being canned responses. Let’s create a new branch called: boilerplate-pass-through. Our goal is to get our canned responses passed through from background to content scripts. Build Context Menu UI Per our user stories, we want to add a contextMenu element. Let’s add something trivial to verify it works. You should now see the pattern that many APIs require an additional permission. To use the contextMenus API you must add the contextMenus permission.

We’re ready to make this real! Get Ready to Ship! Well the things that need to change are few indeed! We’ll stop using stevengharms.com We’ll change the selected input fields We’ll tighten up the code’s footprint ADVANCED We’ll optimize a critical UX bug cased by LinkedIn’s JavaScript-heavy render From stevengharms.com to linkedin.com My simple site has served me well enough. Time for the big leagues. I’ll present this only as a diff. diff --git a/background.js b/background.js index 0762faf..d68eed9 100644 --- a/background.js +++ b/background.js @@ -17,7 +17,7 @@ chrome.webNavigation.onCompleted.addListener(function(details) { id: MENU_PREFIX + details.tabId, title: "Canned Response", contexts: ["editable"], - documentUrlPatterns: [ "*://stevengharms.