1. Download the chrome-plugin.zip
2. Open chrome://extensions/
3. Enable 'Developer Mode'.
4. Drag and drop chrome-plugin.zip to chrome://extensions/
5. Open your website. eg. this example
6. Click on the extension to highlight divs!
7. Click on the extension again to restore div colours.

1. Open your website. eg. this example
2. Copy, paste and run the code in your browser javascript scratchpad.

main(); // To run the plugin

or

main(false); // To restore elements

• Prototype code to add color to every div. ✔️
• Function to revert div colors. ✔️
• Google Chrome browser extension as .zip. ✔️
• Add user interface indicating when extension is active or inactive. ✔️
• Add feature: Restore div elements to their original colours instead of clearing.
• Add feature: Keyboard shortcuts to toggle extension for Windows and MacOS.
• Public listing of Google Chrome browser extension.
• Custom features to Google Chrome browser extension.

Good question,

A clearer example of how to implement this in Google Chrome:

1. Open your website. eg. this example

2. View page source: Right click anywhere > Inspect

3. In the Inspect menu, go to: 'Sources' tab > 'Snippets' tab > + New snippet >

4. Paste the .js code into the snippet.

5. Save the snippet: eg. On Windows: CTRL + S. On macOS: Command + S.

6. Run the code: eg. On Windows: Ctrl + Enter. On macOS: Command + Enter.