WebToLLM

Description

WebToLLM is a robust Chrome extension engineered to simplify the capture, download, and copying of webpage elements, including HTML and CSS, for integration with large language models to replicate designs. Perfect for developers, designers, and researchers, this tool enables users to seamlessly extract and save webpage content, providing quick access to essential data.

Development

Contributions are welcome! Please fork the repository and submit pull requests!

Supported Browsers

Technologies

Table of Contents

• Description
• Development
• Supported Browsers
• Technologies
• Table of Contents
• Installation
• Features
• Notifications
• Debugging
• Screenshots
• Structure

Installation

Follow these steps to install the extension:

1. Download the extension package from the official website
2. Open Chrome and go to chrome://extensions/
3. Enable "Developer mode" by toggling the switch in the top-right corner
4. Click "Load unpacked" and select the downloaded extension package
5. The extension should now be installed and ready to use

Features

• Capture Element: ctrl + shift + x

  • Select any element on a webpage to capture its content and styles. Press the shortcut to enter capture mode, use the arrow keys to navigate, and press enter to confirm the selection.

• Toggle Popup: ctrl + shift + x

  • Open the popup by clicking on the extension icon or using the shortcut. Choose the desired format (JSON, Text, PNG) and click the corresponding button.

• Download Data:

  • Save captured data in JSON, text, or PNG formats by using the popup menu.

• Copy to Clipboard:

  • Easily copy captured data to the clipboard for quick pasting by using the popup menu.

• Visual Notifications:

  • Receive color-coded notifications for all actions, indicating success or failure.

Notifications

Example success notification!

Example failure notification.

Debugging

• For general extension health: chrome://extensions/
• For popup / frontend debugging: ctrl + shift + i > Console Tab
• For backend debugging: Open the extension > right click > inspect > Console Tab

Screenshots

Coming soon!

Structure

WebToLLM
├── .github
│   ├── repo-info.yaml
│   └── workflows
│       ├── update-docs.yml
│       └── update-repo-info.yml
├── .gitignore
├── README.md
├── css
│   └── overlay.css
├── docs
│   ├── CNAME
│   ├── icons
│   │   ├── copy-clipboard.png
│   │   ├── download-image.png
│   │   ├── download-json.png
│   │   ├── download-text.png
│   │   └── logo
│   │       ├── web2llm.gif
│   │       ├── web2llm.png
│   │       ├── web2llm_mini.png
│   │       └── web2llm_mini_dark.png
│   └── index.html
├── libs
│   └── html2canvas.min.js
├── manifest.json
├── popup.html
├── popup.js
└── scripts
    ├── background.js
    ├── content_script.js
    └── logging.js

---