ChatGPT 4 - How I created a Chrome Extension that fixed internet videos for me

January 10, 2024

It's been quite some time since I had been thinking about this Chrome Extension that could allow me to resume video playback and add keyboard shortcuts to videos. I started off with some simple code that allowed me to insert some basic controls into videos. However, I faced a technical challenge - The Chrome Developer Documentation.

Chrome Extension API

Link to the Chrome Extension

While the documentation is exhaustive, let's both agree that it's not the easiest to understand and induces complexity paralysis with excessive information and terminologies. As with all things tech, the jargon is just unnecessary.

Enter ChatGPT 4

I started off with a simple prompt:

You are a Software Engineer who is tasked with creating a Chrome Extension that detects <video> tags inside <iframes> or on the HTML page and adds certain shortcuts to it. The shortcuts and their respective description are: Alt/Opt + Right arrow - skip 30s forward Alt/Opt + Left Arrow - skip 30s back You are allowed to ask questions if there are any about the requirements and you need to give me all the working code for that extension.

Surprisingly, it gave me all the code. What's more impressive is the fact that this code just worked perfectly. This is when I knew, I could use GPT4 to boost productivity and combat procrastination.  The next few prompts were successive iterations of what I wanted. It will give you outdated and deprecated APIs but you can course correct by saying something like, "Give me an alternative API usage for x" and it usually obliges.

If you're being lazy with your questions, you'll get lazy answers in return.

One of the downsides I noticed was that it becomes lazy with more complicated asks. However, if you are really precise with your requirements and ask - GPT4 should respond properly.

How exactly did I use GPT4?

1. I made it write code iteratively.

2. Asked it how to publish the Chrome Extension on the store.

Web Store

3. Got it to write the Product Detail description for the Chrome Extension detail page.

Product Details

4. Made it give me Markdown content for my Github repository

5. Asked it for reasoning behind permissions in manifest

Learnings

  1. Be precise with what you need - be as exact as possible in your prompts.
  2. Start small and iterate over multiple prompts.
  3. Fix bugs in the code on your own after trying to make GPT fix it once and then provide GPT4 the correct code for future reference.

Challenges

GPT4 is smart but it's still a LLM.

  1. It will regress to incorrect responses more often. You cannot expect it to course correct itself. E.g. when I asked it to use an alternative API, it gave me the right response. But to my next prompt, it regressed to the old answer.
  2. It will not break down your ideas for you - you will have to do that yourself. You may start with a vague statement - but you will get a lazy response. 
  3. Fix bugs yourself - If there are bugs in your code - you'll likely find it easier to solve it on your own using Stack Overflow or Google, prompt engineering a fix is much harder.

In case you're interested, here's the GitHub repository for my SmartVidResume Chrome Extension.

Donate