Tag Archives: tutorial

.htaccess redirection using mod_rewrite

Posted on by

I make it a policy of mine that if three people in the same week ask me about something, that I should just make a blog post about it. This week’s apparent hot topic is HTTP redirection; there are tonnes of ways to do it and I’ve just been giving out a link about 301 redirects in various languages. Most people want to go with .htaccess method.

Create a .htaccess file with the below code, it will ensure that all requests coming in to domain.com will get redirected to www.domain.com
The .htaccess file needs to be placed in the root directory of your old website (i.e the same directory where your index file is placed)

Options +FollowSymlinks
RewriteEngine on
rewritecond %{http_host} ^domain.com [nc]
rewriterule ^(.*)$ http://www.domain.com/$1 [r=301,nc]

Please REPLACE domain.com and www.domain.com with your actual domain name.

The website’s a little out of date though; it no longer has to be a Linux server (did it ever have to be..?), so long as you have mod-rewrite enabled in your Apache conf file, you’ll be fine. Like the quote says, this just makes sure that anyone that comes to your website is using the www subdomain. (Sidenote, if you have  a choice of no sub-domain vs. “www.”, go without the sub-domain.) So, someone going to “neopets.com” will instantly (without them even seeing a page refresh) be taken to “www.neopets.com”.

That page doesn’t give much of an example of what all that code is doing though, so I’ll go through it here so that you can modify it better for your own use.

The “Options” line is an options directive, allowing you to set pretty much all of the options you can set in Apache conf files (so long as you have the right permissions; also, higher up directories override subdirectories). Here, we’re telling Apache that we want to follow system links (links to other directories, even though they’re no physical, like a shortcut). Your redirects most likely won’t fall apart if you don’t have that line.

The rewrite engine is where the awesome happens. The next line just turns it on.

The “rewritecond” is the evaluative part of the redirect. It checks to see if the URL that the user is looking at is the same as it’s argument. You can get the syntax for that evaluation from the rewrite engine’s man page, but essentially it’s just:

rewritecond %{variable_name} patterntocheckagainst

It uses a regex argument. If you don’t know regex, you’ll probably want to go and look at some tutorials first.

The [nc] at the end just makes the URL case insensitive. You can have multiple possible rewriteconds by using [or], and having another condition on the next line.

Last is the rewriterule, syntax here. Again though, it’s regex. It’s a useful skill for any one that codes in anyway, so you may as well learn it.

Again, there are flags, wrapped in square brackets. The [r=301] is telling the browser (and more importantly search engines) what type of redirect it’s doing; 301 is a permanent redirect. It’s just a HTTP status code, make sure you pick the right one. 307 is a temporary redirect.

If it’s still a bit over your head though, you could always contact me and get me to do it.

Really quick run down of storing and retrieving data in Firefox

Posted on by

Last time I quickly ran through how to add a button to your Firefox bar by making your own extension, but all it did was open a cruddy, static alert box.

In an effort to remind myself how to manage preferences, I’m going to make it so the user can decide what text should be alerted.

First we’ll be needing to add some kind of options dialogue box. For now, I’m just going to add a pane to the options window. We need to make another overlay for the preferences in that case. Create a new text file called prefs.xul. Doing that is explained pretty well in the pane creation section of the Rietta tutorial.

That website it clearly out of date though, since it says this:

If you did not know what you want to merge with, the DOM Inspector is your best tool for looking through browser code and finding element IDs.

Which is no longer true; Firefox doesn’t ship with that DOM Inspector anymore. So, I’ve really no idea how to find the DOM element ID’s I’m supposed to be merging with.

Rietta do a good job of explaining how to link preferences with the inputs too. They don’t mention how to make your stuff get laid out nicely though. I think you can use CSS like normal (using style). There’s a page on tags you can use over MDC.

Once you’ve designed your overlay in XUL, you’ll need to actually overlay it by adding it in your chrome.manifest, like you did with the browser.

overlay chrome://browser/content/preferences/preferences.xul chrome://your-addon/content/prefs.xul

Open up your options window, and you should see your pane there now.

