Google Gadgets (Gotchas)

I’ve been working on widgetizing my puzzles as Google Gadgets.  The biggest change has involved converting from a page-reload mechanism for navigating between puzzles to something more AJAX-y.  This conversion has gone well, but along the way I’ve found a number of non-obvious characteristics of Gadgets that I’d like to talk about here.

Style Tags

Google encourages the use of the “html” content type for their Gadgets, and their documentation describes a simple procedure that converts existing web pages into Gadget XML. This procedure largely consists of stripping the HTML, HEAD, and BODY tags from the existing markup, and wrapping some boilerplate XML around what remains.

Significantly, STYLE tags need not be removed. STYLE tags are, according to the W3C, legal only in a document’s HEAD, but you can nonetheless include them in Gadget Content blocks. Apparently, the various Gadget containers will place any STYLE tags they find into dynamically-generated HEAD sections created when rendering the gadgets.

Be warned that Google seems to insert their own style sheets into these HEAD sections as well, so if you haven’t specified every jot and tittle of your CSS, and are depending upon browser defaults, you may be surprised by the appearance of your Gadget.

External JS

External JavaScript (e.g. a SCRIPT tag with a “src” attribute) seems to work somewhat erratically inside Gadgets. In particular, SCRIPT tags with relative “src” attributes (i.e. relative to the Gadget XML document’s URL) seem to be loaded only some of the time. Also, external JavaScript files can sometimes be cached even if a Gadget as a whole is loaded into the Developer Sandbox, and marked as uncached in the Developer Gadget.

The best workarounds I’ve found are to always use absolute URLs for external JavaScript, and to change filenames (e.g. from play1.js to play2.js to play3.js …) if I think that an edit isn’t being picked up due to caching.

OnLoad

Since window.onload isn’t available to Gadgets, Google provides the gadgets.util.registerOnLoadHandler() function. Unfortunately, this function appears unreliable when called from external JavaScript files. As a workaround, I always invoke it from an inline SCRIPT tag in the XML.

Future Work

I hope to finish my widget conversion tomorrow, when we’ll also see the first results (if any) of the increased ad budget. Here’s what I’m working on:

• More widget work
• Try to better position the aStore on the puzzle page
• Post some messages on puzzle forums

Yesterday’s Stats

Follow Along

You can subscribe to my RSS feed, if you’d like to follow along with this month’s project, in which I attempt to create and popularize a puzzle site.