Quick source viewer - Chrome extension
I use Chrome as my default browser, and I noticed that none of its built-in
mechanisms or available chrome extensions satisfied my source viewing needs.
view-source: is too simple and doesn't show current DOM. The
developer tools has all the power but is clumsy for quick source scanning.
The available source viewing chrome extensions were either too slow or had a
Install the extension from the Chrome web store.
Here's the list of features:
- Fast. The HTML source is retrieved from memory and not reloaded over network. External sources are loaded over network on demand.
- Shows current HTML in the DOM.
- UI is compact and snappy.
- Source code is colorized and beautified to make it more readable.
- Common script urls may be hilighted in the list.
- The extension is customizable via options page. Advanced users may write custom CSS to adjust the look and feel of the viewer.
Under the hood
into every page being loaded. The script simply reports the initial count of
SCRIPT and STYLE nodes to the background script which has the permission to
update the badge count in the toolbar. It also adds a listener for responding
to other extension sources. The content script is small and fast so it doesn't
slow down pages. It needs no additional libraries.
When the source viewer is invoked, the content script is called again to
report the current nodes to the viewer
maintab.js. The viewer then populates
care of the UI.
The HTML is retrieved fast from the already loaded document and not fetched from the original site. The external SCRIPT and STYLE nodes however are fetched over the network on demand. I tried to get the data for these nodes from the memory but was not able to find a good way. A devtools extension seems to have access to the files in memory but I didn't want the extension to require devtools to be open. I might improve the loading in the next version.
The background script
bg.js is only used to update the toolbar badge and
start the source viewer when the toolbar button is clicked.
options.js provides a minimal UI for adjusting some configuration options
for the extension.
Sources to the extension are available in GitHub.
-rw-r--r-- tomi 246 Jul 8 18:36 README.md -rw-r--r-- tomi 1366 Jul 9 09:48 bg.js -rw-r--r-- tomi 58863 Jul 9 10:04 config.js -rw-r--r-- tomi 552 Jul 8 11:23 css.ini drwxr-xr-x tomi 306 Jul 7 12:28 ext/ -rw-r--r-- tomi 1815 Jul 6 14:41 beautify-css.min.js -rw-r--r-- tomi 7429 Jul 6 14:41 beautify-html.min.js -rw-r--r-- tomi 13178 Jul 6 14:40 beautify.min.js -rw-r--r-- tomi 2013 Jul 6 14:14 googlecode.css -rw-r--r-- tomi 10989 Jan 1 1980 highlight.pack.js -rw-r--r-- tomi 24014 Jun 28 10:18 zepto.min.js -rw-r--r-- tomi 11467 Jul 8 23:37 gear128.png -rw-r--r-- tomi 1081 Jul 8 23:29 gear19.png -rw-r--r-- tomi 2201 Jul 9 09:57 load.js -rw-r--r-- tomi 2499 Jul 8 11:14 maintab.css -rw-r--r-- tomi 1994 Jul 8 11:09 maintab.html -rw-r--r-- tomi 7325 Jul 9 09:41 maintab.js -rw-r--r-- tomi 609 Jul 9 11:45 manifest.json -rw-r--r-- tomi 555 Jul 7 12:33 options.css -rw-r--r-- tomi 2128 Jul 8 23:41 options.html -rw-r--r-- tomi 766 Jul 7 12:53 options.js
Report issues and feedback below. I already have a few new TODOs in my mind - what would you like to see in the next version?
Enjoy the extension. And the summer ;)comments powered by Disqus