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

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.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: Tools > Preferences > Advanced > Toolbars. If there is only an “Opera Standard” item in the ‘Menu Setup’ box, select it and click the button. If you can see more than one item there, do nothing.Menu configuration

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.

Tags: , ,

35 Responses to “View Selection Source for Opera”

  1. brandon Says:

    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

  2. Jakub Says:

    Brandon, which method of installation have you chosen?

  3. brandon Says:

    @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)

  4. brandon Says:

    Oh yeah, I’m using 9.50 if that matters..

  5. Jakub Says:

    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)?

  6. Opera un “View Selection Source” | deelis.lv Says:

    [...] atrodams šeit un vispār citas lietas šad tad var uzzināt skatoties šeit. Komentārs (RSS) [...]

  7. Father Luke Says:

    Thank you for the Bookmarklet!

    - –
    Okay,
    Father luke

  8. David Says:

    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?

  9. Jakub Says:

    @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();

  10. David Says:

    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?

  11. Jakub Says:

    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.

  12. Lex1 Says:

    @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?

  13. David Says:

    Lex1,

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

    Thank you.

  14. Jakub Says:

    @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.

  15. Lex1 Says:

    For the button, you should use only single commas «’»(and \x22 or \’). That will demand a few handwork.

  16. chromax Says:

    Works great, should be add by the opera team permanently!

  17. fredi Says:

    The web developer menu can do something similar to this.

  18. 3433 Says:

    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”

  19. Heckfy Says:

    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?

  20. Jakub Says:

    Heckfy, what exactly is the problem? The menu item doesn’t show up or it does nothing when you click it?

  21. Heckfy Says:

    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.

  22. Jakub Says:

    Haha, no problem, I just happened to be by the computer :) Glad to hear that you’ve solved it.

  23. Heckfy Says:

    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

  24. Heckfy Says:

    It would be nice if you would happened to be by the computer again goodman Jakub! :)

  25. Jakub Says:

    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""
  26. Heckfy Says:

    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 )

  27. Jakub Says:

    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

  28. Heckfy Says:

    i even did not think about holding Shift. It works! )
    thanks for the link, i’ll ask.
    thank you very much for the help! :)

  29. Heckfy Says:

    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!
    :)

  30. sceid Says:

    Thanks for this!!!

  31. Airman Says:

    This work great. Can the javascript code be adapted to perform “Copy Selection Source to clipboard” instead of “View Selection Source”?

  32. R+ Says:

    ThX!!
    i like Opera very much!!

  33. fileboxik Says:

    oh, its very good !

  34. error 651 Says:

    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

  35. Carissa Says:

    Carissa…

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

Leave a Reply