Tag: firefox

Flex Collection search – live

Flex Collection search – live

When I was setting up my blog, one of the first things I found out about was creating custom searches using Google. So I promptly set up a custom search that had a list of my favourite and most frequently visited flex sites and at the same time if those sites didn’t have the info I required any search that was directed to the ‘web’ rather than the ‘flex collection’ would be weighted to sites that had AS3, Flex, or Adobe related info.
After a little bit more research I managed to create an OpenSearch plugin from the custom Google search, and after that turned it into a firefox plugin.  See the ‘how to’ here on creating your own custom search and firefox plugin.


Well the folk at Mozilla (or whoever tests the plugins) have just changed its status to LIVE 🙂 yeh.
check it out here http://addons.mozilla.org/addon/11823
You can also check out the original post with a list of all the included sites here.

[ad name=”ad-1″]

A – Z, custom search to firefox plugin

A – Z, custom search to firefox plugin

So you may have read my previous posts on the custom search that I created, well as suggested in a previous comment the information to create one then turn it into a open search search plugin and then into a firefox plugin is out there.  It’s just not all in the same place.

So I’m going to go through the process and try to make clear each step of the way. Here is what I’m going to cover.

  1. Create the custom search (hosted by Google)
  2. Take new custom search and insert into wordpress
  3. Create a OpenSearch plugin from code that’s compatible with the majority of browsers
  4. Turn OpenSearch plugin into a firefox plugin so that you can list it under firefoxes search plugins
  5. Make the browser automatically pick up the openSearch plugin to show user you have plugin available

So first you need to create the search.

1, Create Google custom search.

For this (AFAIK) you need a Google account and you then need to get a adSense account set up.  This is how I found the custom search as it is part of the options on the general screen.  I kind of expect that this option to create a custom search will be available elsewhere on the Google site but this is where I found it.

Once you go through the wizard that Google gives you, you get a choice.  I’ve gone with opening the result inside Google.  If you choose the last option then the end result will mean that you will get two bits of code to insert into your wordpress site. If this is the case then I’d have a look at a wordpress plugin to deal with the code. There are a few out there, but they may or may not work depending on your theme that you have.


I choose the hosted on Google option because – 1, should it (the search) be popular then it will not increase my bandwidth usage and 2, it makes it more offical if its hosted on a  google URL (just my opinion).

You should now have some code from Google, something along the following lines


2, Insert code into wordpress

Now that you have your code you will need to find the searchform.php file from your theme. Should be inside wp-content->themes->{your theme} -> searchform.php

Open up that file and insert the new code.

I didn’t do anything to the Google code, just pasted it above the standard wordpress code so I now have 2 searchs on my site, one for the ‘Flex collection’ and one for my site.

Thats it, part 2 done.

3, Create OpenSearch plugin

First you need to get a URL that you can use for your search. So either do a search after installing your search in your wordpress blog or look at the code and put it all together to create one.

For example if you do a search on my site for ‘pie charts’, this is the URL that you end up with http://www.google.com/cse?cx=partner-pub-7396620608505330%3Axjbbr6-w0cu&ie=ISO-8859-1&q=pie+charts&sa=Search+-+Flex+Collection  

If you look at the above code from point 2 you’ll be able to see how its made up.

Now that you have a URL go to http://mycroft.mozdev.org/ and select to create a plugin.

Fill in all the boxes (they’re all pretty much self explanatory), but as an example the two main inputs that have to be correct are the ‘Search URL’ and the ‘Search Form URL’

Using the above URL, my ‘Search URL’ would be http://www.google.com/cse?cx=partner-pub-7396620608505330%3Axjbbr6-w0cu&ie=ISO-8859-1&q={searchTerms}&sa=Search+-+Flex+Collection 

and the ‘Search Form URL’ would be http://www.google.com/cse?cx=partner-pub-7396620608505330%3Axjbbr6-w0cu&ie=ISO-8859-1

Click ‘Generate Code’ then ‘Install Plugin’. Test the plugin and if all is good (copy the generated code), then submit plugin.

Take note of the URL that you can use to get at the plugin from mycroft.mozdev.org, you will need this for part 5.

4, Create firefox plugin

Take your code that you just copied from part 3 and save it to a XML file.

Open https://addons.mozilla.org/en-US/firefox

Login/register -> developers tools -> submit add-on.

Pick a licence, then it will ask you to upload a file. Upload the XML file that you just saved. Then its just a case of editing the appropriate sections and you are now done.

Do a quick search for your plugin and you can now get a URL such as https://addons.mozilla.org/en-US/firefox/addon/11823 and send this round friends etc to get some reviews. Once you have a few reviews you can submit your plugin to be made public.

Feel free to review my plugin, I need some reviews so that I can submit it.


5, Make the browser pick up the openSearch plugin when your site is viewed

The above image shows what happens if a browser picks up that the site it is displaying has a custom search tool that can be installed. It highlights a small button beside the search box.
To do this I’ve placed the following code into the header file

Use the above but replace the href with whatever URL you saved from part 3 (the mycroft.mozdev link) and obviously replace the title with something relevant to your search.
Then place that line of code into the header.php for your theme (or somewhere that will always get served up on your site, I just choose the header as that seemed appropriate). Put it beside the other links if your header file has them otherwise just make sure it’s in the head tag.

That’s it.
Hope this is helpful.

[ad name=”ad-1″]