Es Developed - Fresh Website and Graphic Design » Firefox

Make Your Own Firefox and IE Search Bar Plugin

Shawn — Mon, 27 Apr 2009 11:05:36 +0000

If you haven’t noticed, I recently added an Es Developed search plugin to the site.

Now you can search all the web and graphic design posts on the Es Developed Blog right from your search bar in Firefox and Internet Explorer 7+.

We’re going to learn how to create your own custom OpenSearch search engine plugin for your site.

The search plugin will work in both Firefox 2+ (including Firefox 3) and Internet Explorer 7+ (including IE8).

OpenSearch and Your Site or Blog

OpenSearch is a collection of simple formats for the sharing of search results, created by A9.com.

In the context of your browser’s search bar you can use OpenSearch to help visitors find information on your site or blog even when they’re not currently at your website.

An OpenSearch plugin will work in both Firefox and Internet Explorer 7+.

Online Search Plugin Generator

One of the simplest and fastest ways to create your own search plugin is to use MozDev.org’s Mycroft Project Search Plugin Generation Tool.

The tool is a relatively short form you fill out and it does all the heavy lifting for you.

You supply:

Icon for use in the search bar of the browser (can be your site’s favicon)
Your details (used to register the plugin to you in the Mycroft database)
Plugin name and description
Search URL
Category (where to place your generated plugin on the Mycroft database), plugin language, etc

It’s a good idea to tick the ‘Show full instructions?‘ box at the top of the form. This explains the type information to place into each field. Most of what you need is explained.

If you need more information about what to put in each field, take a look at Creating OpenSearch Plugins in Firefox.

The code for the search plugin is generated. You can either copy and paste the code into a blank XML file on your computer (recommended), or you can just install it in Firefox and test it first.

Once you’re sure it works, you can submit it to the Mozilla/Mycroft search plugin database using the same form.

Linking the Search Plugin

Now that you have the search plugin generated, you will want to provide a link to it in your website.

The easiest way is to copy the generated code from the Mycroft Search Plugin Generator and paste it into an XML file on your harddrive. Then upload the file to your site and link to it in your :

This line of code allows your custom search plugin to be autodiscovered by browsers that support OpenSearch. Be sure to change ’searchTitle’ and ‘pluginURL/fileName.xml’ to the actual values you want for your plugin.

Automatic Updates in Firefox 3.1+

Beginning with Firefox 3.1, OpenSearch plugins can be automatically updated. To support this, you need to add another line to the section of your site as well:

Notice also the ‘rel=”self”‘. Be sure to change ‘pluginURL/fileName.xml’ to the actual URL of your plugin.

More info about automatic search plugin updates can be found here:

Mozilla Developer Center (Creating OpenSearch Plugins For Firefox)

Works in Firefox and IE

Even though you’re going through all the steps here using Mozilla’s site, the resulting search bar plugin is in OpenSearch format, so Internet Explorer 7 and 8 can use it as well.

See the Plugin in Action

If you’re using Firefox or IE 7+, you can see the search plugin that I made for this site in action.

Click on the dropdown on your browser’s search bar and select Add “Es Developed Blog”.

Add the Es Developed Blog Search plugin and give it a try.

You can search through our collection of web and graphic design:

Tutorials
Articles
Online tool and services recommendations, and
Design inspiration and resources

View Processed Javascript in Firefox and Chrome – No Plugins Required

Shawn — Mon, 13 Apr 2009 11:00:25 +0000

Here are 2 quick tips for Firefox and Google Chrome users that let you view the processed source code generated by a javascript snippet. Neither tip requires any plugins.

Situation

You need to insert a link to a video, form, etc into your site using embed code provided by another website and the embed code is only javascript.

Problem

While many sites and online services are getting better at providing standards-compliant code to paste into your site, sometimes you have to make adjustments to their code so that your pages validate.

This is easy to fix if it’s plain, viewable source code. However, if the code is just javascript that writes the (X)HTML code to the page when run (or the javascript is encrypting the code), you can’t see what to fix.

If you add the javascript code to your page, open the page in your browser and View Source, you still only see the javascript as it appears before it’s processed. That doesn’t help at all.

Firefox Solution

The fastest way to view the code created by the javascript is to use Firefox’s View Selection Source instead:

Paste the provided javascript into an XHTML page
Open the page in Firefox
Select the portion of the webpage in the general area that contains the javascript with your mouse
Right-click and choose View Selection Source

You should now see the source code that the javascript code rendered.

Then, you can copy and paste the actual code from View Selection Source and make your changes.

