How to Download a Soy Sauce Warrior

If you're running Firefox, you can use the UnPlug extension, which lists all the embedded media in a page, along with download links. Because I use multiple browsers, I decided to find another way.

First, a confession: I have a strange fascination with the Yogatori site, which features a wacky video of Kikkoman, the Soy Sauce Warrior. Although the Kikkoman video is a Flash .SWF file that could play at any size, Yogatori presents it in a puny window, diminishing the punch. (See Figure 1.) I wanted to save the Flash file to my desktop so I could view it in a bigger window, but right-clicking on a Flash movie pops up a playback menu, not the normal download link. What to do?

Fig. 1: The movie in its original context (top) lacks the punch you get by opening the .SWF file directly (bottom).

In the past, I would search the page's source code for ".swf" (see Figure 2), append the name of the SWF file to the page's directory path (http://yogatori.com/movies/kikkomaso/ in this case), and then paste the resulting URL into Google to generate a download link. Mysteriously, that method stopped working recently, so I set out to make a bookmarklet to emulate it.

Fig. 2: A quick way to locate embedded media files is to search the page's source code for the media file's extension, such as .mov or .swf.

Bookmarklets are single-line JavaScripts you can run from your browser's address bar or, better, save as a bookmark (aka favorite) so you can invoke them with a single click. There's a big, albeit elderly, collection at Bookmarklets.com. One of my favorite bookmarklets is the Delicious Play Tagger, which adds a Play/Stop button to all MP3 links on a page.

My first version of the downloader bookmarklet simply prompted the user to enter the file path and then shot it back out in a link, using the document.write() method. Here's the script, with line breaks for clarity:

javascript:thePath=prompt('Please enter the file path', '');
document.write('<h3><a href=\'' + thePath + '\' title=\''+ thePath + '\'>
Right-click to download the file<\/a><\/h3>');document.close();

Here's the above code as a bookmarklet:

• Try it—replace page

  (Enter a URL like ../../images/cassette-clear.jpg at the prompt. The browser automatically fills in the beginning of the path based on the page you're viewing when you trigger the script. In this case, that's http://www.oreillynet.com/digitalmedia/blog/.)

That worked, but it replaced the original page content with the link. I then tried making the link appear in a pop-up window, but had problems with it disappearing behind the main window in Firefox, despite my using the focus() command.

Running the bookmarklet prompts the visitor for the file name. (Note that the domain name is assumed.) The Kikkoman animation apparently began as ASCII art.

So, taking a cue from Play Tagger, I tried using the document.createElement() method to write the link directly onto the page in a little yellow box. At first, the box appeared at the very top or bottom of the page, where it was often out of view if the page had been scrolled. I discovered that setting the position of the box to position:fixed anchored it to the window (aka viewport) rather than the document.

javascript:(function(){var v=document.createElement('div');
v.setAttribute('style','position:fixed;left:0px;top:0px;z-index:100;
background-color:#ff6;font-weight:bold;border:3px solid #000;padding:16px;
text-align:center;');var o=document.createElement('a');
o.setAttribute('href',prompt('Please enter the file path',''));
o.appendChild(document.createTextNode('Click to open the file. Right-click
to download it.'));v.appendChild(o);document.body.appendChild(v)})()

• Try it—yellow box (Enter something like ../../images/brown-pipes.jpg at the prompt.)

Curses! It didn't work in Internet Explorer, which I learned doesn't support the position:fixed style. I also wanted to add a little X to close the yellow box, but I was nearing the limits of my JavaScript knowledge. So I decided to scale back to a version of the second technique that would open the downloading link in a new window instead of a pop-up. As a bonus, I added a function to identify the file by extracting its extension:

javascript:var thePath = prompt('Please enter the file path',''); 
var theExt = thePath.substr(thePath.lastIndexOf('.')+1, 3).toUpperCase(); 
var linkwindow = window.open('','DL'); 
linkwindow.document.write('<html><body bgcolor=\'#999999\'>
<h3 align=\'center\'><a href=\'' + thePath + '\' title=\'' + thePath + '\'>
Right-click to download<br \/> the .' + theExt + ' file<\/a><\/h3>
<\/body><\/html>');linkwindow.document.close();

Here's the code as a bookmarklet:

• Try it—new window

  (Enter something like ../../images/hello-keyboard.jpg at the prompt.)

Interesting Discoveries

Notice what happens when you enter a YouTube link like http://www.youtube.com/v/TUl1DFBKdv8 and click it (rather than right-clicking it):

• Try it—YouTube link

First, the download link incorrectly identifies the file as a ".COM" file because I wrote the JavaScript to grab the first three characters after the last period in the URL. But the interesting thing is that clicking the link opens the video in a resizable window; that's handy for watching Flash vector files like kikkoman.swf that scale up perfectly. Also notice that downloading the linked YouTube file give you just the player shell, not the whole movie.

Show You, Show Me

My downloader bookmarklet is not nearly as sophisticated as UnPlug, but it works in multiple browsers and I learned several new JavaScript techniques while developing it. And now...it's show-you time.

Kikkoman (right) battles Sugar Man among other condiments. The Japanese word for soy sauce is shoyu, pronounced "show you," hence the video's theme song, "Show You, Show Me."

Watch or download it.