Add toolbar button and menu item in Firefox - firefox

I am trying my hand at developing Firefox addons. I have developed the basic javascript code for the extension. Now I want a menu item in the Tools Menu and a toolbar button. I can't get these two elements to appear, however(The button should appear in the Customize menu, IMO, and the menu item in the Tools Menu). What am I doing wrong?
Here is the chrome.manifest file:
content droptunesshuffle chrome/content/
content droptunesshuffle chrome/content/ contentaccessible=yes
overlay chrome://browser/content/browser.xul chrome://droptunesshuffle/content/browser.xul
locale droptunesshuffle en-US locale/en-US/
skin droptunesshuffle classic/1.0 skin/
style chrome://global/content/customizeToolbar.xul chrome://droptunesshuffle/skin/skin.css
Here is the browser.xul overlay file:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?>
<?xml-stylesheet href="chrome://droptunesshuffle/skin/skin.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://droptunesshuffle/locale/en-US/translations.dtd">
<overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript src="chrome://droptunesshuffle/content/shuffle.js" />
<menupopup id="menu_ToolsPopup">
<menuitem label="Droptunes Shuffle "key="link-target-finder-run-key" oncommand="droptunesshuffle.run()"/>
</menupopup>
<keyset>
<key id="droptunes-shuffle-run-key" modifiers="shift" key="S" oncommand="droptunesshuffle.run()"/>
</keyset>
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="droptunes-shuffle-toolbar-button" class=”toolbarbutton-1 chromeclass-toolbar-additional” image="chrome://droptunesshuffle/skin/icon.png" label="Droptunes Shuffle" tooltiptext="&droptunesshuffle;" oncommand="droptunesshuffle.run()"/>
</toolbarpalette>
</overlay>
The skin.css file:
#droptunes-shuffle-toolbar-button{
list-style-image: url("chrome://droptunesshuffle/skin/icon.png");
}

This is a bootstrap addon. Run the code and it will add a context menu to all windows.
https://gist.github.com/Noitidart/8776519
Now just change adding context menu to add to the menu item context that already exists.
In my gist here, change the context menu id to 'menu_ToolsPopup' this will add the menu item to the tools menu.
To add a toolbar button do the same thing to create a menuitem but now create a 'toolbarbutton' element and append it to id 'nav-bar'.

Related

How to start with speeddial mozilla extension

I want to create extension that replaces the blank page with my content
(static links plus data via ajax/iframe requests)
How should I start, where I can found usefull documentation? How can I
separate tab state when tab is blank or when tab is showing some website.
Is such code enough for minimal example
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="speeddialOverlay">
<window id="main-window">
<vbox id="speeddial-multikey-wrapper">
<iframe src="http://www.somesite.com"></iframe>
</vbox>
</window>
</overlay>

Open XUL application without navigation bar

I have created a XUL dialog, whenever i open this dialog it opens with Firefox navigation bar. Is it possible to open the XUL applications without firefox navigation bar? Screenshot is attached. Iam using Javascript's window.open command. i.e
window.open("http://localhost/test.xul", "test", "chrome, width=130,height=60, menubar=no");
Here is the XUL code
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<dialog id="donothing" title="Dialog example"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
buttons="accept,cancel"
buttonlabelcancel="Cancel"
buttonlabelaccept="Save"
ondialogaccept="return doOK();"
ondialogcancel="return doCancel();">
<dialogheader title="Options" description="My preferences"/>
<groupbox>
<caption label="Colour"/>
<radiogroup>
<radio label="Red"/>
<radio label="Green" selected="true"/>
<radio label="Blue"/>
</radiogroup>
<label value="Nickname"/>
<textbox/>
</groupbox>
</dialog>
Try adding "location=no" to the window.open:
window.open("http://localhost/test.xul", "test", "chrome, width=130,height=60, menubar=no, location=no");
See window.open for reference.

How do you open the preference pane for a Firefox AddOn via Toolbar Button XUL?

