Build a ChatGPT-enhanced and Whisper API Chrome Extension

Explore the project structure, set up the chrome extension locally from starter and completed repos on GitHub, clone or download, and review manifest, background and content scripts for local development.

Set up and test your form filler 5000 Chrome extension locally by enabling developer mode, loading the extension from your directory, and testing across diverse web pages to ensure robustness.

The lecture updates the manifest to request tab permissions, defines a content script to extract form fields, and uses the background to send API requests to ChatGPT for label suggestions.

Build a background script that calls the OpenAI API using fetch with proper headers and bearer authentication. Utilize the ChatGPT-3.5 Turbo model and handle responses in the extension.

Build the background function to generate suggestions from form fields, mapping type, name, and label, gathering page content via inner text, and prepare to pass fields from the content script.

Identify form fields, map them into an array, extract names or placeholders, and send messages to the background script to retrieve and apply field suggestions.

Define a system prompt to guide the chat assistant as a software engineering content creator, specifying audience and JSON formatting. Extend tokens and make the function async for testing.

Continue wiring the Chrome runtime background script to handle onMessage responses from ChatGPT, parse JSON, and populate form fields via the content script, with testing and future API key storage.

Learn to store and manage API keys in a ChatGPT and Whisper API Chrome extension by adding storage permissions, creating an options form, and persisting keys across sessions.

Learn to add a toggle button in a Chrome extension to enable or disable OpenAI features, update a badge, store the enabled state, and coordinate popup, background, and content scripts.

Explore whisper as a speech recognition tool, using the OpenAI API for reliable transcription up to 25 MB uploads, and enable dictation into a form field with command B shortcuts.

Inject a mic icon into each form field by converting an svg into a div, style it, and attach a click event to trigger audio recording logic in the browser.

Implement an async voice fill function in the content script to access the mic with getUserMedia, record audio in chunks, and send an audio buffer to the Chrome runtime.

Create a shared utils module for api keys, whisper and chat gpt requests, update the manifest to share utilities between background and content scripts, and validate the service worker.

Develop a Chrome extension that connects to the whisper API by sending audio data as multipart form data, using keys, an async function, and error handling.

Register as a Chrome web store developer, pay the $5 fee, prepare the extension by updating the manifest and description, remove the api key, zip, and upload with privacy policies.