Google Blogoscoped

Sunday, October 4, 2009

A Local + Server Text Editor Using Chrome

Two goals inspired a little weekend project that turned out to be a lot of fun. 1) I wanted to create a local text based editor in HTML/ JavaScript to update my age old Netpadd as it suffers framework rot, making it hard to maintain and update. 2) I wanted to edit script files on my server from the internet cafe, without FTP (not necessarily edit live scripts, but e.g. develop on a sandbox copy).

At first I wasn’t too sure how I can have a JavaScript-based editor work with loading and saving from my local computer, but here’s an approach that works – and it also solves the goal of editing files on a server:

  1. There is an HTML + CSS + JavaScript application that basically displays a big textarea and some menu icons (I went for a FamFam icons wrench in the top right which expands some functionality). You can put this on your localhost which runs Apache (I’m using Wamp on Windows), or you can upload the same files to a password-protected directory on your server.
  2. This client app, via Ajax-posting, communicates with a PHP API in the background. This API handles things like loading and saving files, or showing the directory contents to pick a file. The JavaScript thus doesn’t need special file handling permissions, as it only talks in JSON data packs.
  3. The whole app is then converted to a pseudo-desktop app using either Mozilla/ Firefox Prism (which is available via e.g. a plug-in) or Chrome’s Gears-based native “Application Shortcut"; I currently ended up using Chrome for reasons detailed below. What this now does is remove the navigation bar and so on and make the app look like a desktop program, not a web page in the browser.
  4. On my computer, I connect files I want to open with Netpadd B (short for “Netpadd Browser” to differentiate between the old and new version) to a batch file which launches Chrome, passing the source file path as a URL anchor tag which is then dynamically loaded into the JavaScript app.

So now, I can double-click a local text file and launch it in a text editor that is actually at its core non-compiled JS/CSS, which is loads of fun to maintain. Below is the app as it shows in Chrome, and then in Prism with expanded toolbox:

Toolbox entries are also available via shortcuts, like Ctrl + S for saving (or Alt + X to open the toolbox, with plans to let you arrow-key through it).

Is it completely like a desktop app? Not fully – here are some problems I ran into which aren’t solved so far. First, let’s list some of the Firefox/ Prism issues:

It still works OK enough in Firefox so that I could use it as fallback in net cafes where Chrome isn’t installed (IExplorer might work too).
And here are some of the remaining Chrome app issues:

Opening a file (the JSON API sends back some minor binary data too in the form of base64-encoded favicons, so that site project folders ... here shown at the top of the dialog... are more easily spotted).

If you’re interested to mess with the source, which right now is in... what comes before Alpha?... then you can drop me a mail or something. Saving and loading works but most menu entries won’t work yet as I just got the framework up. One menu entry that does work is Syntax Lookup. For instance PHP has inconsistent parameter order for its functions. In Netpadd B you can type the function name, say strpos, and then press F1, and it will trigger a web search using Google’s Ajax API, restricting it to the site and some more things as it knows the file has a php extension. A blink later the result will be displayed at the bottom of the editor, and the idea is that you can expand this to many other languages (like Python and JavaScript) with a single Google base-query each:


Blog  |  Forum     more >> Archive | Feed | Google's blogs | About


This site unofficially covers Google™ and more with some rights reserved. Join our forum!