Firefox extension updates, thoughts on ChatGPT

I just fixed an issue in a Firefox extension that I built a few years ago. The extension itself is not particularly interesting: it lets me press Cmd-Shift-L to highlight any selected text, and then I can copy all the highlights to the clipboard. It's very basic but feels intuitive to me and I often use it to highlight things as I'm reading through web pages.

Unfortunately, it has a notable problem: it just wraps the selected text in a single span element, and this immediately breaks down as soon as you select text that spans multiple elements. It's too basic.

For example, selecting text within a single <p> element would work fine:

  This works
 #----------->
+-------------+ -  -  -  -  -  -  -  -  -  -
|....<p/>.....|     <p/>          <div/>
|.............|              |              |
+-------------++  -  -  -  -  +  -  -  -  -

But selecting text across multiple elements would fail to highlight anything:

  This fails as we cross elements
 #----------------------------------------->
+-------------++-------------++-------------+
|....<p/>...........<p/>..........<div/>....|
|...........................................|
+-------------++-------------++-------------+

The root problem is that I didn't think very hard when I built it: I did it in an hour or two of Stack Overflow-driven development, searching for how to make a Firefox extension and any relevant browser APIs, and changing the code until it worked. It did work, but barely.

Three years later, instead of Stack Overflow, I'm using ChatGPT to fix the code. It was interesting as it felt like a comparable exercise to when I first built the extension. It's still not production-grade code, I'm still the only one using it, I still don't need to understand all the implementation details in depth, and I still don't want to spend much time on it: I just want something that I can get to work within a couple of hours, without much effort.

I copied my old code into ChatGPT, described the problem, and it came back with an initial approach. From there I iterated it and asked for changes and fixes:

• It initially wanted to replace whole parts of the DOM, which wasn't working and seemed like a rabbit hole - so I suggested we just take our initial approach of wrapping text in a span element, but parse the DOM and apply it to all the elements in the selection.
• There were then a few parsing errors that had to be corrected.
• It was adding unnecessary spans to elements with no text content, which I asked to remove.
• I realised I wanted to skip any highlighted text that wasn't visible to the user but that existed in the underlying DOM.
• When testing, I was confused why my range wasn't going beyond a particular svg element. I asked about this, and it helped me figure out that I needed to use the selection's rangeCount along with document.getSelection().getRangeAt(i), because certain elements break up the cursor selection state into multiple ranges, which you have to operate on individually.

It wasn't perfect: I had to prompt it to fix things a fair bit, tell it what approach I wanted to take, do some console logging to check why something wasn't working, make some manual corrections, tidy up the code myself, etc.

Overall though, there was a notable contrast in how far I could get in a couple of hours compared to three years ago when I was using search engines and Stack Overflow for this exact same task. I can't imagine a more basic implementation than the one I arrived at last time. This time around, with similar amounts of laziness, we're doing things that I didn't achieve before^[1]: traversing the DOM, checking range boundary points, handling edge cases, etc.

I think the big differentiator is in how detailed and tailored the inputs and outputs are. Using Stack Overflow I tend to be focused on very narrow generic questions - how do I do X in Javascript? I don't think I've ever actually copy-pasted code from Stack Overflow, because the code is always small enough to type, and often needs customising. But with ChatGPT it's more specifically tailored to your situation and a copy-paste workflow can actually get you started off ok: confirm the code looks safe to run, check the output, and iterate from there.

Obviously there are downsides to this approach^[2]. I didn't think about the problem or solution deeply, I didn't learn anything reliable, I've certainly missed other edge cases. If I did all my coding like this then I'd be missing out on a lot of understanding, shipping a lot of bad code, and I'd probably get into a state where I can't debug problems because I don't understand my code well enough. I'm glad these capabilities weren't around when I was a junior engineer, because the temptation to operate in copy-paste mode instead of thinking properly or reading the docs would have been very strong.

But, for this kind of situation where I don't care about understanding the problem or solution well, I'm not putting anything into production, I'm not doing anything novel, I just want something done quickly that appears to work - then unquestionably I can get there faster and with less effort using ChatGPT than I used to be able to via other tools. I don't have strong opinions on the future of LLMs yet, but I agree with the view that someone who uses these tools is going to have the capability to do certain things more quickly and effectively than before, and for me personally I'm finding it pretty useful - not to write all the code for me, but as a much more capable Stack Overflow-type tool.