Day 10: User JavaScript

You may remember from Day 5 that we talked about Opera’s JavaScript options, and there was a space there for something called “My JavaScript Files” which I promised we would talk about later. True to my word, we’re going to spend some time today talking about another compatibility feature of Opera 8.

You may have also noticed that the past few days have revolved around making sure that Opera is able to access the entire web. First we looked at Fit to Window Width, which is a very simple way of “fixing” sites which don’t display properly. Then yesterday we looked at the ua.ini file which lets Opera pretend to be another browser, which will fix even more sites.

But what if that’s not enough? What if the site offers some really cool functionality that doesn’t seem to work? Or what if some über-evil (or über-clueless) web designer has gone out of his/her way to block Opera beyond just user-agent sniffing?

Well, you could try disabling JavaScript (press F12 and turn it off). But many sites require JavaScript. So what should you do?

The answer is “User JavaScript”. If you remember our discussion about user style sheets, you are familiar with the concept of replacing what the author originally intended with what the user wants. User JavaScript works the same way. It either replaces or adds to what is available on a website.

How do I learn more about User JavaScript?

Your humble author is no JavaScript expert either. In fact I am still learning about this cool new feature myself. The best thing I can do is leave open comments for others to add aditional information, and point you do some of the existing websites which go into much better detail about how to use User JavaScript:

<

dl>

Note that Opera’s User JavaScript is similar to Firefox’s Greasemonkey extension (and many Greasemonkey scripts will work in Opera, there are also differences which are worth noting. And before I start getting comments that Firefox had this first, I’ll accept that there was a Firefox extension which was publicly available first, yes. However, unlike some people, you won’t see Opera trying to pretend that they have invented everything.

User JavaScript Examples

Rather than provide specs or a tutorial, we’ll focus on some functional examples.

Quick Test

For our first example, we’ll create a user JavaScript file that updates Opera’s status bar.

1. Using your favorite text editor (eg., Notepad), create a new file called status.js in your user JavaScript directory.
2. Next, add the following JavaScript code to your status.js file:

window.status = "User JavaScript is enabled";

This one line of JavaScript code sets Opera’s status bar to display “User JavaScript is enabled” — which may be useful for debugging purposes.

NOTE: Because this example does not check the page URL, this code gets applied to all pages loaded by Opera — except secure (https: protocol) and Opera (opera: protocol) pages. Of course, since this window.status gets set so early in the page loading process, it can easily get wiped-out by subsequent window.status assignments.

Shockwave.com

The Shockwave.com web site provides a nice selection of games created for the Macromedia Shockwave player. Of course, to play these games, you must have the Shockwave plug-in installed: http://sdc.shockwave.com/shockwave/download/download.cgi

Unfortunately, the detection script used on Shockwave.com for their Shockwave Player plug-in doesn’t play well with Opera. We can fix that!

1. Using your favorite text editor (eg., Notepad or TextEdit), create a new file called shockwave.js in your user JavaScript directory.
2. Next, add the following JavaScript code to your shockwave.js file:

if (location.hostname == "www.shockwave.com") {


document.addEventListener("load",
function() {
if (!game) return;
if (!game.url) return;
for (var i=0; i<document.links.length; i++) {
if (document.links[i].href != "javascript:play(game)") continue;
document.links[i].removeAttribute("onClick");
document.links[i].href = "javascript:window.open('http://www.shockwave.com/contentPlay/download/popup_downloadprompt.jsp?returnurl=" + escape(game.url) + "&id=" + game.keyword + "&width=" + game.winsize[0] + "&height=" + game.winsize[1] + "&site=" + game.site + "', 'asw_d" + (Math.floor(Math.random() * 100000)) + "', 'width=336, height=215');void(0);";
break;
}
},
false);
}

NOTES:

<

ul>

Happy gaming!

AtomFilms

The AtomFilms.com web site provides a nice repository of short films and animations created for the Macromedia Shockwave player. As luck would have it, AtomFilms.com was created by Shockwave.com, so basically, the same fix for Shockwave.com applies here, as well!

1. Again, using your favorite text editor (eg., Notepad, TextEdit), create a new file called atomfilms.js in your user JavaScript directory.
2. Next, add the following JavaScript code to your atomfilms.js file:

if (location.hostname == "www.atomfilms.com") {


document.addEventListener("load",
function() {
if (!film) return;
if (!film.url) return;
for (var i=0; i<document.links.length; i++) {
if (document.links[i].href != "javascript:play(film)") continue;
document.links[i].removeAttribute("onClick");
document.links[i].href = "javascript:window.open('http://www.atomfilms.com/contentPlay/download/popup_downloadprompt.jsp?returnurl=" + escape(film.url) + "&id=" + film.keyword + "&width=" + film.winsize[0] + "&height=" + film.winsize[1] + "&site=" + film.site + "', 'asw_d" + (Math.floor(Math.random() * 100000)) + "', 'width=336, height=215');void(0);";
break;
}
},
false);
}

NOTES:

• The first line in this file ensures the remaining JavaScript code only gets executed while visiting pages at http://www.atomfilms.com/
• The anonymous function being created is a custom event listener for the document.onload event.
• The first few lines of our anonymous function check for the existence of a film object and a film.url property (created by the AtomFilms web site).
• If the film object is found, all the links in the current document are scanned, looking specifically for the orange “Watch Film” button with the href: javascript:play(film)
• If the href is found, the existing onclick event handler is removed from the button, and the href attribute is set to open a new window with all pertinent information. FYI, this information was obtained from http://www.atomfilms.com/js/playfilm.js

Cook some popcorn and enjoy your films!

Caveats

While coding your user JavaScript files, here are some potential caveats to keep in mind:

• User JavaScript does not get loaded for secure pages (https: protocol).
• User JavaScript does not get loaded for Opera pages (opera: protocol).
• Websites can change their code at any time. As such, your user JavaScript files may break if they contain dependencies. As good programming practice, be sure to check for the existence of objects, functions, and variables before using them.
• Be sure to include some conditional statements or @include/@exclude directives near the top of your user JavaScript file to ensure the code only gets executed for the sites, folders, and/or pages you want. Otherwise, many user JavaScript files may impact overall page-loading performance.
• If you want to include non-ASCII characters or symbols in your user JavaScript, try emitting a <script> block that references an external JavaScript file for the src=”” attribute, and be sure to include a charset=”” attribute in the <script> block. Otherwise, use HTML entities, or obey the encoding of the original page.