somewhere to talk about random ideas and projects like everyone else

stuff

Wave Search Pause Button 06 November 2009

An issue now with the floods (is there any post about wave complete without a pun?) of people in wave, the with:public channel (of waves!) is becoming a unusable tsunami (har har har) of waves where clicking on one will end up opening up something else totally randomly as it has shifted down several by the time you click it.

So what is there to stop it? Well, I made this insanely great, floodwall: the Wave Pause button. It’s a simple bookmarklet that if you click, it stops all incoming updates to the search panel and clicking it again restores it.

The functional bookmarklet can be found at http://antimatter15.com/misc/wave/pause.html which is a rather hideous looking page hacked together quickly.

How does that work? Well, it turns out it’s actually not that easy. My first idea was to just find the function which updated things (it turned out to be Vwh) and replace it with function(){} and restore it later. That worked fine… But I remembered some evil crap that google said, about GWT source being browser-targeted. Incidentally that means Wave gets dfferent versions of the code with different function names, and if they ever update wave, all the function names screw up too!

Oh noes! What now? Well, it uses a sort of pseudo-heuristic approach. It searches for a big characteristic which is .style[w2g]. BUUT, w2g is fwg in chrome! So first it iterates through all variables and finds one whose value equals “display”. Then it takes that variable name, and searches for functions which have .style[name of string which equals display] twice. That reduces the pool significantly. Then it checks to make sure it has the string .innerHTML in it, and has 4 arguments. After that, well, you are reduced to a single function and you can use the same method described above.


XPath Bookmark Bookmarklet 01 November 2009

javascript:(function(){
  //inspired by http://userscripts.org/scripts/show/8924
  var s = document.createElement('script');
  s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
  if(typeof jQuery=='undefined') document.getElementsByTagName('head')[0].appendChild(s);
  (function() {
    if(typeof jQuery=='undefined') setTimeout(arguments.callee, 100)
    else{
      jQuery("*").one("click",function(event){
        //http://snippets.dzone.com/posts/show/4349
        for(var path = '', elt = jQuery(this)[0]; elt && elt.nodeType==1; elt=elt.parentNode){
          var idx = jQuery(elt.parentNode).children(elt.tagName).index(elt)+1;
          idx>1 ? (idx='['+idx+']') : (idx='');
          path='/'+elt.tagName.toLowerCase()+idx+path;
        }
        window.location.hash = "#xpath:"+path
        event.stopImmediatePropagation()
      })
    }
  })();
})()

Sometimes you want to link to a certain part of a web page. That’s great and works well if its a nice site that clearly defines anchor tags to link to, but what if there isn’t?

Today I just remembered something and I thought that I saw something earlier with a xpath URL hash. I googled it and couldn’t find anything native to the browser (please correct me if I’m wrong) but found this script: http://userscripts.org/scripts/show/8924 which is basically what I was thinking about. But it was allegedly hard to make those URLs, so I thought why not make a bookmarklet to make linking to those URLs simple? So I quickly hacked this together

