Adds Outlines to Elements

Latest Version

Version

1.0

Update

April 15, 2024

Size

185KiB

Developer

Element Outliner Extension

■ FUNCTIONALITY
◈ Toggle Outline
- Apply an outline style to the current active tab by clicking the “toggle outline” button or by using the hotkey Ctrl + Q.
- Target specific elements for outlining based on the entered CSS selector.
◈Control Outline Properties
- Customize the outline’s color, style, width, and offset to suit their needs.

■ BACKGROUND and PURPOSE
◈ This extension is a personal practice project born out of a need to toggle element outlines during web development.
◈ It serves as a tool for web developers, designers, and accessibility testers, aiming to help them quickly visualize the structure of a webpage and identify potential layout or design issues.

■ HOW TO USE
◈ Install
- Visit the Chrome Web Store, search for “Element Outliner”, and click on “Add to Chrome”.
◈ Uninstall
- Open the Extensions menu in Chrome, find “Element Outliner”, and click “Remove”.
◈ General
- Click the extension icon (upper right) to trigger the popup HTML.
- Click the “toggle outline” button to add/remove the outline style to the current active tab.
- Use Ctrl + Q as an alternative way to toggle the outline.
- Set outline properties depending on your need/preference.
- To target a specific group of elements or a specific element, enter the appropriate CSS selector.
- To reset to default, click the reset button in the upper right corner of the outline properties section.

■ TROUBLESHOOTING and SUPPORT
◈ If you’re experiencing issues with Element Outliner, try the following:
- Ensure inputs are valid and not empty.
- Retoggle the outline.
- Visit your browser’s “chrome://extensions/” and toggle on/off.
- Reload the webpage.
- Restart the browser.
- Reinstall the extension.
◈ If you’re still having trouble or found bugs, please comment your issue in the feedback section.

■ SECURITY and PRIVACY MEASURES
◈ The extension does not access, collect, or modify any information on any site you visit.
◈ It operates under manifest version 3, which only grants the following permissions:
- activeTabs: to query the current active tab and add style into the correct webpage.
- storage: to save the customized outline properties for each tab.
- data are stored as session only, (holds data in memory for the duration of a browser session only).
- scripting: to add CSS styles into webpages

■ LIMITATIONS
◈ The extension is unable to add an outline style to:
- Internal pages of the Chrome browser (like chrome://settings/, chrome://extensions/, etc.) due to security restrictions.
- The extensions gallery (like https://chromewebstore.google.com/) as it cannot be scripted.
◈ The extension was developed and tested using the latest version of the Chrome browser. Compatibility with older versions has not yet been verified.

■ SUPPORT
◈ While the extension is free to use, your support can help maintain and improve the extension. Here are a few ways you can support:
- Share Your Ideas: I value your input! Share your ideas or features you'd like to see implemented in future updates.
- Spread the Word: If you find the extension useful, share it with others who might benefit from it.
- Leave a Review: Your feedback matters! Leave a review or star rating.
- Buy me a Coffee: If you're feeling generous, consider buying me a coffee to keep my creative juices flowing! ☕
- https://ko-fi.com/ceps#

Every bit of your support is deeply appreciated. It contributes to making Element Outliner better for everyone. A heartfelt thank you to all! 😊

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Element Outliner", "version": "1.0", "description": "Adds Outlines to Elements", "author":{ "email": "[email protected]" }, "action": { "default_popup": "index.html" }, "web_accessible_resources": [ { "resources": ["/fonts/*.*"], "matches": [""] } ], "background": { "service_worker": "background.js" }, "permissions": [ "activeTab", "scripting", "storage" ], "commands": { "toggle-outline": { "suggested_key": { "default": "Ctrl+Q", "mac": "MacCtrl+Q", "linux": "Ctrl+Q", "chromeos": "Ctrl+Q" }, "description": "Toggle Outline" } }, "icons": { "16": "icon.png", "32": "icon.png", "48": "icon.png", "128": "icon.png" } }

Download CRX(185KiB)