Missing e {browser extension for tumblr}

[Technical] Settings Files: XML, PHP and Cleverness

While I was working on the upcoming feature for importing/exporting Missing e settings, I came upon some interesting technical challenges. In case you are interested in the nitty-gritty of web development, you may want to read on.

The problem is this: what’s the best way to export and import settings automatically?

File Format - XML

Missing e settings are exported in XML format. Basically, XML is a document format that looks similar to HTML, but allows you to create your own arbitrary tag names. So long as you follow a valid XML scheme, there are tools out there to automatically parse these kinds of files (read them into easily scannable data).

The Missing e settings files will look like this:

<?xml version="1.0"?>
<missing-e>
   <setting>
      <name>MissingE_timestamps_enabled</name>
      <value>1</value>
   </setting>
</missing-e>

For any setting you’ve manually changed, a **<setting> tag is emitted. Once in this format, the settings file is readable in just about any browser on any operating system!

Saving Your Settings

Okay, how do you save your settings? The problem is that the Missing e browser extension is written almost entirely in JavaScript. As a rule, JavaScript does not support reading or writing files on your computer. This is for the purpose of security. Can you imagine going to a website that can read anything from your hard drive or write anything to it? That would be immensely dangerous!

My first thought to get around this was to generate the settings XML file and display it in a new tab or window. From there, you would select all and copy the text, then paste it into a new file or directly into some sort of input box in another browser.

This seemed like it had too many steps for my users, though. Too much to explain. I figured that there must be a better way. So, my next thought was to automatically generate the settings and put it directly into your system’s clipboard (as if you selected and copied it, without actually having to do so). I got as far as implementing it on Google Chrome. It worked! Still, it seemed like too much effort to have to paste it into a file and then save it.

Finally, I came up with a better way. While it isn’t possible to create a file in JavaScript or automatically bring up the Save As… box, there is another option. I created a server script at tools.missinge.infraware.ca to which Missing e could send data, and which would respond by displaying your settings as an XML file.

The script is a single, fairly short PHP file. Generating the XML is the easy part, really. The neat trick are these line at the beginning of the PHP code:

header("Content-Type: text/xml");
header("Content-Disposition: attachment; filename=missinge.xml");

These rewrite the headers (special bits of data that come along with responses when your browser asks the server for a web page) of the outputted page. The important one is Content-Disposition. You know how when you click on a web link to a program or a zip file or something else your browser isn’t used to view, and it automatically asks you if you want to save it to your computer or open it with another program? That’s exactly what the Content-Disposition header does. It tells your browser not to open the file itself, but instead ask if you want to save it to your computer. It even suggests a filename, so it automatically gets called missinge.xml!

On the Missing e settings page, there will be a special hidden tag called an IFRAME. You can’t see it, but it will be used to automatically load this server page, allowing the settings file to be saved to your computer without leaving the page or opening another tab or window.

Loading Your Settings

Well, that’s all well and good, but if saving your settings was hard, loading them is another thing entirely.

The first and simplest implementation I had was a simple HTML page with a big text box that you would paste the exported settings into. There would be code to read it in, parse the XML data and then use it to start applying changes to your settings. This is a lot more complex to implement than it sounds, and doesn’t make for an easy-to-use feature.

Later, when I was thinking about exporting the settings to your clipboard, I was also thinking of automatically retrieving them from the clipboard. Apparently, this is more difficult than exporting. Some users of the Chrome version of Missing e may have noticed a few days ago that an update of the extension asked for more permissions. This is because I accidentally left in a new permission requirement for reading the clipboard that I was playing around with. Turns out you don’t need more permissions to automatically copy to the clipboard, but you do need more to automatically paste from it.

Many users didn’t notice Chrome informing them that new permissions were required, so Chrome automatically disabled Missing e for those people! I realized very quickly that this would be a serious problem if I were to actually implement the import settings feature in this way.

Instead, I tried to think along the same lines as I did with that server-side PHP script I used for exporting settings. While I can’t read files from your computer or even use JavaScript to automatically receive files you’ve pointed at, I can upload the file you’ve selected to a server…. What good is that? Well, I added about 5 more lines to that PHP script I mentioned before to detect when a file was uploaded. If one is, all the script does is display the file it got back to you. Easy enough!

So, all you have to do to import your settings is to click a button, select the Missing e settings file in an Open File dialog box, and Missing e automatically uploads the file to tools.missinge.infraware.ca which just sends the file back to your browser. The Missing e code gets the document, then your web browser automatically parses the XML (there’s no need to write the code to do it, since most browsers can actually do this themselves with a loaded XML page) and I scan through it to get a list of all the setting names and values, which the Missing e background code uses to overwrite the existing settings.

Done and done.

Manually transferring your settings and actually copying and pasting things is for chumps, anyway.