Discord image extractor

Discord image extractor - v0 by VercelDiscord image extractor - v0 by Vercel

yo can you make an chrome extension, which in discord gets the latest image uploaded by anyone, then extract the code from it and type, lemme give an example- like in the given image, i want it to extract the code and type and send it as fast as possible

image.png

I'll help you create a Chrome extension that can extract text from images posted in Discord. This extension will use Optical Character Recognition (OCR) to identify and extract text from images.

How to Use This Extension

Create the Extension Files:
- Create a new folder for your extension
- Create all the files shown above with their respective content
- For the icon files, you'll need to create simple PNG icons in sizes 16x16, 48x48, and 128x128
Load the Extension in Chrome:
- Open Chrome and go to chrome://extensions/
- Enable "Developer mode" (toggle in the top-right)
- Click "Load unpacked" and select your extension folder
Using the Extension:
- The extension will monitor Discord for new image uploads
- When an image containing text is posted, it will extract the text
- The extracted text will be automatically typed into the message input box
- You can adjust the delay before typing in the extension popup

How It Works

The extension uses a MutationObserver to detect when new images are added to Discord
When a new image is detected, it sends the image URL to the background script
The background script uses Tesseract.js (a JavaScript OCR library) to extract text from the image
The extracted text is then typed into Discord's message input field

You can customize the extension further by modifying the settings in the popup or adjusting the code to better match Discord's interface structure.

Refused to load the script 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

i think chrome dosent allow loading scripts

You're right, and I apologize for the oversight. Chrome extensions have strict Content Security Policy (CSP) rules that prevent loading external scripts for security reasons. Let's modify our approach to work within these constraints.

Instead of loading Tesseract.js from a CDN, we'll need to include it as part of our extension. Here's how we can modify the extension to make it work:

First, we'll download Tesseract.js and include it in our extension directory.
Then, we'll update our manifest and background script to use the local Tesseract.js file.

Here are the changes:

These changes will allow the extension to use Tesseract.js without violating Chrome's Content Security Policy. The tesseract.min.js and worker.min.js files are now included as part of the extension, and we're using chrome.runtime.getURL() to load them.

To implement these changes:

Update your manifest.json and background.js files as shown above.
Download tesseract.min.js and worker.min.js from the Tesseract.js GitHub repository and place them in your extension's root directory.
Reload your extension in Chrome's extension management page.

This approach should resolve the Content Security Policy issue while still allowing the extension to perform OCR on images posted in Discord. The rest of the extension's functionality remains the same as before.

background.js