An easy-to-use tool for labeling the exact bounding boxes of web page elements
- Chrome extension program: Supports web GUI labeling directly on a web browser
- Intuitive selection mechanism
- Selects DOM elements by hovering and clicking via the mouse
- Hierarchical traversal of elements using click-and-scroll
- Widely-used object detection annotation format: Saves annotations in the PASCAL VOC format (.xml)
- Download the repository
- Go to chrome://extensions/ and enable Developer mode
- Click on Load unpacked and select the webpage-GUI-annotation-tool folder
- Open the web page you want to annotate and click on the extension icon to 'start labeling'
- Select the element you want to label by hovering and clicking
- Fill in the class name and click on the Save button from the popup window
- Repeat 4-5 for other elements
- Click on the extension icon to 'Finish' and it will download the image and annotation files
| Step 1: Select web page to annotate | Step 2: Select element using mouse |
|---|---|
 |
 |
| Step 3: Select type | Step 4 (optional): Redraw bounding box |
 |
 |
| Step 5: Check the annotation process | Step 6: Finish to download annotation and screenshot |
 |
 |