So I made a simple toolbar for Firefox (as a plugin) and also I implemented it into Opera.
Example of plugin i made for firefox looks like this:
1) Toolbar for Internet Explorer v6:
It is possible to do it but i hate this browser, adding new icons to your toolbar with specific functionality is not possible without registry change (and honestly how many end-users is able to do it?). If you want to know how to do it anyway, there is a tut:Adding Toolbar Buttons .
2) Toolbar fo Firefox
There is very detail and good tutorial on Born Geek, the only withdraw is it is very long for our purpose make it as easy as possible (but recommendet).
2.1) Required files
Personally i recommend to edit following files in Notepad++ and select syntax to MS ini file.
Download tuttoolbar.xpi file to your preferred location and open your total (or other file) commander. This file is packed firefox plugin, you can install it and see what it does.
2.2) Steps to do
2.2.1 rername tuttoolbar.xpi to tuttoolbar.zip and open in, remember this filestructure, it is quite important.
file structure should look like this:
Code:
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/
Code:
<!-- Required Items -->
<em:id>your@site.com</em:id>
<em:name>Pligg Toolbar</em:name>
<em:version>1.0</em:version>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>
<!-- Optional Items -->
<em:creator>Your name</em:creator>
<em:description>simple pligg toolbar</em:description>
<em:homepageURL>http://yourdomain.com</em:homepageURL>
</Description>
</RDF>
2.2.3. Open chrome directory, rename tuttoolbar.jar to tuttoolbar.zip and open. Your file structure is supposed to be like this:
Code:
+- TutToolbar/
+- install.rdf
+- chrome.manifest
+- chrome/
+-content/
+-skin/
- open content folder, tuttoolbar.xul file, delete all, copy&paste following code and change highlited items to your own:
Code:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://tuttoolbar/skin/tuttoolbar.css" type="text/css"?>
<overlay id="TutTB-Overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"
src="chrome://tuttoolbar/content/tuttoolbar.js" />
<toolbox id="navigator-toolbox">
<toolbar id="TutTB-Toolbar" toolbarname="Pligg Toolbar" accesskey="T"
class="chromeclass-toolbar" context="toolbar-context-menu"
hidden="false" persist="hidden">
<toolbaritem flex="0">
<toolbarbutton id="TutTB-Web-Button0" tooltiptext="Pligg Homepage"
label="Pligg Homepage" oncommand="openHome();" />
<toolbarseparator />
<toolbarbutton id="TutTB-Web-Button" tooltiptext="Save to Pligg"
label="Save to Pligg" oncommand="openSaving();" />
<toolbarseparator />
<toolbarbutton id="TutTB-Web-Button2" tooltiptext="Visit Pligg forumm"
label="Pligg Forum" oncommand="openForum();" />
</toolbaritem>
<toolbarspring />
</toolbar>
</toolbox>
</overlay>
2.2.4 In the same directory open tuttoolbar.js file.
Now you can choose - you can simply add following functions (which are btw the same but this is more transparent ) and do nothing with other code (if you expect to improve your toolbar in future and read the f.. long but great tutorial on borngreek) or you can delete all and put only these functions:
Code:
function openHome()
{
//open new window to your homepage
void(open('http://yourdomain.com','resizable,location,menubar,toolbar,scrollbars,status'));
}
function openSaving()
{
//open new window to your saving page
q=(document.location.href);
void(open('http://yourdomain.comsubmit.php?url='+escape(q),'','resizable,location,menubar,toolbar,scrollbars,status'));
}
function openForum()
{
//open new window to your forum...if you have any:)
void(open(http://yourdomain.com/forumlocation','Pligg Forum','resizable,location,menubar,toolbar,scrollbars,status'));
}
2.2.5 Open second folder, the skin folder and tuttoolbar.css file. Clear all and paste following code with your customization:
Code:
#TutTB-MainMenu {
list-style-image: url("chrome://tuttoolbar/skin/main.png");
}
#TutTB-Combined-Button {
list-style-image: url("chrome://tuttoolbar/skin/combined.png");
}
#TutTB-Combined-Button > .toolbarbutton-menubutton-button {
-moz-box-orient: horizontal;
}
#TutTB-Web-Button,
#TutTB-Combined-Web {
list-style-image: url("chrome://tuttoolbar/skin/yourSavingImage.png");margin-left:5px
}
#TutTB-Web-Button0 {list-style-image: url("chrome://tuttoolbar/skin/yourHomepageImage.png");margin-right:5px}
#TutTB-Web-Button2
{
list-style-image: url("chrome://tuttoolbar/skin/yourForumImage.png");margin-left:5px
}
#TutTB-Combined-Image {
list-style-image: url("chrome://tuttoolbar/skin/images.png");
}
#TutTB-ResizeBar {
background-image: url("chrome://tuttoolbar/skin/gripper.png");
min-height: 22px;
min-width: 3px;
}
#TutTB-ResizeSplitter {
background: transparent;
border: none !important;
}
2.2.6 Image files you selected in step before copy to skin folder. Names are case-sensitive.
2.2.7. We are nearly done. Now we have to repack files to original xpi (x platform installation) file.
1) zip folders (of course with all files in) content and skin and the zip file rename to tuttoolbar.jar and place it to your chrome folder. The filestructure when it is done looks like this:
Code:
+- TutToolbar/ +- install.rdf +- chrome.manifest +- chrome/tuttoolbar.jar
2.2.8 Thats it,you´ve got a new plugin to your Firefox. So open file and install plugin,restart firefox and see effect. If there is some error, you can uninstall plugin, check the files, repack and try it again. Repacking is quite boring so i recommend to use 4 tabs in Total commander. You can create tab with ctrl+t, 2 tabs for packing step 1 (tuttoolbar.jar) and next 2 tabs for creating the whole xpi file.
Hope it helps. If somebody is interested in adding buttons to Opera@USB version, this tutorial can be continued in second part. But it is necessary to take into considoration that plug-in into Firefox can download any user of your site. Tutorial for adding-buttons for Opera is not resulting in plugin, every user must edit its own files and it is not so easy as installation of firefox toolbar.
.gif "^o)")
Linear Mode
