├── .gitignore
├── README.md
├── background.js
├── css-debugger.js
├── images
    ├── .DS_Store
    ├── get_started128.png
    ├── get_started16.png
    ├── get_started32.png
    └── get_started48.png
└── manifest.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CSS Debugger
 2 | 
 3 | Simple Chrome extension helping to debug CSS.
 4 | 
 5 | Based on amazing hack by [@gajus](http://github.com/gajus)
 6 | 
 7 | https://dev.to/gajus/my-favorite-css-hack-32g3
 8 | 
 9 | ## How to install
10 | 
11 | 1. Clone or download this repo into a folder.
12 | 1. Go to chrome://extensions
13 | 2. Make sure **Developer mode** (in the upper right corner) is ON.
14 | 3. Drag & drop the folder that contains this repo there.
15 | 
16 | ## How to use
17 | 
18 | 1. Click on the icon of extension to toggle debugger.
19 | 


--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
1 | chrome.browserAction.onClicked.addListener(function(tab) {
2 |     chrome.tabs.executeScript(
3 |       tab.id,
4 |       {code: 'toggleStyles();'});
5 | });


--------------------------------------------------------------------------------
/css-debugger.js:
--------------------------------------------------------------------------------
 1 | const addStyles = () => {
 2 |     var css = `
 3 |         * { background-color: rgba(255,0,0,.2); }
 4 |         * * { background-color: rgba(0,255,0,.2); }
 5 |         * * * { background-color: rgba(0,0,255,.2); }
 6 |         * * * * { background-color: rgba(255,0,255,.2); }
 7 |         * * * * * { background-color: rgba(0,255,255,.2); }
 8 |         * * * * * * { background-color: rgba(255,255,0,.2); }
 9 |         * * * * * * * { background-color: rgba(255,0,0,.2); }
10 |         * * * * * * * * { background-color: rgba(0,255,0,.2); }
11 |         * * * * * * * * * { background-color: rgba(0,0,255,.2); }`,
12 |     head = document.head || document.getElementsByTagName('head')[0],
13 |     style = document.createElement('style');
14 | 
15 |     head.appendChild(style);
16 |     style.classList.add('css-debugger-from-chrome-extention-43133');
17 |     style.type = 'text/css';
18 |     style.appendChild(document.createTextNode(css));
19 | }
20 | 
21 | const removeStyles = () => {
22 |     const style = document.querySelector('.css-debugger-from-chrome-extention-43133');
23 | 
24 |     style.remove();
25 | }
26 | 
27 | const toggleStyles = () => {
28 |     const style = document.querySelector('.css-debugger-from-chrome-extention-43133');
29 |     if (style) {
30 |         removeStyles();
31 |     } else {
32 |         addStyles();
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamarek/css-debugger/2ca6c78dfbdd46cc014b2d59ac680e71a3c8cd54/images/.DS_Store


--------------------------------------------------------------------------------
/images/get_started128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamarek/css-debugger/2ca6c78dfbdd46cc014b2d59ac680e71a3c8cd54/images/get_started128.png


--------------------------------------------------------------------------------
/images/get_started16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamarek/css-debugger/2ca6c78dfbdd46cc014b2d59ac680e71a3c8cd54/images/get_started16.png


--------------------------------------------------------------------------------
/images/get_started32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamarek/css-debugger/2ca6c78dfbdd46cc014b2d59ac680e71a3c8cd54/images/get_started32.png


--------------------------------------------------------------------------------
/images/get_started48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamarek/css-debugger/2ca6c78dfbdd46cc014b2d59ac680e71a3c8cd54/images/get_started48.png


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "CSS Debugger",
 3 |     "description": "Helps to debug padding, margin, flexbox etc. on your website.",
 4 |     "version": "1.2",
 5 |     "background": {
 6 |       "scripts": ["background.js"],
 7 |       "persistent": false
 8 |     },
 9 |     "permissions": [
10 |       "activeTab"
11 |     ],
12 |     "content_scripts": [
13 |         {
14 |          "matches": [
15 |            "<all_urls>"
16 |          ],
17 |          "js": ["css-debugger.js"]
18 |         }
19 |     ],
20 |     "browser_action": {
21 |         "default_title": "CSS Debugger"
22 |     },
23 |     "icons": {
24 |       "16": "images/get_started16.png",
25 |       "32": "images/get_started32.png",
26 |       "48": "images/get_started48.png",
27 |       "128": "images/get_started128.png"
28 |     },
29 |     "manifest_version": 2
30 |   }


--------------------------------------------------------------------------------