Saturday, June 8, 2013

Creating a Chrome Extension that Inserts Text Based on Context Menu Click

I wanted to create a simple extension for Google Chrome. The extension would create as context menu listing the date from yesterday, today, and tommorrow. Clicking on a date would insert the date into the text field at the cursor position.



While working on this project, I discovered that it is not a trivial process to create such an extension. There are restrictions on what parts of an extension can modify page code, specific syntax that must be used to communicate between parts of the extension, and a lack of examples that are easy to follow (at least for me).

After framming around for a while, I finally managed to build the extension. There are probably better ways to build this extension. The gurus out there can surely point out the problems and better methods to accomplish the goal. What's here worked for me so far and has been a good learning experience.

If interesting in replicating the process, create a folder and name it what you want. In the folder, create three files. The names are: manifest.json, background.js, and content.js. I used the name background and content as a convenience. They could actually be named anything.

The manifest.json file contains the code seen below. The manifest file contains information that Chrome needs to build the extension. This information may be about permissions, extension pages, script files, and such. This is a simple manifest file. They can be much more complex. Read more about manifest files here.

manifest.json


The file background.js file will contain the code to create the context menu. There are restrictions on what a background page can do. From my understanding, background files can contain long running processes such as a context menu, but background files cannot interact directly with form elements. So, the context menu can be built here, but inserting text into a field cannot. Read more about background files here.

background.js


Aside from the context menu, the file background.js also uses some date manipulation functionality provided by a script called dateformat123.js. The original script can be reviewed here.

dateformat123.js

The file cotent.js file will contain the code to insert the date into editable fields on a web page. From my limited understanding, content files can interact with form elements. This means that if something happens in a background page, like a context menu click that is supposed to insert text, the actual insert happens here. That means there has to be communication between the background page and the context page. Read more about content files here.

The communication exchange was the most difficult part of the process to set up. In the end, the actual amount of code was minor. The following code in background.js

chrome.tabs.sendMessage(tab.id, dTomorrow.format("mm/dd/yyyy"));
sends the date to content.js. The code

chrome.extension.onMessage.addListener
(
 function(request, sender, sendResponse)
 {
  var objField = document.getElementById(sID);
  
  insertAtCursor(objField, request);
 }
);


in content.js listens for the the call and inserts the value into the field picked up by the addEvenListener process.

content.js


After filling in the code to the correct files, add the extension to chrome via the "Load Unpacked Extension" button on the Chrome Extension Management page. The extension should work on any page after the page is refreshed.

2 comments:

  1. how to execute this extension ?

    ReplyDelete
  2. I tried this code but it is not inserting the dates.
    can u please help me in this?

    ReplyDelete