PR QR Barcode Extension for Google Chrome #2

After playing around with JavaScript and the API’s Chrome provides it became clear to me that I have to rethink the extension’s UI. Initially I wanted an extension icon in the browser tab, giving the user the ability to change QR code’s properties, to save the QR code image to local disk etc (see screenshot in post #1). An additional extension icon in the address field should have been used for creating a QR code of the tab’s URL. Due to two limitations this was not possible. The reasons in detail:

  • An extension can’t have a Browser Action (icon in the browser tab) and a Page Action (icon in the address field) at the same time. A developer has to choose which type of action fits the requirements of his extension more.
  • There is no Chrome API yet which gives an extension the ability to call a “Save as”-dialog window nor to write data to a folder outside of the extension’s home.

I decided to use a Browser Action because according to Google’s documentation on Chrome extensions a Page Action should be used if the extension is intended to interact only with selected websites. The QR Barcode Extension should be available for all websites, so this decision was clear. I also reworked the Browser Action popup and moved the QR settings to a separated options page.

To work around the second problem I decided to create a site which displays the created QR code with additional information in a new tab. To save the QR code the user has to right-click the QR code image and select the “Save image as”-menu entry.

The two screenshots below illustrate the changes I have done. First one shows the tab containing a created QR code, second shows the new options page for the QR code settings.

At time of release of my next post it should be possible to create QR codes of webpage URLs and content using this extension.

,
  • Delicious
  • Facebook
  • Digg
  • Reddit
  • StumbleUpon
  • Twitter

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>