Element Outliner

Adds Outlines to Elements

■ 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! 😊