Opera extension: Source
Monday, January 17, 2011 10:22:42 PM
- it doesn't convert links to click-able links,
- if it has syntax highlighting, then it should be more nicer and preciser, but it is not,
- on standard skin if you search for a string, it's nearly impossible to notice the highlighted text, because it has almost the same color (white) as the background (fixed in Opera 12.10+ versions)
Install extension Opera 11.60-12.16
Features- Viewing page-source with click-able links, text wrapping, line numbers, and since it is an HTML page, the search is same as on any other page (highlighted text on dimmed page)
- Viewing selection source
- Syntax highlighting with customizable colors, line numbering, custom shortcuts, text wrap
- Centering content for plain text or NFOs
- View NFO ASCII Arts in browser
- Edit/view the source of the selected element, or element removal with a single click
- BBCode/HTML generation from the highlighted code
- and more (details below)...
So, how does it work?Ctrl+F9 for viewing the page source or the selection source. It works for frames too, first click in the desired frame, and press the mentioned combination. If you are not sure that you are in a frame, or just want to check the top document's source, then press Ctrl+Shift+F9.
Since, Ctrl+F9 opens the source of the actual DOM, it may contain unwanted code pieces, for example modifications by other extensions, which is usually unnecessary to see. To filter these unwanted nodes from source, there is input in preferences, where you give an XPath query, and the extension will try remove the matched nodes (only) from the source viewer. It can remove element and attribute nodes, and since it is one XPath query, you have to catenate multiple queries with "|" sign. Here is an example that removes some other extensions' stuff (ExtendTube, Ghostery, AutoPatchWork, WOT, AdBlock, HyperTranslate and the last part which will remove all tags right under the root, which is not the head or the body, example for this is my other extension, Imagus).
/html/head/style[@id="ext-style-general" or @id="ext-page-clean-up" or starts-with(text(), ".ghostery-alert") or @id="AutoPatchWork-style" or contains(text()[position()=3], "WOT Services") or (starts-with(text(), "/*") and contains(text(), "! Fanboy"))] | /html/body/div[@id="wotwarning" or @id="wotwrapper" or (@style and count(@*) = 1 and string-length(@style) > 700 and contains(@style, "z-index: 21474"))] | /html/*[not(self::head) and not(self::body)]Ctrl+Alt+F9 [+Shift works here too] will make an AJAX request to get the original source. You can reload the source viewer, i.e., you don't have to open a new tab for viewing selection source on the same page, instead just select some text on the page, and press F5 in source viewer.
When viewing sources there is a "Go to line" feature also (key G), but only available if you enable line numbering.
There is a special use of this feature, when for the extension a "+" (plus sign) is given. In this case it will try to render the whole code as HTML.
There is possibility to generate BBCode or HTML from the highlighted source. The method is similar like above, select some code in the source, press B, give the output format, which can be "html" or "bb" (before bb you can put a "#" sign to add hash-mark before color values), and press enter.
On web pages, Ctrl+Q will activate the inspecting mode (if you move your mouse, you'll see blue outlines around the elements, where every parent element is outlined), then if you click on one of them, you will be able to edit or view its source (depends on what is the default action; it can be set in preferences).
After you go to the edit mode, then under the textarea each parent node is listed from the target up to the BODY, so you can quickly change your target, and edit its outerHTML property. Shift + click on a tag will open a new tab with the element's source. Ctrl + click on a tag will remove it from DOM.
If you hold Shift along with the previous shortcut (so, Ctrl+Shift+Q), then you'll see green outlines. This indicates that now by clicking on an element will enable it's contenteditable property, and you can modify the content of that element.
To remove an element press Ctrl+Shift+R which will trigger the inspection (red outlines will appear), and clicking on an element will remove it from the DOM. Holding Shift key will allow you to remove more than one node without leaving the inspection (Shift also works in "green" mode). Ctrl + click will remove all nodes that have the same class as the clicked one has, Alt + click removes all nodes with same tag.
Jump between these three modes with Space. Quit from any mode: press again the shortcut, click with right mouse button or press Escape.
When you see some HTML code on a page (e.g., on a random forum someone shared a piece of HTML code), and you want to try out how will it look like in the browser, you can select that text and press Shift+F9, which will open a new page with the rendered HTML code.
You can enable the toolbar button, and reach the functions from there, or there is a simple API that you can use for context menu or for a button. It's window.oexSource(). If you want to put it into the context menu, you have to edit the standard_menu.ini file which is placed in Opera's installation folder. After you created a backup, find this line [Document Popup Menu]. Below this you can see the entries for a document's context-menu. Somewhere here insert a new line with this text:
However, using these methods doesn't work well in frames, keyboard shortcuts are recommended.
Thanks for the icon: http://esk6a.deviantart.com/
Syntax highlighting is based on google-code-prettify
TranslationYou can contribute by translating these files:
Open the files in a text editor, translate and send them (details in files).
Done: English, Hungarian, Russian (by burn).