Create the startup files and folders via:
https://addons.mozilla.org/en-US/developers/tools/builder/9b0cddaa3fc073e50a0e7e284ef64438

Prefill all the fields, and build the zip file.
Unpack this zip file, and open:
/chrome/content/overlay.js

You can edit this file.
In chrome/skin/ are the files for editing the styles and logo.

After changing the files. Zip it in and rename the zip file to the xpi extension.
Drag the xpi file in your FF browser.. And your own plugin is installed.

More info:
https://addons.mozilla.org/en-US/developers/docs/getting-started
https://developer.mozilla.org/en/Code_snippets/Tabbed_browser
https://developer.mozilla.org/en/XUL/tabbrowser#m-loadURI

It’s really easy to create your own Chrome Extension.
This simple extension just opens your personal website in a new tab.

1. Create a folder
2. Create the following files:
* manifest.json
* background.html
* icon.png
3. Edit the manifest file:

{
  "name": "My website",
  "version": "1.0",
  "description": "Just browse to my website...",
  "background_page": "background.html",
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "My website"
  },
  "permissions": ["tabs"]
}

4. Now edit the background.html file:

< html>
< head>
	< script>
	chrome.browserAction.onClicked.addListener(function(tab) {
		var createData = {
			url: "http://www.ladysign-apps.com"
		}
		//you can also specify a callback after page load...
		chrome.tabs.create(createData);
                //or to load a new window:
		//chrome.windows.create(createData);
	});
< /script>
< /head>
< body>
< /body>
< /html>

From the background.html you can include any other file you want to include in this package.

5. Now open Chrome.
6. Open de extension tab: (Chrome Dev icon) > Extra / Tools > Extensions
7. Click the load button, and point to your folder, to test extension.
You will see the extension is added next to your addressbar.

Works?
8. Now pack it: – Press the pack button; and point to your folder again.
Chrome will now create a plugin of it; with an *.crx in the filename.
It will also create *.pem key file, so it identifies your plugin for further updates…

Then this is your .htaccess file content. (Do not forget the [R=301,L] or it won’t work)

RewriteEngine On
# first make sure my www is not touched
RewriteCond %{HTTP_HOST} !^www.mydomain.com
# the subdomain you want to create
RewriteCond %{HTTP_HOST} ^forum.mydomain.com
# the place to redirect to
RewriteRule (.*) http://www.mydomain.com/forum/?option=com_kunena&Itemid=0 [R=301,L]

You can protect yourself from deeplinking.
In your .htaccess file add the following lines (notice the file extensions and your own domain):

Options +SymLinksIfOwnerMatch
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(.*\.)?mydomain.com(/)?.*$ [NC]
RewriteRule .*\.(wmv|asx|jpg|gif|jpeg)$ http://localhost/ [R,NC] 

1. Get rid of the image flickering. This is what happens when using roll-overs for multiple images, both images will be requested from the server. Although the time is pretty fast, you’ll will see the image flickering
2. Reduce page requests – One big image might be heavier to download, nowadays it will be faster and directly loaded in your page then requesting multiple images

There are some handy Firefox tools, which you can use for website performance optimization:
Live HTTP Headers and Firebug.
Within Firebug, you can select the NET tab. From here you can see all the requests to images.

See the sprites which are used for Amazon, YouTube or even for Google.

There are even online tools for generating these sprites, so you don’t need Photoshop for calculating.

How to implement it? – Just by smart using the background property.
For example:

#navigation {
 width: 500px;
 height: 20px;
 overflow: hidden; //no image outside the defined clipping area is visible
}

#navigation a {
 display: block;
 width: 100px;
 height: 20px;
 text-indent: -10000px; //for removing the link text off the screen
 background-image: url(sprite.png) //link to your sprite image;
}

#nav-home a { background-position: 0 0; //position of sprite x y }
#nav-home a:hover { background-position: 0 100px; //note the changed y-position }
#nav-about a { background-position: 20px 0; }
#nav-about a:hover { background-position: 20px 100px;}

You can put everything in your sprite, think about icons, backgrounds, borders and corners.
It’s even possible to combine it with background repeating.