The Preference Pane for my FireFox AddOn is an XUL document (XML User Interface Language). The file is called options.xul.
In browser.xul, I have created a toolbar with a button for Options. When the Options button is clicked, it should bring up the Preference Pane defined by the options.xul. But I do not know how to call the Preference Pane from oncommand.
Calling a Javascript function is straight forward. But how does one call the AddOn's Preference Pane? Below is an oncommand calling a javascript function but how does one call the Preferene Pane?
If someone could please post the alteration to the following in browser.xul:
<menupopup>
<menuitem label="Options" tooltiptext="Options" oncommand="example.LoadURL('http://www.google.com/')" />
</menupopup>
You can not open a pane as such. A preference pane is a part of a preference window. Your option.xul should look at least something like this
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<prefpane id="myOptions" label="My Options">
<preferences>
<preference id="pref-option1" name="myapp.myoption1" type="bool"/>
<preference id="pref-option2" name="myapp.myoption2" type="int"/>
</preferences>
<checkbox label="Option Checkbox" preference="pref-option1"/>
<textbox label="Duration:" preference="pref-option2"/>
</prefpane>
</prefwindow>
In the browser.xul your oncommand could open the preference window using :
oncommand = "window.openDialog('chrome://whatever_location/option.xul',' My Option Dialog','chrome,toolbar');"
(or whatever method in your javascript that you would like to do the openDialog)
Additional information about prefwindows and panes can be found on
https://developer.mozilla.org/en/XUL/prefwindow or
https://developer.mozilla.org/en/XUL/prefpane
I assume that by "Preference Pane" you actually mean the Option Dialog window for your add-on, not just a single <prefpane> within the <prefwindow>. I also assume that you have an options.xul which is fully functional for use as a options dialog using the normal option button from the add-on tab.
I found that somewhat different options than tazyDevel shows above were needed to have the options dialog open so that it appears as if it was opened from the add-ons tab. I am not sure if this is a difference from 2012 to 2014 (when I wrote the code below), or if it is just an implementation difference. If I recall correctly, when I wrote this, I checked to see how Firefox was launching the options dialog windows and copied the options that were being used there.
I use the following code to open the options dialog for one of my add-ons from a button in the add-on's main dialog window (in addition to having it available through the add-ons tab):
XUL (the button that opens the options dialog):
<button label="Options" id="optionsButtonId"
onclick="myExtension.optionsButton();"
tooltiptext="Open the options window."
hidden="false" />
JavaScript:
/**
* The Options button.
*/
optionsButton : function() {
window.openDialog('chrome://myExtension/content/options.xul', '',
'chrome,titlebar,toolbar,centerscreen,modal');
},
Depending on how your code is organized, you may need to manually apply some preferences and/or have preference observer(s) which propagate the changes to what needs to know about them.
myExtension is a placeholder for whatever you are using to call your extension. A single object variable containing functions is assumed, as is myExtension being what you use to identify your content in your chrome.manifest file.

Firefox 4 toolbar overlay

i'm trying to make an own firefox toolbar and I have problem with overlay.
So i already setup my environment (i can see my extension in FF extensions manager), now I'm trying to add new overlay.
chrome.manifest
content sandbox chrome/content/
overlay chrome://browser/content/browser.xul chrome://sandbox/content/overlay.xul
overlay.xul
<?xml version="1.0"?>
<overlay
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbox id="browser-toolbox">
<toolbar id="findfile_toolbar">
<label control="findfile_filename" value="Search for files named:"/>
<textbox id="findfile_filename"/>
<label control="findfile_dir" value="Directory:"/>
<textbox id="findfile_dir"/>
<button label="Browse..."/>
</toolbar>
</toolbox>
</overlay>
When i restart my FF i don't see result, where is the problem?
I think the problem might be that your toolbox element ID is "browser-toolbox" not navigator-toolbox. In Firefox, if you want to add a toolbar to the UI, you need to use "navigator-toolbox" as the toolbox ID.
You can read more about toolbar development at the Born Geek toolbar tutorial.

How to update Firefox 2 compatible extensions using IFRAME to Firefox 3?

I am trying to update a custom firefox extension that I created for some tasks at work. Basically it is a sidebar that pulls up one of our webpages in an iframe for various purposes. When moving to Firefox 3 the iframe won't appear at all.
Below is an example of the XUL files that contains extension specific code including iframe, currently with just an attempt to load google but it it won't work with anything. I can't find any mention online of changes in FF3 that would cause this. Any suggestions would be appreciated.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://customsidebar/skin/customsidebar.css" type="text/css"?>
<overlay id="customsidebar-Main" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://customsidebar/content/customsidebar.js"/>
<vbox flex="1">
<toolbar>
<vbox>
<hbox id="customsidebar_TopToolbarRow">
<toolbarbutton label="Refresh" id="customsidebar_Refresh" oncommand="customsidebar_Refresh()" />
</hbox>
<hbox>
<label control="customsidebar_StatusBox" value="Log"/>
<textbox id="customsidebar_StatusBox" multiline="true" rows="1" wrap="off" />
</hbox>
</vbox>
</toolbar>
<iframe id="customsidebar_Iframe" src="http://www.google.com" />
</vbox>
</overlay>
Here is the overlay XUL file
<?xml version="1.0"?>
<overlay id="CustomSidebar-Overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menupopup id="viewSidebarMenu">
<menuitem observes="viewCustomSidebar" />
</menupopup>
<broadcasterset id="mainBroadcasterSet">
<broadcaster id="viewCustomSidebar"
autoCheck="false"
label="CustomSidebar"
type="checkbox" group="sidebar"
sidebarurl="chrome://customersidebar/content/customersidebarMain.xul"
sidebartitle="CustomSidebar"
oncommand="toggleSidebar('viewCustomSidebar');"/>
</broadcasterset>
</overlay>
Set flex="1" on the iframe
The XUL code for sidebar is not an overlay, it's a document loaded inside an iframe (look at the Firefox main window in the DOM inspector). So the root element should be <page>, not <overlay>. This, combined with the flex="1", should make the page display.
You usually want to put type="content" or type="content-primary" on the iframe. Definitely so if you load untrusted pages in it.
I would try setting flex="1" on the iframe. If that's not working, perhaps try it with the browser element instead of iframe.

Resources