How I used ChatGPT to write a custom JavaScript bookmarklet
Over the past few months, we've put a lot of time into exploring how ChatGPT can help us write code. In this article, I'm going to take you through the process of using ChatGPT to do just that.
As part of my daily flow, there's an annoyance I wanted to address. Creating the "Also" references in my ZDNET articles takes a bunch of steps. For reference, here's one such Also link:
Also: Okay, so ChatGPT just debugged my code. For real.
Doing that takes a series of steps (shown below), which I wanted to eliminate. I do a bunch of these in most articles, and it's not only annoying, it's rough on my wrist.
But is it possible, without writing a single line of actual code, to create a JavaScript bookmarklet to eliminate this annoyance? Can non-programmers accomplish small projects like this?
The answer is yes. But it's not as quick or intuitive as you might like.
I recorded each of the steps I took to create this capability in a series of diary-like log entries. I tend to work on projects like this by doing a little bit, recording my thoughts and observations, then stepping away to let that percolate in my brain while working on other deadline assignments. Then I come back, do a bit more, and write a bit more.
By reading the log entries, you will be able to get a feel for the process of ChatGPT programming-through-prompting. At the end, I'll discuss any insights the process has helped me discover.
Let's get started.
Log Entry 001 - Friday, 2:10pm
So, I just decided it's time to have ChatGPT write some code for me. There's a repetitive task I do all the time, multiple times during the day, and it's time to have a button that saves me steps. I'm going to think on this while working on another article.
Log Entry 002 - Friday, 2:45pm
It turns out it's not as easy as all that. You can't just tell ChatGPT to "write me a button that saves me steps." You actually have to be able to describe what you want it to do. That is a skill all by itself.
Now, fortunately, I've been coding for decades, so I know how to create a specification and even how to just describe what I want. Time to think. I'll be back.
Log Entry 003 - Friday, 4:02pm
Okay, so first I have to be able to describe what I want. Once I've described it, I can go and try to make ChatGPT give me code to automate this process. I want something that reduces the clicks involved in making our Also links.
That link consists of a few elements:
- The string "Also: ". Note that it has a colon followed by a space
- The name of an article, turned into a hyperlink
- The entire thing done in boldface
It seems simple enough, but here are the steps I take each time I want to make one of these.
- Find the article I want to "Also". This I won't automate, since it's different each time.
- Go to that article's page. This, too, I won't automate. But I want to automate everything that follows.
- Copy the title of the article
- Switch to the ZDNET CMS and click on the line where I want to insert the Also.
- Type the string "Also: "
- Click after "Also: " and select Paste and Match Style from the Edit Menu. I can't use the ^V keyboard shortcut because otherwise I'll get a huge headline font. And I can't use the Paste and Match Style keyboard shortcut because it requires pressing too many keys at once to reliably do each time.
- Now, switch back to the article and copy the URL.
- Switch back to the CMS
- Select the headline just pasted
- Type ^K as a shortcut, which opens the insert link dialog.
- Paste in the URL, click OK.
- Select the entire line
- Boldface the text.
That's basically 11 steps, a bunch of mouse clicks, some click and drags, and a bunch of keypresses. I want to reduce that to one click and one paste.
Log Entry 004 - Friday, 4:57pm
That was definitely a description of my process, and it also describes a couple of problems. But it doesn't say anything about what, exactly, I want in a new tool. For ChatGPT to write the code, it has to know what I want it to do. More thinky time.
Log Entry 005 - Friday, 7:12pm
I decided that, rather than do a Chrome extension, I'll do a JavaScript bookmarklet. Those are easy to add to a bookmark bar, and don't require a lot of extra installation hassle. All you have to do is right-click on a bookmark bar, choose Add page, and (1) enter the title. The JavaScript itself gets pasted into the URL field (2).
Here's a first draft of what I want this new bookmarklet to do.
I want to create a JavaScript bookmarklet. When pressed, it retrieves the current URL of the current page. It also retrieves the title of the page. It places a piece of rich text into the clipboard that consists of the string "Also: " followed by a rich text link with the title of the link and the retrieved URL. The entire rich text block needs to be bolded.
If I can get ChatGPT to give me something that works, all I'll have to do is click the button, switch over to the CMS, find my spot, and paste. Much faster.
Now, all I have left to do is…everything.
Log Entry 006 - Saturday, 8:30am
I'm brave. I decided I'm going to feed the exact description above to ChatGPT and see if it will give me code that works. Hey, it's worth a try.
Log Entry 007 - Saturday, 8:41am
Well, that totally didn't work. All it did was keep whatever was previously in my clipboard. But part of ChatGPT's response gave me some pause.
It's also important to mention that the document.execCommand('copy') is marked as obsolete in modern browsers (e.g., Chrome, Firefox), as they suggest using the Clipboard API, but as of my knowledge cutoff in 2021, the Clipboard API doesn't support copying rich text to clipboard directly.
So, the code it knows might be obsolete. Let's try to see if we can use ChatGPT Plus's plugins with the WebSearchG plugin.
Well, that also didn't work. Instead of code, I was sent to sites like Stack Overflow to read articles on how to manage clipboard data.
This won't do. I'm trying to get ChatGPT to do my programming for me. Let's try the ChatGPT Plus add-on Code Interpreter and see if it can help.
Log Entry 008 - Saturday, 9:08am
That didn't work either. It responded with:
Unfortunately, as of my knowledge cutoff in September 2021, there's no direct and universally supported way to copy rich text to the clipboard using JavaScript.
Rats! Foiled again! Time for more coffee.
Log Entry 009 - Saturday, 10:27am
I've been thinking on this a while (and fueling with more coffee). Perhaps the phrase "universally supported" needs to be addressed. I'm changing my first line from "I want to create a JavaScript bookmarklet." to "I want to create a JavaScript bookmarklet in Chrome."
Let's see what that does.
Log Entry 010 - Saturday, 10:33am
Well, no. That gave me back the HTML in text form. That's not something I can directly paste into the CMS. I need it to return rich text on the clipboard.
Log Entry 011 - Saturday, 11:20am
I'm thinking that maybe ChatGPT Plus didn't use Code Interpreter, even though it was enabled. To use plugins, sometimes you have to explicitly tell ChatGPT to do so. Let's try this as my opening line:
Use code interpreter for current browser api calls. I want to create a JavaScript bookmarklet.
Oh, yeah. That works! Check it out. This was created with a single click on my bookmarklet:
Also: I used ChatGPT to write the same routine in 12 top programming languages. Here's how it did | ZDNET
Log Entry 012 - Saturday 1:04pm
The fact that this works as well as it does is just super-cool.
That said, I don't like the " | ZDNET" at the end of the string. So I'm going to see if I can convince it to remove it.
Log Entry 013 - Saturday 2:27pm
Lunch was nice. Fresh, wild-caught rockfish from right here in the Pacific Northwest. It's pretty inexpensive because it's a local catch. A little lemon and Old Bay. Brain food. And with that…
I'm at an interesting decision point. There are three ways I can proceed.
One is to try to modify the original prompt to add the new features I want. That's the best choice if I have to start a completely new session.
The gotcha to that approach is that ChatGPT doesn't always return the same results when asked the same question. So if I feed it an extended prompt, I might get back something that works, I might get back something that partially works, or it might decide to go completely afield and recount to me the titles of the works of William Shakespeare in conversational Klingon.
The second approach is to write a prompt that asks ChatGPT to modify the previously provided code with the new feature. This will work if the session is still active.
A third approach is to feed ChatGPT the code it previously generated and ask it to make changes. I like that approach, but it's a bit messier.
For now, I'm going to try the second approach. I'm going to see if I can convince it to drop the " | ZDNET" string at the end of the title. Let's try this as a prompt:
Please modify the previously-generated code and remove the string " | ZDNET" at the end of any titles where it exists. Make that feature case insensitive.
Okay, so that broke the script. As with a previous time when it didn't work, it's just keeping whatever was previously in my clipboard.
Let's try the first option, modifying the full prompt. I'm going to add the mini-prompt to the end of the main prompt, launch a new session, and see if I get any joy.
On my first try, it failed. But then I specified I wanted it to create "a JavaScript bookmarklet for Chrome," and it worked!
Check it out. Here are two Also links created with my AI-written bookmarklet.
Also: How to use ChatGPT to write code
…and..
Also: I'm using ChatGPT to help me fix code faster, but at what cost?
The final code
Functionally, my code is complete. Here's the final code block provided by ChatGPT:
And here's the final prompt I ended up using. Note that this requires ChatGPT Plus, GPT-4, and the Code Interpreter add-on.
Use code interpreter for current browser API calls. I want to create a JavaScript bookmarklet for Chrome.
When pressed, it retrieves the current URL of the current page. It also retrieves the title of the page. If the title of the page ends with " | ZDNET" (case insensitive), it removes that string from the end of the title.
It places a piece of rich text into the clipboard that consists of the string "Also: " followed by a rich text link with the title of the link and the retrieved URL. The entire rich text block needs to be bolded.
Insights and observations
This project was completed almost exactly 24 hours after I started it. Of course, I didn't put in 24 hours of work. I'd say it was probably about 90 minutes of actual work, interspersed with other work, family weekend time, and some thinking time.
This required a lot of thinking.
I've written a lot of JavaScript. While I haven't dealt with rich text all that much, I definitely have the coding experience to have written this from scratch. It wouldn't have taken me just 90 minutes to write, but I probably could have completed it over a weekend.
AI-driven coding is a very different mindset. While both doing your own coding and using the AI require a very clear understanding of what you want the code to do, the way of constructing the final product is very different.
I've said this before, but it was proven here: coding using the AI feels a lot like managing another programmer. Coding is syntax and algorithms, a mind-meld between my brain and my development system.
With code, especially such a small project as this, it's pretty easy to figure out why something's not working. But with AI-generated code, who knows? There's a lot of guesswork. Even the AI doesn't really know. One minute it will tell you it "can't do that," and the next, it does it.
It feels a lot more like negotiating with Scotty from Star Trek (who always used to tell Captain Kirk it couldn't be done or quote an excessive turnaround time so he'd later look good) than chiseling working code out of the raw ASCII produced by every keyboard.
There are places where knowing how code works helped in instructing the AI. For example, I told it to filter for ZDNET but ignore case. That's because I know that we might find ZDNET, ZDNet, and possibly other formats. I can't tell you how many times I've been stung by a case dependency.
I also needed to know that the output produced is called "rich text." That's not something someone with no programming experience is likely to know. So, for such a person, there might have been a lot more frustration getting the AI to place the right data on the clipboard.
As part of this experiment, I wouldn't let myself touch the code. Other than copying it from ChatGPT and pasting it into my bookmarklet, I didn't touch, modify, change, or enhance the JavaScript code.
Still, I did get a working bookmarklet that will, without a doubt, save me (and my editors) time and annoyance. And that's very cool. I am seriously wildly stoked about having this feature. Because I do these Also lines so much, and they are so tedious, this new two-clicks feature makes me very happy. I'll give this point to ChatGPT's coding chops.
Just don't confuse getting ChatGPT to write a very small, pinpoint application with thinking it can tackle a big project. All the skills of project management, product specification, team management, production, and testing are needed. Those don't replace easily with an AI.
If you want to build something for your own use, go for it and tell us about it. What would you ask ChatGPT to build for you? What functionality could a bookmarklet offer that can save you time? Let us know in the comments below.
You can follow my day-to-day project updates on social media. Be sure to subscribe to my weekly update newsletter on Substack, and follow me on Twitter at @DavidGewirtz, on Facebook at Facebook.com/DavidGewirtz, on Instagram at Instagram.com/DavidGewirtz, and on YouTube at YouTube.com/DavidGewirtzTV.