User Javascript in Opera 8 beta 3

“This is brilliant”:http://my.opera.com/hallvors/journal/44. Opera 8 beta 3 introduces User Javascript. Firefox users will immediatly nod, and say “Greasemonkey”. I will nod, and say “Aye!”. Let’s explore what User Javascript can do for you.
*Update:* If you came here looking for Opera 8, you’d be much better off reading my piece on “Opera 8 final”:http://virtuelvis.com/archives/2005/04/opera-8


Enabling User Javascript is easy enough, just modify your opera6.ini file, by adding the two lines as instructed:
bc. [User Prefs]
User JavaScript=1
User JavaScript File=c:\tools\user.js
You might want to replace c:\tools\user.js with the path where you have created your user JavaScript.
User Javascript can do anything you can do with regular JavaScript. Hallvord has two fine examples in his announcement, and I’ll add some more here.
h3. GMail
I dislike GMail’s basic interface. So much I “abuse CSS”:http://virtuelvis.com/archives/2005/03/opera-gmail to get GMail to redirect to the regular GMail.
Instead of having to mess with CSS, I can now do this:
bc. if(window.location.href.indexOf(‘gmail.google.com’) != -1){
document.addEventListener(‘load’, function(ev){
if (document.getElementById(‘bm’)) {
window.location = “http://gmail.google.com/gmail?nocheckbrowser”;
}
}, false);
}
(Note that this script had a small typo, a missing end paranthesis when I originally wrote it. (Yes, I write code in MT entries from time to time)).
h3. Blockquotes with cite
Inspired by a comment by Roberto, on “Phil Ringnalda’s blog”:http://philringnalda.com/blog/2005/03/semantic_or_useful.php#009673 I’ve written a tiny script to add clickable links to blockquotes that have the cite attribute set:
bc. document.addEventListener(‘load’, function(ev){
quotes = document.getElementsByTagName(‘blockquote’);
for (i = 0; i < quotes.length; i++) { cite = quotes[i].getAttribute('cite'); if ((cite) && (cite != "")) { if ( (cite.match('http://', 'i')) || (cite.match('ftp://', 'i')) ){ newlink = document.createElement('a'); newlink.setAttribute('href', cite); newlink.setAttribute('title', ('Go to ' + cite)); if (cite.length > 42) {
cite = cite.substring(0,21) + ‘\u2026’ + cite.substring((cite.length-21));
}
newlink.appendChild(document.createTextNode(cite));
newdiv = document.createElement(‘div’);
newdiv.className = ‘source’;
newdiv.appendChild(document.createTextNode(‘\u2014 ‘));
newdiv.appendChild(newlink);
quotes[i].appendChild(newdiv);
} else {
newdiv = document.createElement(‘div’);
newdiv.className = ‘source’;
var exp = new RegExp(‘%20′,’g’);
cite = cite.replace(exp, ‘ ‘);
newdiv.appendChild(document.createTextNode(‘\u2014 ‘ + cite));
quotes[i].appendChild(newdiv);
}
}
}
}, false);
h3. Adding style hooks
While Javascript can be handy sometimes, it still doesn’t replace CSS. If there’s a site that you hate the looks of, but it lacks sufficiently unique styling hooks, this snippet will add an id to all @@ elements that doesn’t have one, so you’ll have an easy way of adding CSS rules:
bc. document.addEventListener(‘load’, function(ev){
if ((document.body) && (!document.body.hasAttribute(‘id’))) {
document.body.setAttribute(‘id’, location.host.replace(/^www\./,”).replace(/^\d/,’_$&’).replace(/\./g,’-‘));
}
}, false);
h3. More to come
I will be writing some more scripts, as I get more of a feeling with exactly what I can (and want to) do with this.

9 Comments

  1. Jor

     /  2005-03-16

    You can actually add cite support to blockquotes using Opera’s CSS extensions, without Javascript:
    [cite] {
    -o-link : attr(cite);
    -o-link-source : current;
    cursor : pointer;
    }

  2. But you can’t, since that CSS extension is not supported for HTML or the XHTML namespace.

  3. By the way, on #opera people mentioned Gmail is no longer doing the sniffing for Opera and gives Opera users the default interface.

  4. What seems to be happening with GMail is this:
    * If you identify as Opera (F12 -> Identify As Opera), you are sent to the basic interface.
    * If you identify as Internet Explorer or Mozilla, you are sent to the full interface.
    Browser sniffing is inherently stupid.

  5. bq. “If there’s a site that you hate the looks of, but it lacks sufficiently unique styling hooks, this snippet will add an id to all elements that doesn’t have one, so you’ll have an easy way of adding CSS rules.”
    So this is the same as Gecko’s per-site CSS capability? (Only with more possibilities!)

  6. Chris, the Gecko implementation will use a @-moz-document rule:
    bc. @-moz-document url-prefix(http://virtuelvis.com/){
    body {
    font-size: 1.2em;
    }
    }
    The script snippet will simply add IDs to the @@ element, so you’ll have to use that instead:
    bc. body#virtuelvis-com {
    font-size: 1.2em;
    }
    So, in terms of CSS-capabilities, the two versions are roughly equal – you are however right about extended capabilities. Suppose we rewrote the code a little:
    bc.. document.addEventListener(‘load’, function(ev){
    if ((document.body) && (!document.body.hasAttribute(‘id’))) {
    if (_opera_documentHasBadWords() ){
    document.body.setAttribute(‘id,’badsite’)
    } else {
    document.body.setAttribute(‘id’, location.host.replace(/^www\./,”).replace(/^\d/,’_$&’).replace(/\./g,’-‘));
    }
    }
    }, false);
    function _opera_documentHasBadWords(){
    // code to determine whether the current site
    // is family-friendly or not.
    }
    p. … and we add something like this to our user/browser CSS:
    bc.. body#hasBadWords * {
    display: none !important;
    }
    body#hasBadWords {
    content: “This page is not family friendly” !important;
    }
    p. There are endless possibilites. This is just one.

  7. Peter Unold

     /  2005-03-26

    Here’s a function to make your own site more readable.. 🙂

    [ Ed. Note: Code removed ]
    
  8. Peter, while users are free to use any means they wish to remove Google ads, please understand that I cannot feature scripts that in any way alters Google delivered content on this site.

  9. Peter, one more thing: If you don’t want to see advertisements – I’d recommend that you instead “subscribe”:http://virtuelvis.com/help/xml.html to any of the full-text newsfeeds: _They are ad- and design free, and will remain ad-free for the foreseeable future._