Skip to main content

Create a simple Chrome Extention with ChatGPT

· 3 min read
Rajat Venkatesh

This is a multi-part series describing the process to create a chrome extension that parses SQL and formats it. This part describes how I used ChatGPT to create a simple chrome extension that accepts and pretty-prints a JSON snippet.

In each step, I provide the prompts and the commits I made to the project, code snippets or describe the steps I executed.

Create a simple chrome​

can you create a chrome extension that can read text from all elements in html and modify them?

Commit to Add content.js

Generate manifest.json​

can you provide the contents of the manifest?

Commit to Add manifest.json

Load and test the chrome extension​

please provide the steps to test the extension

Sure, here are the steps to test your Chrome extension:

1. Open Google Chrome and go to the Extensions page. You can get there by 
   clicking the three dots in the top-right corner of the browser, selecting 
   "More Tools," and then selecting "Extensions."

2. Enable "Developer mode" by clicking the toggle switch in the top-right 
   corner of the page.

3. Click the "Load unpacked" button in the top-left corner of the page.

4. Navigate to the folder where your extension is located, and select it.

5. Once you've loaded your extension, you should see it listed on the 
   Extensions page. Make sure that the toggle switch next to your extension 
   is turned on.

6. Open a web page that matches the URL pattern you specified in your 
   `manifest.json` file.

7. The content script should run automatically when the page loads, modifying 
   all the text on the page. Check to see if the text has been modified as 
   expected.

If the extension doesn't work as expected, you can check for errors by opening 
the Developer Tools in Chrome (`Ctrl + Shift + I` or `Cmd + Option + I` on Mac) 
and selecting the "Console" tab. Any error messages or console logs generated 
by your content script will be displayed here.

If everything works as expected, congratulations! You have successfully 
created a Chrome extension that modifies text on web pages.

Add support for json pretty-printing​

change the chrome extension to accept json in a text box and then pretty print it

Commit to Add a popup html

Popup

Open a new tab in a chrome extension​

A popup does not provide enough screen real estate to enter or view a SQL script. I referred to this StackOverflow answer to open a new tab instead of a popup.

Commit to Open a new tab

New Tab