We write cross-browser UserJS. Example # 1: we change the Yandex logo

Firefox, Opera, Safari and Chrome support UserJS. All in different ways. I plan to write a series of articles about how to write scripts for these browsers. On the day one by one.

Today we will change the Yandex logo to Google. Such a useless script.


')
yandex-with-google-logo.user.js :

  // == UserScript ==
 // @name Google logo on yandex.ru
 // @include http://www.yandex.ru/*
 // == / UserScript ==

 var logo = document.querySelector ("img [src $ = 'logo.png']");
 if (logo) {
   logo.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
   logo.removeAttribute ('height');
 }

This UserJS works in the latest versions of Firefox, Opera, Safari and Chrome. But in Opera there is a nuance: the logo variable has become available from the web page.



If the logo variable had already been defined on the page, then our script would redefine it. This can be avoided by wrapping the code in an anonymous function. yandex-with-google-logo2.user.js :

  // == Userscript ==
 // @name Google logo on yandex.ru
 // @include http://www.yandex.ru/*
 // == / Userscript ==

  (function () { 

  var logo = document.querySelector ("img [src $ = 'logo.png']");
   if (logo) {
     logo.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
     logo.removeAttribute ('height');
   } 

  }) (); 

Why only in Opera the variable became global? In Opera, the window in the UserJS == window page.

In Greasemonkey, the window is an XPCNativeWrapper . This object is, as it were, outside the window of the web page and the web page scripts do not have access to it. The access to the window of the web page is done through window.wrappedJSObject (aka unsafeWindow ).



In Safari Greasekit, the window UserJS == window window, as well as in Opera. However, the variables remain local, as if the script is already wrapped in an anonymous function.

Continued: Example number 2: override alert ()