Skip to content

A plugin to highlight all site divs for development and testing.

License

Notifications You must be signed in to change notification settings

AndrewKhassapov/div-highlighter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Website div highlighter

Highlight every div on your website in a unique color. 📕📙📒📗📘

This was created in an effort to simplify web development, by highlighting every div. 💻

❓ How to implement it?

For Google Chrome:

  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! Highlight elements
  7. Click on the extension again to restore div colours. Restore elements

For other browsers:

  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

🔼 Features in development.

  • 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.

❓ What is a javascript scratchpad?

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.

Every div on the website will change to a transparent color with a clear border. 🌈

In development as of 14th December, 2022.

Releases

No releases published

Packages

No packages published