Saturday, April 11, 2009

How to view source of a selected region in Opera


Firefox has a very handy option called “View Selection Source” that lets you view the source of the selected region of a page. When a webpage is large and you need to view the code of a particular element on the page, locating this piece of code on the source of the page can be difficult because you don’t know where it occurs in the source and what it is named. In such needs, the “View Selection Source” option comes handy.

Instead of viewing the entire source of the page and trying to locate the desired code, you can select the portion of the page you are interested in and choose “View Selection Source” from the context menu. This will show the source of only the selected area.


Opera doesn’t have this feature, but using a simple Javascript bookmarklet or a userjs file you can implement this on Opera.

Using a bookmarklet

This is the simplest method. Just drag this ]+)?((\s*\/)?>)/g,parseTags);str=str.replace(//g,'<--$1-->');str=str.replace(//g,'<![CDATA[$1]]>');function parseTags(){var tag = '';tag+='';tag+='<'+arguments[2]+''+arguments[3]+'';if(arguments[4]){tag+=arguments[4].replace(/([a-zA-Z-]+)(\s*=\s*)((['"])(.*?)(\4))/g,'$1$2$4$5$6');}tag+='>';tag+='';return tag;}return str;}function findSelection(view){var i,sel=view.getSelection();if(sel.toString().length==0){sel=null;for(i=0;i0){break;}}}return sel;}function createOutputHtml(node){var html='',css='',code='',title='Selection source';code=parse((new XMLSerializer()).serializeToString(node));if(document.title){title+=' for "'+document.title.substring(0,20).replace(/20?'\u2026':'')+'"';}css+='b">bookmarklet to the Personal Bar or simply bookmark the link and then check the box “Show on Personal Bar”.

Now select any portion of this page (or any page) and click on this bookmarklet to display the source of the selected area.

Using a User Javascript file

This method is complicated but the most comfortable to use and is customizable.

First you need to enable User Javascript in Opera. To do this follow the following steps.

  1. Create a new directory (preferably inside profile directory) and name it suitably.
  2. Open Tools > Preferences > Advanced > Content > JavaScript Options and enter the path of directory created in the previous step under User JavaScript files.
  3. Download the “View Selection Source” UserJs file and place it inside the User JavaScript directory.

The second step is to create a menu entry for “View Selection Source”.

  1. Go to Tools > Preferences > Advanced > Toolbars. In the ‘Menu Setup’ box select Opera Standard and click the Duplicate button to create a backup copy.
  2. Exit Opera and go to Opera’s Profile directory. You can get it’s location by clicking on Help>About Opera. Inside the profile directory there is another folder called Menu. Open it and load the INI file inside it on a text editor.
  3. In the INI file find a section called Hotclick Popup Menu. At the end of the section append the following code:
Item, "View selection source"="Go to page, "javascript:opera.getSelectionSource()""

You should now get a new item in your context menu.


The color schemes used in the userjs file can be easily customized by editing the hex color codes.

[via PUBlog]


Post a Comment

Popular Posts