Mine definitely needs to be prettier. (The screenshot is for the addon I'm working on, not this example.)

Mine definitely needs to be prettier. (The screenshot is for the addon I'm working on, not this example.)

When you change the data in your fields and press ‘Ok’ they’ll automatically be updated and saved. You’ll be able to see them in your about:config too.

Now we can go ahead and make our javascript file, save it in your content folder. This’ll just be like any other javascript function you’d normally write.

We need to use XPCOM in order to get and set preferences from inside a javascript file. That makes my javascript file look like this:

//  Gets the text from the store user preference and returns it
function getAndReturnText () {
  //  Installise the preferences service
  var pref = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);

  //  Message box showing the text the user entered on the options pane
  alert (pref.getCharPref ('extensions.timesink.possibleWebsites'));
}

Doesn’t do much at the moment, until we change the oncommand event we added to our button (in browser.xul). You also need to include the javascript in any overlays with you’re using it.

<script type="application/x-javascript" src="chrome://your-addon/content/mycode.js" />

After learning all that, I ended up with these tabs open, which may be more help to you.

Super quick guide: Adding a button to the Firefox toolbar

Posted on by
My button: look how cute he is!

My button: look how cute he is!

What I’ll cover here is the steps that you should take to add a button to your Firefox toolbar, I think Thunderbird and stuff might be the same too. This isn’t a comprehensive guide, the links I link to are for that.

This is basically an article for me to dump loads of information I’ve accumulated. You won’t learn much just by only reading this article. Take a look through the links I give.

You’re basically making an extension, so you need the same file layout to start with. Here’s assuming you’re building your extension inside a folder named “extName”, call yours whatever you want though.

extName/
        chrome/
               content/
        chrome.manifest
        install.rdf

More indepth look at setting up the environment and folder structure.

Open install.rdf and paste the following:

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">
    <em:id>addonname@whatever.com</em:id>
    <em:version>0.1</em:version>
    <em:type>2</em:type>

    <!-- Target Application this extension can install into,
         with minimum and maximum supported versions. -->
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.5</em:minVersion>
        <em:maxVersion>3.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>

    <!-- Front End MetaData -->
    <em:name>Addon name</em:name>
    <em:description>Description for addon</em:description>
    <em:creator>Your name</em:creator>
    <em:homepageURL>http://yourhomepage.com</em:homepageURL>
  </Description>
</RDF>

Change whatever stuff. Don’t make the minVersion less than 1.5, because you’re blatantly lying. Lots changed in 1.5 that doesn’t act the same way now. Don’t change that weird looking id. The first id needs to be changed though. It doesn’t have to be a real email address, but it does have to be in email address format. More indepth look at install.rdf.

Firefox’s appearance is created by using XUL (“zool”). We create our own XUL documents which we tell Firefox to merge with the base template. We say stuff like “add this chunk of XML to the status bar” and it merges that data. You can overwrite sections too. We call our XUL “overlays“.

Add these lines to chrome.manifest.

content     youraddon    chrome/content/
overlay chrome://browser/content/browser.xul chrome://youraddon/content/browser.xul

That basically says “the content of youraddon is in ‘chrome/content’, which is  direct relative to this file.” Here’s a more comprehensive explaination of what it means.

Time to make some images for your button to display. You need to make two, one 24×24 pixels, and a smaller version 16×16 pixels. I stuck them in chrome/content/images/ but so long as they’re in chrome/content/ it shouldn’t matter. Then you need to make a CSS style for those buttons. This’ll do:

/*  skin/toolbar-button.css  */

#youraddon-button {
  list-style-image: url("chrome://myextension/content/btn_large.png");
}

toolbar[iconsize="small"] #youraddon-button {
  list-style-image: url("chrome://youraddon/content/btn_small.png");
}

I think it’s standard to separate your content from your skinning, but I’ve not bothered with that. It’ll probably cause me all sorts of problems later.

Create chrome/content/browser.xul:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://youraddon/content/style.css" type="text/css"?>
<overlay id="youraddonBrowser" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="youraddon-button" class="toolbarbutton-1"  label="Your addon name" oncommand="alert ('hey');" />
</toolbarpalette>
</overlay>

Pretty standard XML styling. Define it as your overlay. Tell it you want to merge with the “BrowserToolbarPalette“, and add a button. That class is required to style it like a toolbar button. The label is the mouse over text. oncommand is the Javascript that will run when you press the button. That’s another article though.

I bookmarked and shared (foxmarksxmarks is cool) all the pages I ended up having open at the end of button creation, so go ahead and look through them.