Documentation and Set-up of development environment

The first major difference I noticed was in the quality of the documentation. While Chrome’s documentation is not as comprehensive as Firefox’s, it is much more logical and easier to understand for a first time user. The second difference was in the setup of a developer environment. The setup for Chrome is very straightforward, you put a description (manifest) file in one directory and select that directory from within the browser. Then you add JavaScript and CSS files and click reload in the browser to update each time. Compare this with Firefox where you need to use another add-on or mess around in the install directory to setup, change some hidden options, then restart the browser every time you make changes to browser code.

Extension Structure

Firefox requires that you structure your add-on in a particular way. You need to have CSS files in one place, language files in another and there is another file that links them all together. Firefox also has one file that describes the add-on. Chrome’s approach is more flexible. You can arrange the files however you want and all the configuration is done in one setup file, the manifest file.
The Manifest File
Both Chrome and Firefox have a manifest file that describes the extension. In Firefox, how the add-on integrates with the browser is defined in other files. With Chrome you include these details in the manifest file and the whole process is much simpler.

Scope of extension system

With Firefox you can modify basically any part of the browser that you want to. This is great in that it allows for more complex add-ons like Firebug, FireFTP etc. to be built. On the other hand though, most extensions make use of only a small subset of this power.
Chrome’s system limits extensions to a certain number of predefined use cases. Three of the main ones are “Browser Actions” (adds a button to the top toolbar), “Page Actions” (similar to Greasemonkey), and “Themes” (same as Firefox’s themes).

Problems with porting

I ran into quite a few problems while porting.

1. Removing Firefox specific code- even fairly simple Firefox add-ons can have quite a bit of code specifc to Firefox for handling things like options etc. I needed to remove all of this code. Better structuring of the original add-on would have made this a lot simpler. Chrome makes use of HTML5′s local storage for storing options. Hopefully this will be easy to do in Firefox in the future too.
2. innerHTML and innerText.
   Trying to set innerHTML was causing an unexplained error. A google search turned up lots of Chromium comits along the lines of “Removing use of innerHTML from example extension”. Another blog recommended using innerText which solved the problem. Not sure what’s going on here.
3. Cross-site security restrictions
   Chrome’s system allows you to set exceptions for cross-site scripting but the security restrictions still apply to cross-site scripting between frames (the addon uses an iframe). The way to communicate between frames in Chrome is using a new feature of HTML5 called postMessage. I needed to reference the Firefox document for this one and it seems to work fairly well. My only problem was that the iframe has to first receive a message from the main page before it can communicate back but this can be worked around.
4. Animated PNG’s don’t animate
   Tried to use an animated PNG file as a background image for a button. Unfortunately, Chrome only supports animated GIFs. Small issue but annoying nonetheless.
5. Sandboxed Scripts
   The cross-site security restrictions also apply to the web page itself. This caused a serious problem as the Wolfram Alpha page attempted to access “parent” (the main page) and caused a JavaScript error. This error then caused the page to not finish loading. As Chrome sandboxes extensions from the website code, it’s not possible to modify the script to fix this. I haven’t solved this problem yet.

Other interesting differences

Chrome extensions are updated automatically in the background and you can restrict updates to certain versions. Firefox does the same but the update process is much more visible. The self-hosted updating system also looks a lot simpler than Firefox’s.

Conclusions

• Google has created a very nice extension system that is straight-forward to develop for. While not being as powerful as Firefox’s system it should cover a majority of the add-ons out there.

• The system seems a lot more secure than Firefox’s. By restricting what extensions can do it should limit the effect of many extensions causing the browser to slow down, which is an oft-cited problem with Firefox.

• Having a simpler environment should make it easier to attract more developers as well. Nearly anything you can do in Chrome can also be done in Firefox so I don’t think we’ll see a huge amount of innovation in the browser experience but we will see a lot more site-specific, Greasemonkey-like extensions.

