z-index CSS property looks deceptively simple. To show an element on top of others you just add z-index: 1000; in CSS and expect it to be sufficient. But reality turns out to be more complex than that. Ordering of elements depends on other properties and on z-index value of other elements in DOM hierarchy. On sufficiently big pages this interaction can get quite complex pretty quickly. The goal of this plugin it to help with understanding z-index and its effects. Currently plugin looks the following way
Some of development relies on running simple HTTP server in project directory. The simplest way to do so is to run python -m SimpleHTTPServer 8008 from corresponding directory.
You can run tests by going to http://localhost:8008/test/ in browser after simple HTTP server is started.
Reloading plugin in browser takes some time and after reloading doesn't always work so to speed up development you can go to http://localhost:8008/quick-dev/ in browser after simple HTTP server is started. It imitates plugin behavior by showing in one <iframe> some HTML page and in another <iframe> z-index plugin panel.
To test plugin in Chrome you can go to chrome://extensions/ and Load unpacked extension… In opened dialog select src/ directory, i.e. directory that contains manifest.json.