Element Outliner

About

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