Hi, everyone!

TL;DR: I made a chrome extension that lets you run Python code and see text and plot outputs in ChatGPT

I’ve never really worked on any personal projects before. Maybe one. I enjoy coding and I think it’s fun, I just don’t do it in my free time. But I wanted to change that, and so I set out to create something. They say the best projects are the ones you will use yourself, so I just went about my regular day, but paying attention to any project ideas that might pop up into my head.

When ChatGPT first came out, I was super amazed by it. One thing I did a lot was tell it to code for me. It’s just much faster than searching through google and stackoverflow.

One thing I noticed was that the way I was using ChatGPT was similar to how I would use Jupyter notebooks. I would have some text describing something, then have a code example. That’s similar to what I do in ChatGPT, have a prompt that describes what I want, then have ChatGPT give a code example. The only thing missing was that I couldn’t run the code. Instead, I would have to copy the code out to something that could.

I wanted to have the full Jupyter notebook experience in ChatGPT. I already had a name in mind, too: JPT. I wanted to combine Jupyter and ChatGPT somehow and that’s what I came up with.

The project isn’t polished at all, but I wanted to quickly release and iterate. And of course, if it isn’t really used, there’s not much point in continuing.

I have most of the core functionality I wanted to include:

1. Run/edit/copy Python code
2. See output, plots, and errors
3. Use a bunch of packages, including your own
4. Upload and download files

It works quite well. There’s a piece of software called Pyodide that does all the heavy lifting. It’s the CPython interpreter compiled to webassembly, so it can run on the browser. That’s what I meant by actually running Python. The extension doesn’t trick ChatGPT into becoming a Python interpreter or send your code to some code execution server. It runs the code right there in your browser. It’s also what makes it fast.

Again, this is one of my first projects, so I was quite obsessed over it and constantly looking at downloads and just thinking about ideas on how to improve it or get more reach.

It has been a really good learning experience. You get to see the whole product development pipeline after the coding is done. Once I finished coding, I released it out onto the chrome webstore, but obviously I wasn’t going to stop there. I wanted to figure out how to get more people to use it, so I shamelessly tried to make posts about it on reddit and hackernews. It didn’t really gain traction on either platform. It is getting downloads, though, and it has a little over 900 users now. I’ve been trying to figure out how to get the featured badge and how to make the store listing more professional in hopes that it boosts the visibility of the extension.

There’s definitely a lot to learn on this side of the product development world, as I’ve usually just been on the coding side. I’d love to learn more about sales, marketing, product, and design.

I’ve also had a couple of ideas on how to improve the extension:

1. Make better UI/UX for handling files

   Right now the way I handle uploading and download files is atrocious. I’m planning on making a proper UI using the extension popup. When I first released the extension, it wasn’t able to handle files. A few weeks after I released it on the webstore, ChatGPT came out with their code interpreter plugin. I wanted to use that publicity to get some more users, so I felt like I had to be able to handle files since ChatGPT’s plugin could. I coded it in a super hacky way to get it out as soon as possible.

2. Supporting Claude, Bard, and other ChatGPT competitors

   A little bit boring and tedious, but it’s definitely a nice-to-have. It would be great if I could figure out a nice design so that I can hook onto different UIs easily.

3. Infinite loops will freeze the chrome extension

   This is basically a Pyodide and chrome extension thing. Pyodide requires webworkers to be able to interrupt execution and getting webworkers to work on chrome extensions is just annoying. I don’t think this is a deal breaker, but it’s just not great.

4. Optimizing the MutationObservers to make UI and event handling more robust

Let me explain this last one. I thought it was quite an interesting problem that would be cool to research a bit more. When I intially wrote this extension, I needed to think about how I could inject the UI into ChatGPT’s UI. ChatGPT’s app is dynamic, so I needed to dynamically add the UI onto each of the Python code blocks. The main way to do this is using a MutationObserver. The thing is, I thought the performance of trying to observe the entire application was going to be too poor, so I tried to come up with a more optimized solution, which includes some weird observer directed acyclic graph structure.

This solution sucked for so many reasons:

1. Premature optimization is the root of all evil

   I didn’t even bother to check whether the unoptimized solution was actually bad or I just thought it was bad

2. The code is hard to read, modify, and reason about

3. The code is really frail and depends a ton on the exact details of the ChatGPT UI

   For example, when ChatGPT changed the regenerate response button from “Regenerate response” to “Regenerate”, my extension broke. Yes, I know. Terrible code.

It’s been really fun working on this project. I’m so much more interested and motivated than in the projects I work on at work or school. I really do feel like I learned a ton and I’m learning more from this project even now. One thing is for sure, I want to keep creating. I’ll continue to work on this or try tackling a new project.

Thanks for reading!