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.

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:

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:

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:

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:

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:

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:

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.

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:

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

Collaboration on publishing the extension on GitHub

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

The Extension on GitHub

And has a very instructive readme.md as well:

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.

The next steps for this extension — and a far more involved collaboration with Cascade — is described in this follow up article Windsurf powered Software Engineering — From Commanding Officer to Collaborators