Z-index Visualizer

A tool that visualizes (2.5D) the stacking contexts of web pages.

What is Z-index Visualizer?

Z-index Visualizer is a Chrome extension developed by jeong57281, and its main feature is "A tool that visualizes (2.5D) the stacking contexts of web pages.".

Extension Screenshots

screenshot

Download Z-index Visualizer Extension CRX File

Download Z-index Visualizer 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

                        Due to the stacking context concept of CSS, in certain situations, no matter how high the z-index value is, the desired result may not be achieved.

By visualizing the stacking context (2.5D), the tool helps you quickly identify which elements the current stacking context is dependent on.

Github: https://github.com/junghyunbak/chrome-extension-z-index-visualizer                    

Extension Basic Information

Name Z-index Visualizer Z-index Visualizer
ID hpimpiejkldpjhijfpglflpplnhdffcf
Official URL https://chromewebstore.google.com/detail/z-index-visualizer/hpimpiejkldpjhijfpglflpplnhdffcf
Description A tool that visualizes (2.5D) the stacking contexts of web pages.
File Size 97.5 KB
Installation Count 189
Current Version 1.0.0
Last Updated 2023-07-25
Publish Date 2023-07-24
Developer jeong57281
Email [email protected]
Payment Type free
Supported Languages en
manifest.json
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "description": "A tool that visualizes (2.5D) the stacking contexts of web pages.",
    "version": "1.0.0",
    "manifest_version": 3,
    "name": "Z-index Visualizer",
    "background": {
        "service_worker": "background.bundle.js"
    },
    "action": {
        "default_icon": "icon-32.png"
    },
    "icons": {
        "128": "icon-128.png"
    },
    "content_scripts": [
        {
            "matches": [
                "http:\/\/*\/*",
                "https:\/\/*\/*",
                ""
            ],
            "js": [
                "contentScript.bundle.js"
            ],
            "css": [
                "content.styles.css"
            ]
        }
    ],
    "devtools_page": "devtools.html",
    "web_accessible_resources": [
        {
            "resources": [
                "content.styles.css",
                "icon-128.png",
                "icon-32.png"
            ],
            "matches": []
        }
    ],
    "permissions": [
        "storage",
        "tabs"
    ]
}