Outline All Elements
Add CSS Outline property to all elements on the page for debugging CSS Layout.
What is Outline All Elements?
Outline All Elements is a Chrome extension developed by MohannadNaj, and its main feature is "Add CSS Outline property to all elements on the page for debugging CSS Layout.".
Extension Screenshots
Download Outline All Elements Extension CRX File
Download Outline All Elements extension files in crx format, manually install Chrome extensions in the browser, or share the crx files with friends to easily install Chrome extensions.
Extension Usage Instructions
A Chrome Extension for adding CSS Outline property (with different colors) to all elements on the page.
Mainly this is useful for debugging CSS Layout and discovering potential issues.
Notes:
- Click the extension icon for activating/deactivating.
- The outline colors are randomized based on it's order on the page.
- The colors are randomized by assigning different cumulative Hue degree and a fixed Saturation (99%) and Light (50%).
- On deactivating, the extension will restore the old outline value if it was there, and remove the style HTML attribute if it wasn't there before activating.
Source Code:
https://github.com/MohannadNaj/outline-all-elements Extension Basic Information
| Name |  Outline All Elements |
| ID | nppiigcgjgghnpdflckpalmdmpnfglfa |
| Official URL | https://chromewebstore.google.com/detail/outline-all-elements/nppiigcgjgghnpdflckpalmdmpnfglfa |
| Description | Add CSS Outline property to all elements on the page for debugging CSS Layout. |
| File Size | 31.23 KB |
| Installation Count | 285 |
| Current Version | 1.0 |
| Last Updated | 2020-01-10 |
| Publish Date | 2020-01-09 |
| Developer | MohannadNaj |
| [email protected] | |
| Payment Type | free |
| Supported Languages | en |
| manifest.json | |
{
"update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
"name": "Outline All Elements",
"version": "1.0",
"description": "Add CSS Outline property to all elements on the page for debugging CSS Layout.",
"manifest_version": 2,
"background": {
"persistent": true,
"scripts": [
"background.js"
]
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": {
"16": "icon_16.png",
"32": "icon_32.png",
"48": "icon_48.png",
"128": "icon_128.png"
}
},
"icons": {
"16": "icon_16.png",
"32": "icon_32.png",
"48": "icon_48.png",
"128": "icon_128.png"
}
} | |
