Firefox 3.5b4: Storing data for offline use fuxxored.

Good idea, that doesn't work.

For me at least anyway, and I’ve only tried it on two WordPress installations running bleeding edge 2.8. I get this message, click allow, and then all pages work once. Caching on the first load.

Then, if I refresh the page, or go back to it later, everything loads without the style sheet and JavaScript – the cached stuff. To fix it, I had to go into Options > Advance > Network and then remove my websites from the list.

I guess they’re for some reason competing with Google Gears, which makes little sense. Why compete? Why not just advertise Gears? They do exactly the same thing from what I can see.

Update: A lot of people are getting here to find out how to use Gears in the Firefox beta. You can use all your extensions (even if Firefox says they’re not compatible) by editing a single option. Of course, if you do that you could end up crashing Firefox or something, but you can just start in safe mode and disable it again.

Type about:config into Firefox’s address bar and click the “I’ll be careful, I promise!” button.

Right-click anywhere. Choose New>Boolean. Make the name of your new config value extensions.checkCompatibility and set it to false.

Make another new boolean pair called extensions.checkUpdateSecurity and set the value to false.

Restart Firefox.

Really quick run down of storing and retrieving data in Firefox

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.)

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

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.

Debian experience so far

I switched to Debian four or so days ago, and it’s kinda making me feel stressed. I’m having to put a lot more work into the operating system to just make it work.

Firefox for instance – oh, sorry, Iceweasel – took a lot of Googling and about:configing before it felt the same as it did on Windows. Why some of those keys and things have changed is odd for me. Why has ^J for the download menu suddenly been switched to ^Y? Why use Alt instead of Ctrl for tab manipulation? Why doesn’t clicking the address bar auto-highlight it all? These just seem like weird changes to me.

I’ve installed a few extensions in Songbird. It says they’re installed but there’s no other sign of them. No way to run them. No obvious way to get to the iPod functions which apparently exist…

I’ve no idea what I’m supposed to be installing to get OpenGL to work. I need it to play Eve… (Which is apparently no longer in development…)

Installing things is also a little bit of work… I don’t know why more things don’t come with a set up wizard, like I’m so used to in Windows. Instead, I have to try and remember the switches for untaring things, putting them in the right place. Sometimes just guessing what I should be doing to run the damn thing.

This just isn't nice... It looks like it can't decide on what width to use for letters sometimes. Blatant attempts at adding extra pixels to make it more round.

Fonts are a weird, picky problem for me too. But I think that’s just because I’ve not played around with the defaults enough yet, to find one I actually like. Needs more anti-alias, and better kerning.

On the installation for Debian set up thing, I asked it to install a web server. That may exist, but I’ve no idea where to find it… My PHP pages aren’t giving me any errors, they just don’t seem to be outputting anything at all.

It’s just not new user friendly. I’m hoping that Ubuntu is much better in this domain, since that’s what it’s designed for really. So, I may be switching back to Windows some time soon. I don’t think my life can handle not having it as a primary operating system just yet. In the furutre though, I’ll defintely be installing another Linux OS on my next machine.

Go, Mozilla.

I actually have things to be doing, but I thought I’d check my RSS feeds/digg/reddit before I started with actual work. Usually that takes about half an hour, but it took considerably longer today because someone linked to TED videos again, and I’m always getting lost in there.

But that’s not what’s amazed me! I just found out about Bespin! Lifehacker called it a text editor (which made me think WYSIWYG editor) but it’s actually a plain text editor. Awesome for coding and stuff.

Mozilla guys, talking about Bespin

It looks phenomenal. I never really understood what the canvas tag could be used for, and apparently it can be used for great things.