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
Sidebar to display the page URL
-
- Posts: 2810
- Joined: November 15th, 2004, 5:03 am
Re: Sidebar to display the page URL
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. 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
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/Extensi ... ed_Browser
http://developer.mozilla.org/En/Working ... hrome_code
-
- Posts: 12
- Joined: January 16th, 2009, 3:11 am
Re: Sidebar to display the page URL
Thank you max, let me try with it.
-
- Posts: 12
- Joined: January 16th, 2009, 3:11 am
Re: Sidebar to display the page URL
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
contents of emptysidebar.xul
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.
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.
-
- Posts: 2810
- Joined: November 15th, 2004, 5:03 am
Re: Sidebar to display the page URL
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)Can add it to that object and replace dump(...) with myExtension.updateSidebar()
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");
}
-
- Posts: 12
- Joined: January 16th, 2009, 3:11 am
Re: Sidebar to display the page URL
It worked!!!!!!!!!!
Thank you max, thanks a lot
Let me finish it.
Thank you max, thanks a lot
Let me finish it.
-
- Posts: 12
- Joined: January 16th, 2009, 3:11 am
Re: Sidebar to display the page URL
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.
How can I invoke a Javascript function in the sidebar html page from my file?
Thanks in advance!
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!