• Mozilla’s Jetpack seems to be trying to create an extension environment similar to Chrome’s. Mozilla will likely include this in the browser once it stabilizes some more.

• One nice thing to look out for is that Chrome extensions can easily support scripts for multiple sites in the one add-on. This should lead to some good “packs” of Greasemonkey-like scripts that change the browser experience across related sites.

As the extension is not working correctly (see Number 5 in Problems with Porting) I haven’t uploaded it to the Extensions Gallery. You can download it from Google Code (the source code is there as well) for the time being.
If anybody could help fix this problem it would be greatly appreciated.

The title now shows the page name, the Firefox version and the URL of the page

Why would this be useful?

1. If you use multiple Firefox profiles it lets you put a name for each profile in the title so you can distinguish which one is which. I have four profiles that I use: a main one, one for testing new add-ons, and two for developing add-ons in. So it’s easy to get them mixed up.
2. Another use is for web developers and Firefox developers who need to test their pages/applications in multiple versions of Firefox. You can include the Firefox version number right in the title so you know exactly what version you’re looking at.
3. Another use which seems to be quite popular is for displaying the current URL in the title. This can be useful for people who hide the navigation bar or want to be able to see the URL in the OS taskbar when the window is not open.

The latest version added support for using Unicode characters in the title so hope you find that useful.
Please let me know what you think of it either in the comments or by email on the contact page.

Wolfram Alpha Google - 100,000 Downloads

The success of the add-on has mostly followed the interest in Wolfram Alpha itself with the biggest spike when Wolfram Alpha just launched. Every so often though the add-on gets picked up by some blogs and gets a pickup in downloads.
So what happens from here? What I’m planning at the moment is a more general “{any search engine} Google” set of add-ons. There would be one add-on for each engine but when multiple add-ons are installed they would be compatible with each other. If you’ve used Googlepedia and Wolfam Alpha Google together you’ll understand what I mean.

Basically adding another add-on would add another tab button on the top right of the Google results which lets you switch between the results of any of the engine add-ons that you’ve installed.
I plan to take this one step further and make the rules for how to load and display the results totally generic so that anyone else could write their own add-on that would be compatible with all the others.
My first target for this would most likely be Bing but if you have other ideas for what would work well with Google then please let me know.
I’ve also updated the Wolfam Alpha Google page on this site to be a bit less crappy. Hopefully I’ll find time to fix other parts of this site as well.

1) Firstly, get a list of the URLs that you want to check.
If you are checking links from an adwords campaign, open up Google Adwords Editor, go to the keyword or creative tab and copy all the keywords/creatives and their URLs. If you want to check the links on a website, go to the page with the links you want to check and then choose “Get Links” from the toolbar (it’s in the URL Tools drop-down).

Then click the “Copy all Links” button.

2) Now we’ve got our list, open up the Link Checker.
It’s called “Link Checker” and it’s in the URL Tools menu.

Then paste the links from step 1 into the top box.
It’s OK if there is other text as well because the Link Checker will just ignore the extra text.
If you are copying the links from Adwords Editor then check the “Is there a header row?” box to ignore the first line.

3) Run the Link Checker.
Click the “Check URLs” button. Below the button you can see the progress. In the bottom box are the results of the test.
If you copy all the results and paste them into a spreadsheet you can see which links are dead or broken and which are working OK.

4) Replace the broken links in your site/ad campaign.

Bonus:
The results also include the “Final URL“. For most links this will be the same as the original link but if you are using click tracking or other URL redirects, this column will show you the actual page that users land on.

Happy link fixing!

Things like checking a campaign for broken links, getting a list of keywords and URLs from a page, sorting keywords into groups and checking Google results pages are tasks that I’ve had to do many times in my SEM career and every time I thought there must be a better way.

