How to Write a Chrome Extension Using ChatGPT
How often do you encounter this situation: you use some web service and you really miss some small but important function that the developer won’t add just for you? My colleagues from the support team came to me with this problem — users send an order number to the chat on the site and to view information about it, you need to copy the number to the clipboard, paste it in the back office and run the search. To simplify the process, I put together a plugin for Chrome in 15 minutes that turns order numbers into active links. Now you can open an order with one click.
In this article, I'll show you how to create your own Chrome extension using ChatGPT without any deep knowledge of front-end development.
We create a structure
We start the communication with ChatGPT with a general description of the future extension and a request to prepare the structure and files. My request looked like this:
Help me write an extension for Google Chrome. It will expand the capabilities of the online chat service https://example.io and wrap order numbers into links to a page on another domain. Let's start with the wrapper, make a common structure and files.
In response, ChatGPT will collect the basic structure for you and tell you about it. In my case, it was a manifest, a script to run in the background, a script to run on web pages, and files for the pop-up window. If you don't need any of this, immediately ask ChatGPT to remove it. In my case, the plugin doesn't need an interface, so I asked to remove the files for the pop-up right away.
The next step is to prepare the icons; for the expansion you need 16×16, 48×48 and 128×128 icons. You can take something from free sites (for example, icons8 or flaticon) or ask to generate ChatGPT (but the result is not always normal).
We create a directory, save all the files that ChatGPT made in it, add icons and we can try to connect our currently empty plugin in Chrome. Open chrome://extensions/ in a new tab and click the “Load unpacked extension” button, select the directory and watch for any errors. If there are errors, copy their text to ChatGPT and ask them to fix it.
Adding functionality
In order for ChatGPT to implement the functionality correctly, you need to formulate the task well. If you need to manipulate the display of content, the formulations should include a description of the page elements and the actions to be performed with them. For example, for our chat, we go to the desired page with dialogs, open the developer tools and use the selector to select the desired page element:
We go up a level and see that all dialogues have a common class message-textwe formulate the task for ChatGPT:
You need to wrap the order ID in a link. To do this, you need to find the text inside all div elements with the message-text class. There may be other div elements inside, and you need to go through all the child elements. New messages regularly appear on the page, so you need a restart mechanism with the replacement of newly found links. We look for text in the format of 7 digits in a row, for example 58293034 and change them to a link of the form https://example.io/admin/?findOrder=…, instead of … we substitute the identifier. The link should open in a new window.
ChatGPT will issue updated JS file content for this request, replace the files in the directory and click the “Update” button on the extension page in Chrome’s extension management. Check how the module works. If we find errors, we report them to ChatGPT. In our example, some links did not wrap, while others wrapped again with each page refresh, so we take another approach:
It is necessary to avoid double wrapping in a link, that is, if the identifier has already been made a link, it is not necessary to remake it again. And wrapping does not work for the following example of markup:
See what's up with order 3918249
The fix iterations can be repeated until ChatGPT produces a fully working version of the extension.
Complicating the task
If your task is more complex than simply manipulating the appearance of the site, you can use ChatGPT to create more complex scenarios. For the online chat, I additionally created a mechanism that automatically tags the dialogue when selecting a response template. To implement such logic, you need to find points that the extension can “catch on to”. In the example with the chat, we click on the response template selection and look at the interface; there are no changes in it that could be recognized. We switch to the Network tab in the developer tools and see that selecting a template initiates sending a request to collect analytics:
This request is convenient to intercept and use as an entry point for further actions. The request also contains information about the template name, into which you can embed information about the desired tag.
The next step is to figure out how the tag is sent to the server. We do this in the interface and see the request:
An algorithm of work is emerging: we intercept analytics requests, find those that report the use of a template, extract the name and generate a request to the server to install a tag.
The prompt for ChatGPT looked like this:
You need to catch HTTP requests made by the page and if this is a POST request to the address https://example.io/eventsif the event request matches “Dialogs – inserted a saved response”, you need to take the params parameter from the request[’Название ответа’]. In the response name, you need to take the part after # (for example, if there is “abc def#hij”, you need to take “hij”) and call it tag_name. Then perform a POST request to the address https://example.io/tag and pass the tag_name parameter, additionally pass the random_id parameters with a random number, id_as_string is always true and app with the value 0000. Additionally, you need to add the Authorization header with the body “Token XXX” to this request, where instead of XXX, the contents of the cookie with the name auth_token are substituted
The solution from ChatGPT may not work the first time, sometimes the neural network can make mistakes in the manifest file or code. For example, in one of the iterations, ChatGPT unexpectedly changed the manifest version to 2 and Chrome refused to launch the extension. When this happens, describe the error in the prompt and try the new solution that you get in response. If it does not work, try regenerating the response before sending new prompts.
Extension Distribution
If you want to share the extension with your team or the world, there are two distribution options:
Self-distribution – you can publish all the extension files and users will install it in the same way, via the “Download unpacked extension” button. This method does not require additional costs, but it is more difficult for users and they will not be able to receive updates automatically.
Publishing to the Chrome Web Store – the extension can be public and searchable in the store, or private with access for specific users or via a link. The version can be updated centrally.
To publish the extension, open developer's personal account. Registration is paid and costs a one-time fee of $5, with no regular payments. To add an extension, you need to pack the directory with the extension into a ZIP archive, click “Add product” and upload the file. After that, specify the extension description, upload the logo, screenshots, fill in the remaining fields and send the extension for moderation. If you are making a private extension, the quality of the description and screenshots will not affect moderation and you can not bother with this.
On average, the review process takes 1-2 days. If the moderators write you some technical comments, ask ChatGPT to fix them and upload a new version for review.
If you are making a public version of the extension, you can monitor statistics on active users, installations, and page views in the store in the developer's account.
