Thursday, July 22, 2010

Firefox extension programming: add an icon/button to the address bar


During the development of Invert Input version 3, I tried to add an little icon to the address bar (URL bar). When the user clicked on the icon, the URL would be inverted. Although this idea was dropped, the steps of the creation of an icon in the URL bar are captured here.

1. In the overlay.xul file, added an icon to the urlbar-icons group:

   <hbox id="urlbar-icons">
      <image id="invertinput12urlbarIcon" insertbefore="star-button" src="chrome://invertinput12/skin/icon16.png" onclick="invertInput12.invertUrl();" tooltiptext="&invertInput12CM.invertUrl;" />
   </hbox>

   The icon was inserted before the "star" icon. It had the size of 16x16. When it was clicked, function invertUrl() would be invoked.

2. Function invertUrl() focused on the URL bar first. Then it called the invert() function to invert the text of the focused element.

   invertUrl : function()
   {
      document.getElementById("urlbar").focus();

      invertInput12.invert();
   },

3. We wanted to control showing/hiding the icon through the Options dialog. How to add items to the Options dialog and Firefox configuration tree is out of the topic. We just discuss how to show/hide the icon according to the configuration parameter.

   var prefs = Components.classes["@mozilla.org/preferences-service;1"]
                       .getService(Components.interfaces.nsIPrefService);
   myprefs = prefs.getBranch("extensions.invertinput.");

   invertInput12.isShowUrlBarIcon = myprefs.getBoolPref("showUrlBarIcon");

   // The Invert Link icon on the URL bar.
   var urlBarIcon = document.getElementById("invertinput12urlbarIcon");
   if (urlBarIcon)
   {
      if (invertInput12.isShowUrlBarIcon)
         urlBarIcon.setAttribute("collapsed", false);
      else
         urlBarIcon.setAttribute("collapsed", true);
   }

This idea was dropped. I decided to use a toolbar button to invert the text of the focused element.

No comments:

 
Get This <