Chrome Extension Visual Nodes

Uses the Chrome built in AI summarizer to make Visual Nodes with captions about the infomation, which can also be saved as a JSON file

Comment

Inspiration

The core inspiration was born from the information overload of the modern web. Often, a single webpage contains a vast amount of text, making it difficult to grasp the key concepts and their relationships quickly. We were inspired by the human brain's ability to process and connect concepts, and by mind-mapping and knowledge graph software. We wanted to create a tool that could instantly transform a linear, dense article into a dynamic, visual network of key ideas, revealing the underlying structure of the information, much like a neural network.

What it does

Chrome Extension Visual Nodes is a browser extension that instantly converts the content of the active webpage into an interactive, visual network diagram.

  1. Summarization: It uses a Chrome built-in AI model (like Gemini Nano's summarization capabilities) to analyze the webpage's content and extract the most relevant entities, concepts, and relationships.
  2. Conversion: The extracted information is then structured into a JSON format specifically designed for network visualization, containing arrays for nodes (the key concepts) and links (the relationships between them).
  3. Visualization: This JSON data is fed into a D3.js (Data-Driven Documents) force-directed graph that renders the information as a set of connected nodes, making complex topics easy to explore and understand at a glance.

The resulting visualization overlays on the webpage, providing a dynamic "knowledge map" of the content.

How we built it

The development process leveraged modern browser and web visualization technologies:

  1. AI Integration: We started by utilizing the Chrome built-in AI API. We created a function, myGetPageSummary(), in the background or service worker script to pass the current webpage's visible text to the AI model for efficient, on-device content analysis and summarization, ensuring privacy and speed.
  2. Data Structuring (JSON): The raw text summary from the AI was processed by a custom JavaScript function, myConvertTextToJson(), which intelligently parses the concepts and links, generating the required JSON structure (with an array of myNodes and an array of myLinks as objects) for a D3.js force layout.
  3. D3.js Visualization: A content script injected into the active tab housed the D3.js logic. It contained the myCreateVisualization() function, which uses the D3 force-simulation to create the interactive, physics-based network graph. This was rendered as an appended SVG element on top of the existing webpage DOM.
  4. Extension Plumbing: We used a simple chrome.action.onClicked listener in our background script to trigger the main logic, executing the content script (myContentScript.js) with an await call to ensure the AI-processed data was ready before the D3 function ran.

Challenges we ran into

The primary challenges were bridging the gap between three distinct technologies:

  1. AI Data Consistency: The summarization output from the AI, while powerful, could sometimes be inconsistent in its structure. This required extensive refinement of our text-to-JSON parsing logic (myConvertTextToJson()) to be robust enough to handle variations and reliably identify the "nodes" and "links" for the graph.
  2. D3.js DOM Injection: Injecting the complex D3 SVG visualization into arbitrary webpages without breaking their existing styles or layouts was tricky. We used an inline CSS approach on the root container with high z-index and minimal styling to keep it simple and non-intrusive, aligning with our preference for minimal CSS.
  3. Performance and Synchronization: Ensuring the entire pipeline—content extraction, AI processing (using async/await), JSON conversion, and D3 rendering—was fast enough to feel instantaneous was critical. We had to carefully manage the async operations to prevent blocking the main thread and ensure the D3 visualization only started rendering after the final, structured data was received.

Accomplishments that we're proud of

We are most proud of:

  1. Seamless AI Integration: Successfully utilizing the Chrome built-in AI for an on-device summarization task, which provides fast results and enhances user privacy by keeping the data local.
  2. The "Ah-Ha" Moment: Achieving the goal of transforming a dense, complex webpage into a beautiful, interactive knowledge graph that makes the relationships between topics immediately apparent. The force-directed graph provides a uniquely intuitive way to explore large amounts of information.
  3. Clean Code for Education: Adhering to our design preference of using camelCase for all my-prefixed variables and functions (myNodes, myLinks, myCreateVisualization), using async/await, and relying on simple JavaScript to keep the codebase clear, maintainable, and easily understandable for students learning extension development.

What we learned

We learned a tremendous amount about the full lifecycle of a modern, AI-powered extension:

  1. AI Prompt Engineering: We learned that the quality of the final graph is almost entirely dependent on how well the initial prompt to the AI is engineered to generate a summary that is easily parsable into a node/link structure.
  2. D3.js Force Layouts: We gained a deeper understanding of D3's force-simulation parameters (like strength, charge, and link distance) and how crucial they are for creating a visually appealing and stable graph that accurately represents the data relationships.
  3. The Power of Isolation: For content scripts, strict DOM and CSS isolation is paramount. Minimal, inline CSS helped us avoid conflicts with target websites, proving the value of simple, focused code for educational purposes.

What's next for Chrome Extension Visual Nodes

  1. Custom Key Node Filtering: Add a feature to allow the user to input a single key term, which the AI will then use to re-summarize the page, focusing the resulting node graph only on concepts related to that term.
  2. Hierarchical Layouts: Explore adding different D3 layout options, such as Treemaps or Cluster/Tree layouts, for pages where the information is better suited for a hierarchical structure rather than a general force-directed graph.
  3. Persistence and Sharing: Implement local storage to save the generated JSON for a page, allowing the user to revisit the visual nodes without re-running the AI process, and adding a simple JSON export link.

Built With

Share this project:

Updates