fun

"View Selection Source" for Opera

Thursday, 17. May 2007, 04:51:26

"View Selection Source" for Opera 原文original text
查看选定区域的源码View Selection Source — simple JavaScript
bookmarklet (favelet) or User JavaScript which allows you to see HTML
source of any part of page, it's very useful for web developers. You probably know it from Firefox.

Three ways to install it
1. User JavaScript
Most complicated installation but most comfortable usage. You will be able easily customise the script.

Step 1: Enable User JavaScript in Opera

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

http://www.webkitchen.cz/lab/opera/view-selection-source/user-javascript-configuration.png

Step 2: Install "View Selection Source" User JS

Download the "View Selection Source" User JS file. Save the script to your previously created User JavaScript folder. You can also see the location in opera:about page (look for User JavaScript files).

Step 3: Add item "View Selection Source" to Opera's menu

We need locate ini file with your menu definition. Go to Tools > Preferences > Advanced > Toolbars. If you can see in the Menu Setup box only Opera Standard, select it and click Duplicate. If you see more than one item, do nothing here.

Go to the opera:about page and look for Opera directory. Than go to the directory showed in the opera:about page, open subdirectory called menu and open file with an ".ini" extension in your favorite text editor (such as Notepad, Vim, Textmate, jEdit, etc). Before editing stop Opera please.

In the INI file find section called Hotclick Popup Menu. At the end of this section add following code:

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

Finally this section will looks similar 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()""

The result is:

2. Favelet in menu definition

This is very similar to the previous variant, but you don't need the JS file, just add whole code to the menu ini file. Please follow step 1 and 3 in the previous variant. In the third step do not insert the code noted there, use code from this file instead.

3. Classical bookmarklet

The simplest way. You just create new bookmark and in the 'Address field' insert the whole JS code. When you want to use it, click on the bookmark item in Opera's 'Bookmarks' panel. The code for this usage is here.

Customization

If you installed this script as a User JavaScript, you can choose one from three prepared color schemes or easily define you own one. For example definition of the "Mozilla" color scheme:

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 customisaton is available by the conf variable, 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

}