/Web-Annotation-Tool

Web Annotation Tool: Browser extension for annotating webpages with drawing tools. Customize annotations and save screenshots effortlessly.

Primary LanguageJavaScriptMIT LicenseMIT

Web Annotation Tool

Web-Annotation-Tool


Installation

To use this extension locally in your browser (Chrome):

Note: Similar process for other browsers as well

  1. Clone the Repository:

    https://github.com/vansh-codes/Web-Annotation-Tool.git

    or download the zip folder here: Download

  2. Navigate to Chrome Extensions:

    • Open Chrome and go to chrome://extensions/.
    • Alternatively, click on the menu icon (three dots) at the top right of Chrome, choose More tools > Extensions.

  3. Enable Developer Mode:

    • Ensure the Developer mode checkbox at the top right is checked. image

  4. Load the Extension:

    • Click on the Load unpacked button.

      image

    • Navigate to the directory where you cloned the repository and select the web-annotation-tool folder.

  5. Verify Installation:

    • The Web Annotation Tool extension should now appear in the list of installed extensions.
    • You should see the extension's icon (annotation icon) added to your browser's toolbar.

Usage

  1. Enable Annotation:

    • Click on the extension icon in the toolbar to enable annotation mode.
    • Alternatively, right-click on the webpage and select Start Annotation for quick access.

  2. Start Annotating:

    • Once enabled, click on Start Annotation in the sidebar that appears on the webpage.

  3. Use Drawing Tools:

    • Customize pen size and color.
    • Clear annotations in one click.
    • Undo annotations if needed.

  4. Save Screenshots:

    • There are two types of screenshots you can save:
      1. Annotation Screenshot: This captures only the annotations without the webpage content. Useful for sharing or reviewing just the annotations made.
      2. Web Annotation: This captures the entire webpage along with the annotations. Useful for documenting changes or sharing a visual representation of annotated content.

  5. Close Sidebar:

    • Click on ✖ on the sidebar to close it. The sidebar is draggable, allowing you to reposition it as needed. This flexibility helps you annotate without obstruction and take screenshots with full webpage visibility.

With these features, users can effectively annotate webpages, customize their annotations, and capture screenshots as needed. The draggable sidebar enhances usability by allowing adjustments and minimizing obstruction during annotation and screenshot capture.

Notes

  • Ensure the extension is enabled only on websites where you intend to use annotation features.
  • For issues or suggestions, please visit GitHub Issues.

- Created by Vansh Chaurasiya

🔗 Links

linkedin twitter