AnnotateWeb.com - A Webfuse-Powered Web Annotation Tool

Visit the live demo: https://annotateweb.com

annotateweb.com is a web annotation and collaboration tool for drawing, highlighting, and commenting on live websites. It requires no installation for the end-user. This repository holds the client-side code for the annotation functionality.

---

Core Mechanism: Webfuse Integration

annotateweb.com is a Webfuse Session Extension, not a typical browser extension. Its operation depends on the Webfuse web augmentation platform.

1. Virtual Web Sessions: Webfuse uses a proxy system to load the target website within a virtual session.
2. Real-time Augmentation: The platform modifies the website's code (HTML, CSS, JS) before it reaches the browser.
3. Extension Injection: It injects the content.js script into this session, granting it access to modify the page.

This proxy-based approach means no software or browser extension installation is needed for any user. It also bypasses common browser security policies, permitting augmentation on third-party websites.

---

Functionality Overview

The content.js script adds a movable toolbar with several functions.

Annotation & Drawing Tools

• Navigate: A mode for normal interaction with the underlying website.
• Drawing Primitives: Includes a Pen, Line, Rectangle, and Circle for creating shapes.
• Highlighter: Applies a semi-transparent layer to mark text or sections.
• Text Tool: Adds text comments directly onto the page.
• Eraser: Removes specific annotations.
• Style Controls: Options for color and line width are available.
• History: The toolbar includes Undo, Redo, and Clear functions.

Collaboration & Sharing

• Invite (Real-time Co-browsing): Generates a unique URL for a shared session. Other participants who open the link can view annotations as they are made. This uses Webfuse's Shared Space and session management.
• Share (Static Snapshot): Creates a link to a saved version of the annotations on the target page.
• Export to Image: Captures the annotations as a PNG file. Options include exporting the visible area or the full scrollable page.

---

Technical Overview

This section covers the code that provides the annotation functions.

Repository Files

• content.js: A Webfuse Session Extension written in JavaScript. It is responsible for:

  • Rendering and managing the annotation toolbar UI.
  • Handling drawing logic on an HTML <canvas> element.
  • Storing annotation data (paths, shapes, text) with coordinates relative to the document's full scrollable size.
  • Redrawing annotations correctly during user scrolling and window resizing.
  • Using the Webfuse API (browser.webfuseSession.getSessionInfo()) for the "Invite" function.
  • Communicating with a backend worker to save and load shared annotation snapshots.

• html2canvas.min.js: A third-party library for the "Export to Image" function. It reads the DOM to render a screenshot onto a canvas.

• manifest.json: A manifest file defines how the Webfuse platform loads the Session Extension and what permissions it has within the session environment.

content.js Implementation Details

• Scrolling and Positioning: The script distinguishes between the viewport (visible area) and the document (the entire page). Annotations are drawn on a fixed-position canvas that covers the viewport. The data for each drawing is stored using document-relative coordinates. When a user scrolls, the script clears the viewport canvas and redraws only the annotations that fall within the new visible area.

• State Management: Drawing operations are stored in a drawingOperations array. The undo, redo, clear, and export functions operate by manipulating or re-playing the items in this array.

• Platform Integration: The script calls browser.webfuseSession.getSessionInfo(). This is a Webfuse API injected into the session. This call retrieves the sessionId, which is a necessary component for creating the collaborative co-browsing link.