Sidebar to display the page URL

[extensiondev]

Hi,

I am new to the extension development. I want to cerate a firefox sidebar extension in which we need to display the link of the page (URL in addressbar) that I am currently viewing.

I have created a sidebar which displays my html page. The thing I want to do is parse the URL and display in sidebar.
Any idea?

Thx

[max1million]

gBrowser.currentURI.spec would get the current web page's url (not necessarily what's been typed into the location bar)

You'd likely need to listen for the sidebar to load to can get url then, and for when the current page changes.
Using events pageshow and tabSelect in FF2 (FF3?) will catch them, need to sort out when your doc is in the sidebar.

Code: Select all

window.myExtension = {
   init: function() {
      document.getElementById("browser").addEventListener("pageshow", myExtension.onPageLoad, true);
      gBrowser.tabContainer.addEventListener("TabSelect", myExtension.tabSelected, false);
   },
   
   onPageLoad: function(aEvent) {
   var doc = aEvent.originalTarget;
   try {
      var tab = gBrowser.mTabs[gBrowser.getBrowserIndexForDocument(doc)];
   }catch(e){}
   if (tab && tab == gBrowser.selectedTab) dump("current page " +gBrowser.currentURI.spec);
   else if (!tab) dump("not tab, may be sidebar");
   },

   
   tabSelected: function(aEvent) {
   var doc = gBrowser.selectedBrowser.contentDocument;
   var tab = gBrowser.selectedTab;   
   if (aEvent.target == gBrowser.selectedTab) dump("current page " +gBrowser.currentURI.spec);
   }
}
window.addEventListener("load", myExtension.init, false);

http://developer.mozilla.org/En/Code_sn ... _page_load
http://developer.mozilla.org/En/Extensi ... ed_Browser
http://developer.mozilla.org/En/Working ... hrome_code

[extensiondev]

Thank you max, let me try with it.

[extensiondev]

I've made a try with the snippet but it doesn't seems work.
I am sure there is some issue with my XUL files but don't able to trace it. Here I am adding my xul files for referene.

contents of emptysidebar-overlay.xul

Code: Select all

<?xml version="1.0"?>

<!DOCTYPE overlay SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd">

<overlay id="emptySidebarOverlay"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <script type="application/x-javascript" >
      window.myExtension = {
         init: function() {
            document.getElementById("browser").addEventListener("pageshow", myExtension.onPageLoad, true);
            gBrowser.tabContainer.addEventListener("TabSelect", myExtension.tabSelected, false);
         },
         
         onPageLoad: function(aEvent) {
         var doc = aEvent.originalTarget;
         try {
            var tab = gBrowser.mTabs[gBrowser.getBrowserIndexForDocument(doc)];
         }catch(e){}
         if ( tab == gBrowser.selectedTab) dump("current page " +gBrowser.currentURI.spec);
         else if (!tab) dump("not tab, may be sidebar");
         },

         
         tabSelected: function(aEvent) {
         var doc = gBrowser.selectedBrowser.contentDocument;
         var tab = gBrowser.selectedTab;   
         if (aEvent.target == gBrowser.selectedTab) dump("current page " +gBrowser.currentURI.spec);
         }
      }
      window.addEventListener("load", myExtension.init, false);
   </script>
   <menupopup id="viewSidebarMenu">
      <menuitem key="key_openEmptySidebar" observes="viewEmptySidebar"  />
   </menupopup>

   <keyset id="mainKeyset">
      <key id="key_openEmptySidebar" command="viewEmptySidebar"
         key="&openEmptySidebar.commandkey;" 
         modifiers="&openEmptySidebar.modifierskey;" />
   </keyset>

   <broadcasterset id="mainBroadcasterSet"> 
      <broadcaster id="viewEmptySidebar" 
         label="&emptysidebar.title;"
         autoCheck="false"
         type="checkbox"
         group="sidebar"
         sidebarurl="chrome://emptysidebar/content/emptysidebar.xul"
         sidebarTitle="&emptysidebar.title;"
         oncommand="toggleSidebar('viewEmptySidebar');" />
   </broadcasterset>

</overlay>

contents of emptysidebar.xul

Code: Select all

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type"text/css" ?>
<?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?>

<!DOCTYPE page SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd">
<window id="sidebar-window"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:ps="/apps/cmf/ps-ns.owl#"
        xmlns:html="http://www.w3.org/1999/xhtml"
        orient="vertical"
        onload="this.frames['sidebar-frame']">

  <iframe id="sidebar-frame" 
          name="sidebar-frame"
          flex="1"
          width="200"
          height="200"
          src="http://localhost/test.html"
          style="overflow: auto"/>
          
</window>

As I said, since I am new to the extension development, trying to get some better understandings about the xul files and extension development.

Please advice me.

[max1million]

The script just dumps some text, change dump to alert and you get popup alerts. The script needs to be finished/edited, it was just to show a way to get the events. Can call another function instead like one you write to update your sidebar. And you should change myExtension to something else so it doesn't conflict with all the other extensions that used sample codes with that object name without changing it.

This should be a start but it too is unfinished, just an alert (instead of dump)

Code: Select all

   updateSidebar : function (){
      var sidebar = document.getElementById("sidebar");
      var sidebarDoc = sidebar.contentDocument;
      if (!sidebar || !sidebarDoc || sidebarDoc.documentURI != "chrome://emptysidebar/content/emptysidebar.xul") return;
      alert("replace this alert with code to update your sidebar");
   }

Can add it to that object and replace dump(...) with myExtension.updateSidebar()

[extensiondev]

It worked!!!!!!!!!!

Thank you max, thanks a lot
Let me finish it.

[extensiondev]

Sorry to reopeing this thread again.

When I try to pass the extracted values to a javascript function, which is in my html page, it failed.

Error - sidebarDoc.showData is not a function'

My html page test.html is loaded in the sidebar and its having the funtion 'showdata' to display the extracted details.


Here is the snippet I am using.

Code: Select all

         tabSelected: function(aEvent) {
         var doc = gBrowser.selectedBrowser.contentDocument;
         var tab = gBrowser.selectedTab;   
         if (aEvent.target == gBrowser.selectedTab) {
         window.myExtension.updateSidebar();
         alert("current page " +gBrowser.currentURI.spec + "Title" + gBrowser.contentTitle + " Website " +gBrowser.currentURI.host);
         
         }
         },
          updateSidebar: function (){
          
            var sidebar = document.getElementById("sidebar");
            var sidebarDoc = sidebar.contentDocument;
            if (!sidebar || !sidebarDoc || sidebarDoc.documentURI != "chrome://emptysidebar/content/emptysidebar.xul") return;
            alert(sidebarDoc);
            sidebarDoc.showData("URL", "Title", "site");
         }

How can I invoke a Javascript function in the sidebar html page from my file?
Thanks in advance!