The Chrome extension API doesn’t allow you to add items to the context menu (yet?), so after installation, there is an icon next to the address bar which you can click to display the source code. If you don’t like the default Mozilla-like color scheme of syntax highlighting, you can go to the Options page and choose the Desert one instead.

Download

You can install it either from the Google Chrome extensions gallery or as a bookmarklet:

• View Selection Source as a Google Chrome extension
• Bookmarklet version (displays the code in a new window and has no configuration options)

Screenshots

Custom Color Schemes

If you feel like creating a new color scheme, here is how the CSS code looks like. Hope the class names are descriptive enough:

#desert body {
	background: #333;
	color: #fff;
}
#desert .tag {
	color: #BDB76B;
}
#desert .entity {
	font-weight: bold ;
}
#desert .tagName {
	color: #BDB76B;
	font-weight: normal;
}
#desert .attrName {
	color: #BDB76B;
	font-weight: normal;
}
#desert .attrValue {
	color: #FFA0A0;
	font-weight: normal;
}
#desert .quote {
	color: #FFA0A0;
	font-weight: normal;
}
#desert .comment, .comment *  {
	color: #87CEEB !important ;
	font-weight: normal !important ;
}
#desert .cdataMark {
	color: #ff6600;
	font-weight: bold;
}
#desert .cdataContent, .cdataContent *  {
	color: #ff6600 !important ;
	font-weight: normal !important ;
}

Once you’ve created one, don’t forget to send it to me so that I can build it into the extension!

The implementation is almost 100% complete. It can even handle such things as unicode notations. For example, the following selector is processed exactly as per the spec:

:not(:root):not(form):first-child:not(:lang(en)) > div:first-child ~ div

The library uses standard DOM methods only, which means that there isn’t any pre-conversion of the CSS selector to an XPath expression as other such libraries usualy do. The script hasn’t been much optimized in term of speed and doesn’t work in IE. The main and only goal was to create an implementation that will follow the specification as much as possible and work in the Gecko family browsers.

Download: Selectors.js (licence Creative Commons Attribution 3.0 Unported).

HTML version with syntax highlighting.

You can try the library directly from your browser (unless you are using IE) on a demo page.

An application to the official W3C’s CSS3 selectors test suit is also available. Note that when performing those tests all !important statements are being ignored.

Try it right now!

To see how it works,  select any text on this page, choose a color scheme of the syntax highlighting (or keep the default one) and hit the button below:

View Selection Source!

Three installation methods

There are three ways to install the script. They differ in how complicated the installation is, how the script is integrated into Opera’s user interface and in the possibility of further customization.

1. User JavaScript
2. Bookmarklet in a menu
3. Plain bookmarklet

1. User JavaScript

This method is a little bit complicated but offers more comfortable usage. You will be able to call the script from the document context menu and also have the possibility of customizing it.

Step 1: Enable User JavaScript in Opera

To enable user JavaScript, use Tools > Preferences > Advanced > Content > JavaScript options, and select the directory where you want to store your User JavaScript files. Opera will load all the files in the specified directory whose names end with “.js” and use them as User JavaScript files.

Step 2: Install the “View Selection Source” User JS

Download the “View Selection Source” User JS file and save it into the in previous step created directory (you can also find the location in the opera:about page – llook for User JavaScript files).

Step 3: Add the “View Selection Source” item to the Opera’s context menu

We need to locate the ini file with your menu definition. Go to the toolbar preferences: Tools > Preferences > Advanced > Toolbars. If there is only an “Opera Standard” item in the ‘Menu Setup’ box, select it and click the Duplicate button. If you can see more than one item there, do nothing.

Now, go to the opera:about page and look for ‘Opera directory‘. Go to that directory and open a subdirectory called menu and find a file ending with “.ini” and open it in your favorite text editor (such as Notepad, Vim, Textmate, jEdit, etc). Before editing stop Opera please.

In the INI file, find a section called Hotclick Popup Menu and append the following code at the end of that section:

Item, "View selection source"="Go to page, "javascript:opera.getSelectionSource()""

Finally the section should look similarly to this:

[Hotclick Popup Menu]
Item, 50872         = Copy
Item, 67652         = Copy to note
Platform Win2000-Unix-Mac, Feature Voice, Item, 70494 = Speak selection
--------------------1
Item, 65184             = Hotclick search, 200
;Submenu, 291920, Search with menu
Submenu, 291920, Internal Search With
Item, 65187         = Hotclick search, 50
Item, 65188         = Hotclick search, 51
--------------------2
Submenu, 291960, Translate menu
;Item, 65186        = Hotclick search, 52
--------------------3
Item, 67394             = Go to page, "%t"
Item, 65218         = Send text in mail
--------------------4
Item, "View selection source"="Go to page, "javascript:opera.getSelectionSource()""

Finally, the result should look like the following picture shows:

2. Favelet in the menu definition file

This is very similar to the previous variant, but any modification of the script becomes difficult since the code is compressed. The script will also be integrated into the context menu, but you don’t need to enable user JavaScripts. Please follow the steps 1 and 3 from the previous installation method, but In the third step don’t insert the code noted there, use the code from this file instead.

3. Classical bookmarklet

This is the simplest way to install the script. You’ll just create a new bookmark and insert the whole JS code into the ‘Address field’. When you want to call the script, just click the created bookmark item in the ‘Bookmarks’ panel. The code for this use is here.

Customization

If you’ve installed the script as a User JavaScript, you can choose one from three predefined color schemes now or easily define you own new one. For example, the definition of the “Mozilla” color scheme looks as follows:

schemes.mozilla = {
    background:     'White',
    fontFamily:     'monospace',
    fontSize:           '12px',
    stringColor:        'Black',
    bracketColor:       'Black',
    tagNameColor:       'Purple',
    tagNameBold:        'bold',
    attrNameColor:      'Black',
    attrNameBold:       'bold',
    attrValueColor: 'Blue',
    attrValueBold:      'normal',
    quoteColor:     'Blue',
    quoteBold:      'bold',
    commentColor:       'Green',
    commentBold:        'normal',
    cdataMarkColor: '#ff6600',
    cdataMarkBold: 'bold',
    cdataContentColor: '#ff6600',
    cdataContentBold: 'normal'
}

Another customization is possible by the conf variable, the default values are:

var conf = {
 
    // window settings
    wWidth:            700, // window width
    wHeight:           300, // window height
    wTop:              100, // window position Y
    wLeft:              50, // window position X
    closeOnKeystroke: true,
    closeKeyCode:       27, // ESC
    toggleWrapKeyCode: 13, // ENTER
 
    // syntax highligthing settings
    scheme: schemes.desert // set to the your prefered color scheme
 
}

Licence

This script is free software, and you are welcome to redistribute and modify it under the terms of the GNU General Public License (either version 2 or any later version).

If you have any questions, feel free to ask in the comments.

Update

Now available also as a Google Chrome extension.

• Download anchorize.js

All of the following URLs are correctly converted into clickable links when using anchorize.js:

• http://example.com/
• http://192.160.1.1/~root
• https://foo.example.com/bar?aaa=eee&yyy=ooo
• ftp://example.com/foo
• http://en.wikipedia.org/wiki/Term_(language)
• (http://example.com/)
• www.example.com/beer[]=pilsner

If Anchorize.js causes some problems on a particular website or you just want to disable it for a specific domain (e.g. in my instalation I’ve disabled it for Google Search), use an @exclude directive as described in Opera documentation.

The transformation is done using XSLT (the stylesheet is embeded into the JavaScript file), so that it’s much faster than i.e. the first XML tree user JavaScript (written by Mark “Tarquin” Wilton-Jones) even with large documents.

See Pretty XML tree sample output.

Note that the formatted output allows you to fold elements – just click either the opening or the closing tag of an element and its content will be replaced with three green dots; click again to unfold it.

If you want to know which namespace particular element belongs to, just hold your mouse over it and the URI of the namespace appears in a few seconds.

Download

• pretty-xml-tree.js – the user JavaScript file
• pretty-xml-tree.xsl – the original XSLT file (you most likely don’t need this file, it’s here in case you want to study it)

Screenshot

Update

Some guys’ve created a Chrome extension based on my script – XML Tree for Chrome. I really like the idea to allow search in the tree by XPath expressions!