Gradually the add-on has grown from a tool to solve one problem (show what tracking tools competitors are using) to solve many, many problems. And all of this is for free. There are still many more problems that I want to solve though. For the last few months I’ve been busy working full-time on solving some of these problems. The problem is that to keep on developing this add-on I need a way to support myself. Since SEM Tools is free I don’t make any money from it. I decided that the best way to keep on offering great tools for free as well as earning enough to support myself is to make SEM Tools into a free-mium product.
Free-mium means that you give away a product for free and then charge for bonus features. It means that the maximum number of people get to benefit from your product but you can also earn some money as well. Other well-known companies with a similar system are Skype and Flickr.

What will this mean for SEM Tools? Firstly, it will still be available for free and you will still get all updates for free. Everything in the current version will continue to be free and I will continue adding new features to the free version. Secondly, there will be one new menu called SEM Tools Pro. This menu will have an option to upgrade to the Pro version as well as features that are available only in the Pro version. Right now, the Pro version has a Creative Writer tool and I’ll be adding more features shortly. You can read about the Creative Writer on this post: How to write effective Adwords creatives. When I add a feature that is more advanced or that takes me a lot of time to make I will most likely add it to the Pro version.

If you want to try out any of the Pro tools you can get a 1 month trial for free. There’s no need to enter any details, you just click the “Try SEM Tools Pro for Free” and it will activate it for one month. After that you will need to subscribe in order to keep on using those features. The price is USD$24.95/year per person and you can use it on as many computers as you want as long as it’s just being used by you. This will include all updates to both the Free and the Pro version. If you want to learn more about what’s included in the Pro version have a look at this page.

So how does the creative writing tool help you to cover those four characteristics?

1) Relate to the keyword
First of all you need to know what keywords are in the adgroup. So whenever you select a creative it will show you a list of keywords in that adgroup in the keyword tab at the bottom of the screen.
Secondly you want to use dynamic keyword insertion wherever possible. But dynamic keyword insertion is a waste of time if all your keywords won’t fit in the character length limit. So whenever you select or edit a creative that uses dynamic keyword insertion it not only tells you the length of the default creative but also what percentage of keywords in that adgroup will fit in the character limit. If you only cover a small percentage of keywords I recommend that you either modify the creative to make it shorter or create a second shorter creative.

2) Have a strong call to action
I haven’t worked out how best to help with this one. If you have any ideas I would love to hear them. What I’m thinking of for the future is to have a tab with lists of standard calls to action for different categories to give you some ideas to start with.

3) Relate to the landing page
The first thing to do here is to actually look at the landing page and get a clear idea what it’s all about and what language it uses. So whenever you select a creative the tool will show you the landing page for that creative in a tab at the bottom. Simple but quite effective and saves you copying and pasting it into your browser.

4) Stand out from competing creatives
This is one thing that I think most people don’t do as often as they should. It doesn’t matter how good your creative is, if the competitors creative next to yours is better then it won’t perform well. As an example, say you are advertising credit cards and you include the interest rate in your creative. If the competitor has a significantly better interest rate then your creative likely won’t work very well. In this case you’d be better of emphasizing another feature of the credit card like the interest free period.
To check what your competitors’ creatives look like, just select a creative in the Creative Writer and the Google search results (SERP) for a keyword in that adgroup will automatically appear in the Google tab at the bottom. You can also change the language and country to the appropriate setting and it will remember it the next time as well.

Having all the information you need right at your fingertips can really help in writing better creatives. The one important thing the Creative Writer can’t do is be “creative”. That part is up to you.

If you are interested in being a better Adwords creative writer and you don’t already have SEM Tools you can download it for free from here.
To start using the Creative Writer, go to the “SEM Tools Pro” menu in the toolbar and click “Try SEM Tools Pro for Free”. This will let you use the Creative Writer for free for one month. Then you can open Creative Writer from the same menu.

If you have any questions or suggestions please leave them in the comments or send me an email from the Feedback page.

