Page Magic: A Chrome Extension to Modify Webpage Appearance via Natural Language 74

Page Magic is a Chrome extension that leverages AI to customize the appearance of web pages, allowing users to modify the look of any website through AI technology. Users can simply tell Page Magic what changes they want using plain instructions, such as adjusting the layout, modifying colors, or adding elements. It supports making multiple changes to the same page, and changes can be enabled, disabled, or removed at any time.

Key Features

• User Interface: Provides a clean popup window where users can view web page changes in real time after entering instructions.

• Settings Options: Users can add API keys, select AI models, and view API usage costs.

• Real-time Preview: After entering change instructions, the web page displays the effects instantly.

Installation

Install via Chrome Web Store

• Page Magic is available on the Chrome Web Store, and users can download and install it directly from the store.

• Chrome Web Store link (needs to be replaced with the actual extension ID).

Build and Install Locally

If users prefer to build and install the extension themselves, they can follow these steps:

1. Clone the GitHub repository.

2. Install dependencies: Run npm install.

3. Build the extension: Run npm run build.

4. Open chrome://extensions/ in Chrome and enable Developer mode.

5. Click "Load unpacked" and select the cloned repository directory.

6. Find Page Magic in the extensions list and click "Options" to configure it.

7. Add the Anthropic API key and select the model to use.

8. Click "Save" to save the settings.

How to Use

1. Open any web page.

2. Click the Page Magic extension icon.

3. Enter change instructions in the popup window.

4. Click the "Apply" button, and the changes will take effect within seconds.

5. Changes are applied cumulatively, so users can make multiple changes to the same page, and can enable, disable, or remove changes.

Use Cases

• Web Page Personalization: Users can adjust web page colors, fonts, layout, and more according to their preferences.

• Development and Testing: Developers can quickly test web page changes without manually modifying code.

• Accessibility Tools: Helps users with visual impairments adjust web page accessibility settings.

Project Address

Github: https://github.com/khaledh/pagemagic