How to build a Chrome Browser Extension in 15 sentences using Windsurf windsurf oci browser extension

How to build a Chrome Browser Extension in 15 sentences using Windsurf

I created — well, maybe I should rephrase that to: I was co-creator? a co-inspirator? — a Chrome Browser Extension for uploading local files to an Oracle Cloud Storage Bucket.

How to build a Chrome Browser Extension in 15 sentences using Windsurf 1LupTuRqyqGFc6qLBNkw9QA
Windsurf IDE, Cascade Agent producing Browser Extension to interact with Cloud

In order to produce that extension — in 25 minutes give or take — I fed about 15 sentences (not all of them compete, certainly not correctly spelled) into the Cascade agent in Windsurf IDE. Here they are:

How to build a Chrome Browser Extension in 15 sentences using Windsurf 1zKz 8DrtRHk HgsEyAFUaA
This is my input into Cascade — over a period of perhaps 25 minutes. I also had to accept it executing commands and instruct it to keep its changes

In addition to feeding these words, I also had to press buttons to allow Cascade to run terminal commands and to keep the changes it had made.

This is what the project looks like — all created by Cascade, except for the three icon files:

How to build a Chrome Browser Extension in 15 sentences using Windsurf
The project as created by Cascade (with three icons added manually by me. Not pretty icons)

This is what the end result looks like — a browser extension running in a side panel in the Chrome (or Edge or Brave) browser:

How to build a Chrome Browser Extension in 15 sentences using Windsurf 11KsmDACc9Uz jHuKTyovTQ
The Extension as generated by Cascade. Fully functional in under 25 minutes. Select files from the local file system and upload them to a Bucket on Oracle Cloud through a Pre Authenticated Request url

After the upload is complete, these three files are available through the OCI Object Storage page in the console:

How to build a Chrome Browser Extension in 15 sentences using Windsurf 1XMv JCPGupKN9AfgWIl2Rw
Files uploaded through the extension from the local system are now in the bucket in OCI — the extension is fully functional

Supported by an Options page opened from the Extension Details page to set the PAR Url that links to the Storage Bucket on Oracle Cloud:

How to build a Chrome Browser Extension in 15 sentences using Windsurf 1wl1HMq3 aehrOcq6o tq1A
The PAR (Pre Authenticated Request) Url is set a configuration setting by the user through the Options page for the extension. This page was generated by Cascade as well as the logic to store it in chrome storage

The particular functionality of the extension is not what I want to draw your attention to. Nor its implementation.

The fact that through a simple dialog — helped a bit by my earlier knowledge of extensions that allowed me to provide slightly better instructions and to evaluate the artefacts produced by Cascade — could cocreate such an extension in so short a time frame and with so little effort is pretty wild. Writing this article takes much more time and effort. (there must a an app for that …)

Let me give you a little insight in how Cascade’s end of the conversation — this pair programming session — looks:

The first two interactions resulted already in a functional extension:

How to build a Chrome Browser Extension in 15 sentences using Windsurf 1MnmAzjmiFZMCzi6jitTu4g
First two interactions with Cascade — resulting in a functional extension. Just some polishing required

I wanted the PAR to be an option in the extension configuration, not a filed in the main UI for the extension.

How to build a Chrome Browser Extension in 15 sentences using Windsurf
Getting Cascade to make the PAR url into an extension option

I prefer to have the style definitions in separate CSS files rather than in the HTML files:

How to build a Chrome Browser Extension in 15 sentences using Windsurf 1pVYv1QA6 SAndE yUy3n A
Making Cascade use CSS files instead of inline style definitions

Not a problem of course for Cascade.

Then I wanted to publish the extension on GitHub

How to build a Chrome Browser Extension in 15 sentences using Windsurf 1oyfxv2db slSm6 eWcg7yQ
Collaboration on publishing the extension on GitHub

And the repo is live at https://github.com/lucasjellema/quick-oci-object-manager-browser-extension.

How to build a Chrome Browser Extension in 15 sentences using Windsurf 1aj0Aub4eNimKKKda w1TGw
The Extension on GitHub

And has a very instructive readme.md as well:

How to build a Chrome Browser Extension in 15 sentences using Windsurf
Readme generated and refined in several steps by Cascade

Wrapping up

I had fun using Cascade to create this extension. I had created extensions before and I also built code in the past to upload files to OCI. I could therefore assess and appreciate the work done by Cascade. The deliverables are quite good and what is perhaps even the best part is the natural interaction I had with Cascade. Similar to a (patient, knowledgeable and quick) coworker who I could instruct.

I have not yet tried instruction cascade just by speaking (instead of typing) — I am not sure that can be done at this point. Nor have I tried providing instructions through sketches or images, something that apparently can be done.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.