PUBLOG

View Selection Source for Opera

The ‘View Selection Source’ is a simple JavaScript bookmarklet (favelet) or a User JavaScript which allows you to see the HTML source of any part of a page, which is very useful for web developers. It brings to Opera the same functionality as Firefox has by default.

Try it right now!

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

Mozilla
Desert
Opera

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

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 , 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. JavaScript configuration

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: . If there is only an “Opera Standard” item in the box, select it and click the 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:

View Selection Source in menu

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.

Create favelet

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.

35 Responses to “View Selection Source for Opera”

brandon Says:
March 3rd, 2009 at 6.21
I followed all the instructions perfectly. Have done it all right. But when I right click some highlighted text and click “view selection source” nothing happens at all. NOTHING
Jakub Says:
March 3rd, 2009 at 10.40
Brandon, which method of installation have you chosen?
brandon Says:
March 4th, 2009 at 3.55
@Jakub
The first method. I also had a friend try it out and couldn’t get it to work. I’m not doing anything wrong (that I know of)
brandon Says:
March 4th, 2009 at 3.58
Oh yeah, I’m using 9.50 if that matters..
Jakub Says:
March 4th, 2009 at 13.11
I’ve noticed that the code on this page wasn’t completely visible (due to overflow: hidden, that’s fixed now). Please make sure that the item in your menu.ini looks exactly as follows:

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

If the problem remains, try to select some text on any page, put this code into Opera’s address bar and hit ENTER:

javascript:opera.getSelectionSource()

If a window pops up, you have a mistake in the menu definition. If not, than the problem must be somewhere else. Can you see any JavaScript errors in Opera’s error console (Tools > Advanced > Error Console)?
Opera un “View Selection Source” | deelis.lv Says:
March 10th, 2009 at 22.19
[...] atrodams šeit un vispār citas lietas šad tad var uzzināt skatoties šeit. Komentārs (RSS) [...]
Father Luke Says:
April 7th, 2009 at 0.18
Thank you for the Bookmarklet!

- –
Okay,
Father luke
David Says:
April 21st, 2009 at 9.08
Your “View Selection Source” user js is what I have been looking for. Thank you very much.

But there are two issues.

(1) I am from Taiwan. “View Selection Source” does not work on the Taiwanese Google site, no matter I choose English or Chinese webpage interface. When I select some text and apply “View Selection Source”, nothing happens. The following is an example:

http://www.google.com.tw/advanced_search?hl=en

But, strangely, “View Selection Source” has no problem with the main Google site. The following is an almost identical webpage as the above one. But “View Selection Source” can work on it.

http://www.google.com/advanced_search?hl=en

(2) When “View Selection Source” opens the window to display the selection’s HTML source, there is always a part of source that’s automatically highlighted. See this picture:

http://www.geocities.com/phoenixurge/Pre-highlighted.jpg

Can I prevent the automatical highlighting from happening?
Jakub Says:
April 21st, 2009 at 15.48
@David

(1) I cannot reproduce the issue. Could you please post here error messages from Opera’s JavaScript console if there are any?

(2) The selected text in the new window is exactly the same as the one which has been selected on the original page. It’s intended to help you to find the part of the code you are interested in. If you really want to disable this feature you can do that by removal of the following code from the UserJS file:

// select it
var newRange = win.document.createRange();
newRange.setStart(set.startContainer, set.startOffset);
newRange.setEnd(set.endContainer, set.endOffset);
win.getSelection().addRange(newRange);
newRange.detach();
David Says:
April 23rd, 2009 at 1.39
Jakub,

(1) I tried “View Selection Source” again on the Taiwanese Google “Advanced Serach” page (English) I had mentioned last time:

http://www.google.com.tw/advanced_search?hl=en

The Opera Error Console did record an error, as follows:

JavaScript – http://www.google.com.tw/advanced_search?hl=en
Javascript URL thread: “javascript:opera.getSelectionSource()”
Error:
name: TypeError
message: Statement on line 1: Type mismatch (usually non-object value supplied where object required)
Backtrace:
Line 1 of unknown script
opera.getSelectionSource()
stacktrace: …

I also tried “View Selection Source” again on the almost identical “Advanced Search” page on the main Google sie, which has no problem. The Opera Error Console did not record any error.

I use Windows 98 Second Edition (Traditional Chinese) and Opera 9.62 Build 10467.

FYI, using Opera, from time to time I encounter font problems (Simplified Chinese and Western characters and symbols not shown, etc). For example, Opera does not display Cyrillic (and a few other languages), no matter which font I choose in the “International Fonts” dialoge, though there are indeed proper fonts listed to be chosen for Cyrillic, such as Arial and Times New Roman.

The above-mentioned error message is not comprehensible to me. I know nothing about computer programming, though I can figure out how to edit your User Javacript and choose my desired configuration.

(2) Now I see what the automatically highlighted part is! I admit I did not look closely.

But… now I also notice that “View Selection Source” not only display the source of the selected part, but also display the source of other parts which surround the selected part.

