Sunday, June 30, 2013

Chrome Blowfish Encryption Extension

I thought it would be interesting to create a Chrome extension that allows the user to encrypt and decrypt text. The extension uses a javascript blowfish algorithm.

A few things about the extension. I don't know how secure the blowfish algorithm is. Next, I don't know whether extensions call home or not. That is, this extension uses all client side code. It would seem that there should not be any interchange between Chrome and a server somewhere, but I just don't know if it's the case.

The extension is simple to use. There is a textarea that holds the encrypted or decrypted text. This textarea is followed by a text field that holds the encryption key. This key is not saved anywhere. No cookies, no local storage, etc. The key field is followed by two buttons: one for encryption and one for decryption. It looks like the following:

To use, simply type or paste the desired unencrypted text in the field, enter a key, and then click "Encrypt". To decrypt, pasted the encrypted string into the field, enter the same key, and then push "Decrypt".

On to the building of this simple encryption extension. The extension consists of five files located in one folder:

  • background.js
  • blowfish.js
  • icon.png
  • index.html
  • manifest.json
The folder name is immaterial. I used ChromeExtEncrypt.

The manifest.json file contains the following:

The file index.html contains the following:

The background.js files consists of the following:

Finally, there is the file blowfish.js. There is no need to display the text for it. It is reviewable at its site or here.

The file icon.png is just an image of a key.

Once these files have been created, all that remains is to add the extension to Chrome. Just go to the extension management page, click "Load unpacked extension" and point to the directory.

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.