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?
Generate manifest.json
can you provide the contents of the manifest?
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
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.