Can “View Selection Source” be editted to show only the source of the selected part?
Jakub Says:
April 26th, 2009 at 23.25
David, the script works fine form me on that page. It think it might have been a bug which sometimes randomly occures to me too and which I think is a bug in Opera itself.

(2) The script selects the first common ancestor element of all the selected ones. It’s done like that in order to provide sufficient context for understanding of the structure of the selected part. This is exactly how Firefox does it and it would be quite complicated to change the behaviour.
Lex1 Says:
April 28th, 2009 at 8.58
@David
> to show only the source of the selected part
I tried to make similar (http://lexi.ucoz.ru/buttons.html -> Source), but it has the some lacks.

@Jakub
What’s about version as opera button?
David Says:
May 2nd, 2009 at 3.24
Lex1,

Your “View Source” button works well on the above-mentioned Taiwanese Google site, with both Chinese and English interfaces.

Thank you.
Jakub Says:
May 12th, 2009 at 14.17
@Lex1 A button version would be definitely nice, I’ve tried to create one, but without success. I didn’t know how to escape comas in command arguments. If you know how to do that, please let me know.
Lex1 Says:
May 23rd, 2009 at 18.04
For the button, you should use only single commas «’»(and \x22 or \’). That will demand a few handwork.
chromax Says:
July 26th, 2009 at 22.50
Works great, should be add by the opera team permanently!
fredi Says:
July 29th, 2009 at 17.25
The web developer menu can do something similar to this.
3433 Says:
December 14th, 2009 at 6.09
hey… I just made a button and works perfectly, just copied the script to my script folder and then used the following comand on the button maker

Go to page, “javascript:opera.getSelectionSource()”, “View source”, “View”
Heckfy Says:
January 31st, 2010 at 5.45
The variant with context menu item does not work for me…
I’ve done everything exactly as you said but it just doesn’t work
could anybody help me pls to solve what a problem i have?
Jakub Says:
January 31st, 2010 at 5.48
Heckfy, what exactly is the problem? The menu item doesn’t show up or it does nothing when you click it?
Heckfy Says:
January 31st, 2010 at 6.00
Oh, big thank you for such quick response! I’m impressed.
But I’ve already solve it.
Don’t know how but my browser saved the script file above with wrong extension, that was the problem.
Thanks again.
Jakub Says:
January 31st, 2010 at 6.04
Haha, no problem, I just happened to be by the computer Glad to hear that you’ve solved it.
Heckfy Says:
January 31st, 2010 at 6.06
can you pls help with another thing i’m trying to do?
i’m trying to do this in the context menu
Item, “google translate En-Ru”= Open url in new page, “http://translate.google.com/#en|ru|%t”
but when new page opens i see that the url in the address bar contains %t instead of pasted text i selected.
What am I doing wrong? and how to achieve it in another way if that was i chosen is impossible?
thanks in advance
Heckfy Says:
January 31st, 2010 at 6.11
It would be nice if you would happened to be by the computer again goodman Jakub!
Jakub Says:
January 31st, 2010 at 6.12
I’m not sure but I think that this part:
```
Open url in new page, “http://translate.google.com/#en|ru|%t”
```
should be surrounded by another pair of quotation marks, so it becomes:
```
"Open url in new page, "http://translate.google.com/#en|ru|%t""
```
Heckfy Says:
January 31st, 2010 at 6.20
it doesn’t depend on this
i’ve tried it also, the same result.
looks like just replacement of %t works only for “Go to page” command.
but it’s kind of strange for me… i thought it works for any command.
But i don’t want to use Go to page command, i want it opens in a new window )
Jakub Says:
January 31st, 2010 at 6.28
Hm, I really don’t know. If it works with “Go to page”, then you can just hold SHIFT when clicking the item and Opera will open it in a new tab. I suggest that you ask at Opera forums – http://my.opera.com/community/forums/forum.dml?id=28
Heckfy Says:
January 31st, 2010 at 6.31
i even did not think about holding Shift. It works! )
thanks for the link, i’ll ask.
thank you very much for the help!
Heckfy Says:
January 31st, 2010 at 6.56
Jakub, I found solution!
The code for the task I tried to solve must look like:

Go to page, “javascript:void( window.open( ‘http://translate.google.com/#en|uk|’ + ‘%t’ ) )”

The key is using ‘void’ here.
thank you one more time. best regards!
sceid Says:
April 19th, 2010 at 15.56
Thanks for this!!!
Airman Says:
August 6th, 2010 at 12.09
This work great. Can the javascript code be adapted to perform “Copy Selection Source to clipboard” instead of “View Selection Source”?
R+ Says:
January 20th, 2011 at 13.24
ThX!!
i like Opera very much!!
fileboxik Says:
March 9th, 2011 at 15.14
oh, its very good !
error 651 Says:
January 31st, 2012 at 23.22
I believe this is among the most important information for me. And i’m satisfied studying your article. But wanna commentary on some basic issues, The site taste is wonderful, the articles is in reality excellent : D. Good job, cheers
Carissa Says:
February 10th, 2012 at 21.51
Carissa…

[...]PUBLOG » View Selection Source for Opera[...]…