The Visual Tagger is a JavaScript script designed to provide visual guidance for artificial intelligences capable of image recognition. This code allows AIs to quickly identify which elements to interact with on a web page, facilitating the generation of JavaScript code to perform actions.
The script applies visual tagging to HTML elements that have defined colors, providing a clear visual representation. Each tagged element is highlighted with a colored border, and a corresponding label is inserted above it, displaying its tag name, ID, and classes. This allows AIs to understand the page structure and interact with the elements effectively.
We now offer a Chrome Extension version of the Visual Tagger! This extension makes it even easier to inject the Visual Tagger into web pages with just one click.
To load the Visual Tagger Chrome extension:
- Clone or download the repository to your local machine.
- Go to
chrome://extensionsin your Chrome browser. - Enable Developer mode (toggle found in the upper-right corner).
- Click "Load unpacked" and select the folder containing the extension files.
- The Visual Tagger icon will appear in your extensions bar, ready to inject the visual tagging.
Now, simply click the icon to toggle the Visual Tagger on any page!
To use the Visual Tagger script directly:
-
Open the web page where you want to run the Visual Tagger.
-
Open the browser console (usually by pressing
F12orCtrl + Shift + I). -
Paste the Visual Tagger code directly into the console and press
Enter.- Make sure the code is accessible for copying and pasting.
-
The Visual Tagger will execute, and the visual tagging will appear on the relevant elements of the page.
This code is still experimental and may miss some elements. Contributions are welcome! If you have any ideas or improvements for the Visual Tagger, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License.