MozillaZine

Sidebar to display the page URL

Talk about add-ons and extension development.
extensiondev
 
Posts: 12
Joined: January 16th, 2009, 3:11 am

Post Posted January 17th, 2009, 1:56 am

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
 
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post Posted January 18th, 2009, 1:23 am

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
 
Posts: 12
Joined: January 16th, 2009, 3:11 am

Post Posted January 18th, 2009, 11:14 pm

Thank you max, let me try with it.

extensiondev
 
Posts: 12
Joined: January 16th, 2009, 3:11 am

Post Posted January 19th, 2009, 3:30 am

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
 
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post Posted January 19th, 2009, 7:33 am

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
 
Posts: 12
Joined: January 16th, 2009, 3:11 am

Post Posted January 19th, 2009, 11:14 pm

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

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

extensiondev
 
Posts: 12
Joined: January 16th, 2009, 3:11 am

Post Posted January 22nd, 2009, 6:40 am

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!

Return to Extension Development


Who is online

Users browsing this forum: Google [Bot] and 4 guests