Add borders or shaders to your webpage on the fly. No need to write debug markup to fix layout components.

Latest Version

Version
1.5.5
Update
November 11, 2021
Size
45.51KiB
Developer
Category
Users
566
Rating
5 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
Tabs

Storage
*://localhost/*
See more

Looksee Extension

This extension provides quick borders or shaders to any element on the page. The text field uses jQuery's anything selector or \"sizzle selector library\" to easily traverse the dom. Works with your local server. Looksee is built to not affect your layout in anyway. If it does please contact me via the support link below.

Examples:

- Typing div into the input field will add a border to every div on the active tab
- Typing * will add border to everything in the html document
- Typing p, h3, div > span will add a border to all p tags, h3 tags, and spans inside of divs

Support:

I would like to make this extension great so please let me know if you find a bug by heading over to the github page https://github.com/Blumed/looksee/issues

* After the first time you install this extension be sure to reload the desired page first, or just open up a new page and go to town *
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "Looksee", "description": "Add borders or shaders to your webpage on the fly. No need to write debug markup to fix layout components.", "default_locale": "en", "version": "1.5.5", "offline_enabled": true, "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", "permissions": [ "tabs", "", "storage", "*://localhost/*" ], "content_scripts": [ { "matches": [ "*://*/*" ], "css": [ "assets/css/main.css" ], "js": [ "assets/js/vendor/jquery-2.2.3.min.js", "assets/js/contentScript.js", "assets/js/outliner.js" ], "run_at": "document_end", "all_frames": true } ], "background": { "persistent": true, "scripts": [ "assets/js/background.js" ] }, "browser_action": { "default_icon": "assets/images/icon128.png", "default_popup": "popup.html" }, "icons": { "16": "assets/images/icon16.png", "48": "assets/images/icon48.png", "128": "assets/images/icon128.png" }}
Read more

Similar Extensions

icon

Outliner CSS Extension · Developer Tools 566 11 ★ 13.01KiB

icon

Outline All Elements Extension · Developer Tools 566 0 ★ 31.23KiB

icon

Show CSS Outline Style Extension · Developer Tools 566 4 ★ 18.41KiB

icon

Outliner Extension · Developer Tools 566 3 ★ 15.99KiB

icon

DOM Highlighter Extension · Developer Tools 566 4 ★ 52.1KiB

icon

showHTML Extension · Developer Tools 566 2 ★ 12.59KiB

icon

HTML Visual Validation Extension · Developer Tools 566 8 ★ 54.54KiB

icon

Div Density Extension · Developer Tools 566 6 ★ 6.95KiB

icon

Outline Chrome Extension Extension · Developer Tools 566 7 ★ 12.84KiB

icon

DOM X-Ray Extension · Developer Tools 566 2 ★ 57.82KiB

icon

HTML & CSS Design Analysis Extension · Developer Tools 566 0 ★ 1.47MiB

icon

Div Highlighter Extension · Developer Tools 566 7 ★ 5.47KiB

icon

Layout Debugger Extension · Developer Tools 566 3 ★ 251KiB

icon

Red Border Chrome Extension Extension · Developer Tools 566 4 ★ 10.79KiB

icon

HTML Hierarchy Visualizer Extension · Developer Tools 566 8 ★ 21.62KiB

icon

Domquest Extension · Developer Tools 566 2 ★ 32.3KiB

icon

DevTools Classes & Atributes panel Extension · Developer Tools 566 4 ★ 12.75KiB

icon

DOM to JSON Converter Extension · Developer Tools 566 1 ★ 18.23KiB

icon

Debug CSS Extension · Developer Tools 566 35 ★ 19.06KiB

icon

MageTools: DevTools Reimagined Extension · Developer Tools 566 9 ★ 84.8KiB

icon

Css Playground and Dom Tree Extension · Developer Tools 566 2 ★ 179KiB

icon

EazyCSS Extension · Developer Tools 566 13 ★ 2.98MiB

icon

Copy DOM Content Extension · Developer Tools 566 2 ★ 13.8KiB

icon

Dimensions Inspect | Gridman Extension · Developer Tools 566 87 ★ 816KiB

User reviews

icon

Daniel Lee (ID: 0000006c1ef7b415) Voted 5 ★ - Updated 12/11/2018 This extension helped me focus on particular part of an page, love it.

icon

Brad Hover (ID: 0000002e077ba3d7) Voted 5 ★ - Updated 09/10/2016 I was just about to build my own Chrome extension since I use this feature (albeit with box-shadow insets instead of outlines) for layouts ALL the time. Thought I'd check the web store first though, and sure enough, another like-minded individual has already stepped up to the plate. Bonus points for the shading and hovering features. Well done Cullan!

icon

Grant Chandler (ID: 000000dfebad699e) Voted 5 ★ - Updated 07/15/2016 A nice way to visualize how nested your elements are!