After digging into the problem I found that Wolfram Alpha had added some code commonly referred to as a “frame buster” to their site. This totally broke the add-on so I quickly put together a new version that disabled the add-on and released it on the Firefox Add-on site. On Saturday night Wolfram Alpha had removed the new code and the extension worked as normal again.

Over the last few days I’ve been trying to come up with a proper fix for this and it turns out it’s a lot more difficult than it seems. Basically what I’m trying to achieve is to add a document from one site to another site (in an iframe) and not let the first document have access  to the page that it is added to.

Some of the things that I tried were:

• An Ajax request and find and replace the code before loading it –> This works and I’ve used it in my other Add-on (SEM Tools) to load Baidu which has the same problem. But it is very easy for the website owner to break this so it’s not a great solution.
• Using defineGetters (__defineGetter__) –> This DOM method allows you to change the native code that is called when another function accesses the properties of an object. This seems like  the ideal solution but I couldn’t get this to work consistently on the window object’s properties. It would work in  some situation (e.g. with a local file) but then it would be overridden when the window object changed or it wouldn’t work as part of an add-on. I think there must be a way to make this work but I couldn’t figure it out.
• Replacing the properties on the iframe –> Similar to above but these are mostly read-only so this doesn’t work.
• Iframe within an iframe –> The inner page can still access the top-most page so again no good.
• Iframe within an XUL iframe –> The XUL iframe should act as a barrier to stop the internal iframe accessing the outer page but you can’t insert and XUL iframe into a HTML document because of security restrictions.
• Configurable Security Policies (CAPS) –> These are supposed to give you fine-grained control over what access different websites have, including controlling changing the location on an outer iframe. I couldn’t get this to work though. I’m not sure if this is still part of Firefox anymore.
• Using object tag instead of iframe –>Objects work  the same as iframes in this situation so no good either.
• Loading both the Google page and the Wolfram Alpha page in a new XUL browser –> This would work but then the URL bar and the page title would show the wrong name etc.
• Loading the iframe outside of the page. –>This works!
• Copying the above iframe into the main document –> This worked to get the content into the main document but it lost all the styling and I couldn’t interact with the page because there was no reference to the document that it belonged to.
• Loading outside the page and then loading again inside the page –> This works! After all that this was the best solution I could come up with. Basically it won’t load the page if it detects that their is a frame buster being used. You can see the code I used here. However this doesn’t really solve the problem of the access between the documents and it can be worked around too. For example by adding a settimeout to the check for frames code.

One solution to all of this would be to use Wolfram Alpha’s API which I have been thinking about doing. However with the current framework I have, it should be fairly simple to extend it so that it would work with any other website. Using a site-specific API means it will only ever be useful for that one site.

I guess more importantly, why is it so difficult to do something like this? Is including one document in another document without letting them communicate with each other inherently wrong? I don’t think so and in many ways  it is a lot more secure than the current implementation of iframes. I think that mash-ups like this are quite a different use case than just wrapping an entire site in an iframe and loading it on a different domain.

If someone has come up with a better solution than this I would love to hear about it. There are a few use cases I have for this that I would love to have a simple function like loadSafelyInIframe(iframe, targetUrl) for.

So as a result of all this, I added this code to the add-on but disabled it by default as it basically doubles the load time. The Wolfram Alpha page is already very slow compared to Google so I felt that this would make it unusable. If you want to be safe or you notice this problem again you can just check the option in the Options screen. The new version is 0.8 and you can get it here once it’s been reviewed by Firefox.

I also wanted to announce that SEM Tools, the main add-on I’ve been working on will soon have a Version 2.0 out. It’s evolved quite a lot since the earlier versions and this release will be submitted to Firefox for review to be included in their public directory of add-ons. This will mean that anybody using an old version of the add-on (which is most people) will be automatically upgraded to the latest version. Up until now, to get the latest version you had to manually reinstall it which I’m sure very few people did so this will be a big improvement.

If you are already using SEM Tools I would love to hear what you think of it. Leave your comments below or send me an email via this form.