Skip to main content

· 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