javascript:(function(){var a=document.createElement("script");a.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js");if(typeof jQuery=="undefined"){document.getElementsByTagName("head")[0].appendChild(a)}(function(){if(typeof jQuery=="undefined"){setTimeout(arguments.callee,100)}else{jQuery("*").one("click",function(d){jQuery(this)[0].scrollIntoView();for(var e="",c=jQuery(this)[0];c&&c.nodeType==1;c=c.parentNode){var b=jQuery(c.parentNode).children(c.tagName).index(c)+1;b>1?(b="["+b+"]"):(b="");e="/"+c.tagName.toLowerCase()+b+e}window.location.hash="#xpath:"+e;d.preventDefault();d.stopPropagation();jQuery("*").unbind("click",arguments.callee)})}})()})();

(Just drag it over to your bookmarks bar as with any other bookmarklet). To use, just click on the bookmark, and click on the element you want to link to. You should see the URL will update with a xpath hash showing you the copy-pastable link to that element. The code is quite simple and should work on Firefox, Chrome and all the other browsers (maybe even IE) but the ability to auto-scroll and actually use the links is only available to Firefox and potentially Opera and Chrome.

And I’m working on a Chrome Extension for the original userscript (which should work with Chrome’s userscript support, but I’m going to try packaging it as a chrome extension file) But sadly chromium for linux isnt up to speed especially with extension development.

The source can be found http://gist.github.com/223708.

Update: _Fixed the link for the path and added some stuff. Update 2_: Fixed bookmarklet, now scrolls to clicked, executes only once, prevents default


Real Wave Desktop Reader 29 October 2009

Very exciting, I know.

Some people have probably heard of WaveBoard, the application for iPhone and OS X that claims to be a desktop client for wave. However, it’s really just a webkit browser that has some extra triggers for some better desktop integration. But it’s still not a real Wave client. Obviously cause doing so would be insanely hard and since the Client/Server protocol isn’t released, has to be reverse engineered.

So I reverse engineered part of Wave that allows an entire wave to be downloaded and parsed into blips with tree structure.

I’m careful to title this a Wave desktop reader because it only does reading and in the crudest of forms.

http://static-bot.appspot.com/view/?id=googlewave.com!w+Ze3l0mj0A the state of Google Wave does seem to have changed, so this post, from June 30th 2010 at 6:43am (which is what Wordpress says, but I have a hard time believing as I usually am not up that early. But obviously this commentary is from much after, after the great wave-announcement of the end of the year) Anyway, static-bot (which later became wavereader and then anonybot) has deceased in the most horrific way, and while the original Wave is still accessible, it probably won’t be for long (by the time I have my next eruption of nostalgia in a few months), Wave may have already died. So It’s probably best to paste information that was there into this post

For the Google Wave Client/Server protocol documentation, scroll down. For documentation which relates to stuff other than loading a wave (eg, search, playback, etc) See “Google Wave Protocol Documentation”

I spent a bit of time with firebug trying to reverse engineer some parts of Wave’s complex inner workings. I’ve made a offline wave reader using this amazing technology.

This is way different from Waveboard which is an embedded Webkit for a mac application which has some extra bindings for somewhat better desktop integration. It is not a real desktop client (technically, neither is this, but this is closer). This one is based on a reverse engineered part of the Wave client-server protocol (which hasn’t been released, hence reverse engineering).

But first, to make clear the limitations:

  • Does not contain a web renderer so no images, embeds, gadgets, etc
  • Does not maintain an active connection for real time updates
  • Can not submit updates (no OT)
  • Can not list waves
  • Can not create waves

So what can it do? It can read a wave, and create a raw text backup. While not terribly exciting, it’s still progress. It is usually quite a bit faster than Wave at loading things.

**Download (Read Usage below):

** http://dl.getdropbox.com/u/1024307/pywavereader/login.py

 http://dl.getdropbox.com/u/1024307/pywavereader/read.py

**Usage:

** Yay, the fun part. This isn’t very user friendly, so be warned. Unless you’ve used the command line before, it may be insanely scary.

  1. Download the files.
  2. Extract it somewhere
  3. Go to that directory from the command line
  4. Run python login.py USERNAME PASSWORD (Feel free to check the source if you’re afraid its gonna steal your credentials)
  5. Watch as some awesome info piles down and state.txt is generated
  6. Run python read.py WAVEID
  7. This part is weirdish. Since bash (for me) throws random errors and all the waves you can see are on googlewave.com!w+ anyway, a shorter wave ID can be used which lacks the part before the + sign. For example, this wave’s short ID is Ze3l0mj0A
  8. Watch as the wave’s contents are populated onto the command line notably without order (may be fixed eventually, probably not).

Future:

I’m trying to find out how the Wave searches are done and that might be next, soon a mostly usable read-only wave client may be possible. It would be great if people could help in this process.

Licensed under GPLv3 and made in Python (Yeah, commandline ftw). The code is pretty crappy, I’m not especially good at Python but at least it’s cross platform. Probably someone could hook it up to a web server to give access to public Wave content to the general public. Maybe this will spark some future wave desktop client.

And obviously, some time in september, Google will decide to shut down Wave because it was super experimental and rendered this all useless and one day on the cold not snowy monday afternoon of december twenty seventh the year 2010 though the relative epoch really isnt that important, so you could also say that it’s year 40 if you use the unix epoch. And obviously this was not in the initial post.



my ideas for a browser os are coming true. 08 October 2009

Yes, I know that the title is lowercase with a period in the end. It’s totally strange and inconsistent but it feels right.

Google’s working on a notification API for Chrome. Chrome has a Pin Tab feature. Firefox has Faviconize Tab. Gears has a basic privledge escalation (not very fine grained yet). Firefox shows UAC-type privledge escalation for storing data and Geolocation.

To review the old post, this is how I think Chrome OS might work. All user facing applications (all apps other than the window manager, kernel, browser, should be user facing) should operate in Tabs. There are two types of tabs, “pinned” tabs and normal browsing tabs. Pinned tabs are automatically loaded when the user is logged in, are only a tiny icon, but are still always visible.

There will be a unified and consistent way for the user to voluntarily grant privledges to a web site that requests it. It won’t be a catch-all i-totally-trust-this-app-to-every-bit-of-data-on-my-HDD sort of system that most operating systems use. It will be very fine grained, you can grant access to XHRs to a certain domain and huge warnings if the site requires access to the wildcard . The privledges can extend from just accessing the notification API, cross domain XHR, geolocation, and communicating with other tabs. Communication with other tabs should be dome something like cross domain XHR, by allowing the user to grant a tab access to a certain domain/url. I would prefer the permissions dialog to be something less of a modal window that is employed by Gears or the little thing that pops up on the top for Firefox, and more of a icon that subtly appears somewhere that the user can click voluntarily. I think a UAC type stop-what-youre-doing-to-show-a-scary-message dialog is horrible and makes the user incapable of deciding intelligently. If there were a button which would make a box filled with checkboxes and a green/red gradient safety bar with messages, and educating the user that he or she really *does not have to give the site permissions).

A typical application such as a mail notifier would be as follows

<!doctype html>
<html>
    <head>
        <script src="jquery.js"></script>
    </head>
    <body>
        <script>
            if(navigator.requestPermission){
                navigator.requestPermission("xhr","http://site.com/api.json")
                navigator.requestPermission("notify")
            }
            setInterval(function(){
                if(navigator.hasPermission && navigator.hasPermission("xhr","http://site.com/api.json" && navigator.hasPermission("notify")){
                    $("#status").html("YAYNESS! You granted Awesomeness!").css("background-color","green")
                    $.ajax("http://site.com/api.json", {user: $("#userid").val(), pass: $("#pass").val()}, function(data){
                        $.each(data,function(message){
                            notify(message.summary)
                        })
                    })
                }else{
                    $("#status").html("no permissions!")
                }
            },1000);
        </script>
        <div id="status" style="background-color: red">No Permissions, please give me some super-powers?</div>
        <input id="userid" type="text" value="USERNAME" />
        <input id="pass" type="password" value="PASSWORD" />

        # Super Insanely Awesome Notifier!

        This is a super awesome notifier, if this doesnt work then you are an idiot or
        the internet isnt in the future yet. Here is where the about stuff and other stuff
        and stuffs that are stuffs can be put in! And if its not in the future, we all know
        the easiest way out is to blame microsoft for all our problems and say that at
        least google tried fixing our problems but it was all microsoft's fault.

    </body>
<html>

The great thing about the thing above is that it gracefully degrades into a functionless web page if its not running in my imaginary super browser OS of the future. It’s quite easy to make and requrires no API documentation (or at least for me since there’s only 2 API calls and I just totally made them up). It’s similar to the Jetpack and Chrome extensions idea in which the developer has little to learn for making an extension, but lowers the barrier even more: There’s nothing to learn. Whats above is just a standard html5 web page with jQuery. The only thing different is the hasPermission and requestPermission functions which don’t exist so I made them up. It’s not that it has anythign different, its just that the developer is thinking of the web page as a background process instead of thinking of it as static content.

It’s the same idea is Google Wave, it could be a Wiki, IM, or Email, all depending on how you think about it.

For the permissions system, it really doesn’t matter how it’s implemented but it really has to eventually be done. The web is getting new abilities, and things like Geolocation, Local Storage, Offline SQL DB, Saving to disk, Reading files, and such all require special permissions (You wouldn’t want any random site uploading your SAM file from your hard disk). Each of them have their own modal type dialog which queries the user if they want to grant the permission. Eventually, things like Audio from microphone, Video from webcam, cross-domain XHR, and other peripherals like toasters get their own implementation, requiring special user granted permissions, an application may want 3 or more permissions simultaneously, it becomes very obvious a more consistent UI is needed for delegating these abilities.

For the interface, its easier for both users and developers. Developers dont need to do something like write complex xml manifests showing which location the file which shows the about text is and which one is the help. Here, you just have a web page that you put stuff in. Since the interface is the page. The tab/web page is a unified Install Page, Help Page, About Dialog, Credits, Donation Box, everything, but unified (sure you could split it into multiple pages if you wanted like with any other web page). Installing is just right-clicking on the tab and selecting the menu button that says “Pin Tab”. If the application requires special privledges, the user can click the icon which show you what the site wants, and you just check off whatever you feel the site deserves.