Google Chrome Solution

I haven’t forgotten about Google Chrome Users. The above solution doesn’t work for Chrome because it doesn’t have a View Selection Source option. We have to go about it another way.

Depending on what the javascript is designed to do and how it goes about that, you may be able to simply save the page as a file on your drive and open it in your editor.

In my test, the original javascript appeared, but below it was the code the javascript generated. You’ll probably have to do more digging around in your code, but if you copied your javascript into an otherwise blank webpage, it won’t a big deal.

No Plugins Required

The beauty of the above tips is that you don’t have to have any plugins or extensions installed in your browser to make them work.

Other Browsers

Safari and Internet Explorer don’t seem to be able to view processed javascript code without the use of plugins. At least not that I know about.

Firefox Keyboard Shortcuts You Can’t Live Without

Shawn — Mon, 08 Dec 2008 12:00:02 +0000

Typewriter photo by sooperkuh

Keyboard shortcuts are vital for navigating and performing various actions quickly, and are very helpful for designers when working on projects. Firefox has a keyboard shortcut for just about everything.

Unfortunately, finding and remembering them all can be difficult. Also, shortcuts differ slightly between Windows, Macs and Linux versions of Firefox.

Firefox Keyboard and Mouse Shortcuts

Fortunately, AccessFirefox.org—a site dedicated to showcasing accessibility tools and features in Mozilla Firefox—has a great list of Firefox keyboard and mouse shortcuts. You can filter shortcuts by operating system (Windows, Mac, Linux) or view them all at once.

Accesskeys Keyboard Shortcuts

Some websites use accesskeys to allow people with disabilities to access site navigation links by keyboard. This is a requirement for most sites in the UK.

View our list of keyboard shortcuts for activating accesskeys in all major browsers and OS’s. This list contains the keyboard shortcuts to activate accesskeys in Firefox, IE, Safari, Opera, Google Chrome, Konquerer and Epiphany in Windows, Mac OS X and Linux (Ubuntu).

On the previous version of this site, I used accesskeys for the main site navigation. However, because of no clear standards and the chance of interference with browser shortcuts, I decided not to include them in the current version.

Leave us a comment and tell us what Firefox keyboard shortcuts you use the most.

Easier Editing in ExpressionEngine and WordPress

Shawn — Sun, 12 Oct 2008 06:33:39 +0000

My only gripe when I started editing template code in ExpressionEngine was doing my editing in a textarea within the browser.

Using It’s All Text in Firefox 3 on Ubuntu

How do you keep your code properly indented when you’re coding in a textarea?

Spaces are no good, Tab just jumps you out of the textarea. Even good old copy and paste doesn’t work—even from Notepad without having to copy and paste the entire textarea back and forth.

When writing posts in WordPress, you’re not really dealing with a ton of actual raw code that needs formatting. But what about when using the theme editor or editing code in ExpressionEngine?

How can you keep your code from being all jumbled and akimbo when editing in a textarea?

Plugins To the Rescue!

2 browser plugins—Saft for Mac/Safari users and It’s All Text for Windows and Linux Firefox users.

Both plugins do the same thing: Edit the text in any textarea in an external editor of your choice and then save the text back to the textarea.

It even gives you a nice AJAX-like update glow in your textarea to let you know it made the update.

Macs

Saft is a useful developer plugin for Safari. One of its many features is that it can link your textareas to an external editor like TextMate or Coda.

Windows and Linux

For Windows and Linux, there’s It’s All Text, a plugin/add-on for Firefox, which does the same thing. You get to pick virtually any program as the external editor. In Windows, I have mine set to use Notepad++, and in Linux (Ubuntu), gEdit.

To edit the contents of a textarea, just hover your mouse over the textarea and a small purple button will appear. Click it and it launches your external editor with the content from your textarea loaded.

The only slight weirdness with setting up the plugin is that after installing the add-on the first time and restarting Firefox, you will need to choose which editor you want to use. Then, you must restart Firefox again before it will save your changes. Once that’s sorted, it works just fine.

If you’re a Mac user who doesn’t want to shell out for Saft, you should be able to use It’s All Text with Firefox on Mac, but it takes a little extra work to get it set up.

The great thing about these plugins is that they work with just about any regular textarea on a page, so you can use them in ExpressionEngine, WordPress or any other CMS or website that allows editing or posting via textareas.

They’re also useful when posting long-winded comments on blogs or forums.

Other Useful Plugins?

Are there other browser plugins that you use when developing in ExpressionEngine or WordPress? Leave a comment and tells us about it.