AI-Powered Chrome Extensions for the Web Apps You Can't Replace

There has been a lot of discussion recently about companies using AI to build internal tools that replace SaaS licenses. That is interesting, but it misses a big category of software: the web apps you cannot replace.

Sometimes the constraint is technical. More often, it is not. An insurance company may require you to use its verification portal. A specialty vendor may only accept orders through a clunky ecommerce site. Or a marketplace may be where all of the demand for your product or service lives.

You can build a better internal tool, but you still have to use those sites.

The browser is the integration point

Chrome extensions have always been a way to change the experience of a site you do not control. An extension can read information from a page, add controls to it, and help guide a user through a workflow.

Historically, that was possible but often not practical. You needed to write and maintain custom code for every awkward workflow, and the payoff had to be large enough to justify it.

The latest AI models change that calculation. It is now much easier to build an extension that augments a legacy site, whether that means changing a workflow, extracting information from a page, or adding LLM capabilities directly where people are already working.

Instead of asking someone to copy information from one system into another, you can put the assistance in the browser tab where the work already happens.

A bike search on Facebook Marketplace

I recently had a good excuse to try this out. I was looking for a bike on Facebook Marketplace with a specific set of requirements. The hard part was not finding listings. It was reviewing the photos for each listing to determine whether a bike was actually a fit.

Doing that manually meant opening and reviewing dozens of listings every day. That is exactly the sort of repetitive visual task that an AI model can help with.

So I built a Chrome extension that uses OpenAI to review listing photos and flag the listings that match what I was looking for. Rather than replacing Facebook Marketplace, the extension improves the part of the Marketplace workflow that was taking the most time.

The result is not a fully autonomous bike buyer. It is a faster way to narrow down a large list of listings so I can spend my time looking at the promising ones.

Where this approach works

The Marketplace example is personal, but the pattern applies to business workflows too. Look for web-based processes where a person repeatedly has to review, classify, summarize, or move information before they can make a decision.

A Chrome extension can be a practical place to add help to:

  • an insurer’s required portal
  • a vendor ordering site
  • a marketplace your team depends on
  • an internal legacy application that is difficult to change

The goal is not necessarily to replace the site. It is to remove the tedious steps around it while keeping people in the workflow they already need to use.

See it in action

Check out the demo below to see the bike finder at work:

Watch the video on YouTube

Interested in building something similar for a workflow your team cannot avoid? Get in touch with Setfive.

BigCommerce Bulk Coupon Code Importer

A buddy of mine has an eCommerce storefront through BigCommerce, a hosted eCommerce solution. He was looking to run a Gilt City promotion, so he would have to import ~150 coupon codes into BigCommerce.

My friend spent some time looking around for an import codes feature and I would have assumed that a solution like BigCommerce would support a CSV import for coupon codes as well. However, we Googl’ed around a bit and it turns out BigCommerce does not support CSV imports for coupon codes. We stumbled upon this discussion on the BigCommerce forums discussing this shortcoming at length.

On the forum thread, someone had previously developed an iMacros script to automate importing the codes. Unfortunately, I tried using the iMacros script without any success. It looks like BigCommerce has updated the HTML on the page which is breaking the script. Anyway, looking at the iMacro and the opaque syntax I decided it would be easier to whip together a Chrome extension to automate creating coupon codes so decided to move forward with that.

Chrome extensions naturally lend themselves to automating things like this since it’s pretty straightforward to use the background page to maintain any state and hold variables and then use a content script to manipulate the DOM of the page and submit any forms that you need to.

You can grab the extension here http://setfive.com/misc/BigComm Importer.crx you’ll obviously need to be running Google Chrome for it to work.

Also, fork it at https://github.com/adatta02/bigcommerce-coupon-importer

What it does is add a “Bulk Import” button to the “Coupon Codes” page on your BigCommerce site - http://[yourstore].mybigcommerce.com/admin/index.php?ToDo=viewCoupons

If you click that button, a copy of the “add code” form will be displayed along with a textbox. You’ll just need to fill out the form, enter a list of coupon codes you want to create - one per line, and then click “Start Import”.

Your browser will automatically go through and create all your coupon codes. Thats it!

As always, let me know if you run into any issues or have any comments.

Internet Explorer Extension Quickstart and Skeleton

Recently, one of our clients was looking to build a prototype/proof of concept browser extension for Firefox, Chrome, and Internet Explorer. We were basically looking to inject a script, run it in user space, and modify some of the page’s DOM - like a trimmed down Greasemonkey script.

Doing this in Chrome and Firefox is pretty straightforward since the extensions are built Javascript, this is actually how I built the prototype tru.ly extensions. Unsurprisingly, the “odd man out” is Internet Explorer, this is my first time looking into writing an IE extension and the experience was pretty jarring so hopefully this synopsis can save you some time and frustration.

The first sign of trouble was that there doesn’t seem to be an official Microsoft guide on writing IE extensions. There’s just a bunch of ad-hoc tutorials, some MSDN articles, and then code samples built against every possible combination of language and library.

As it turns out, Internet Explorer has actually supported extensions since IE5 using a technology called Browser Help Objects and continues to support them via BHOs through IE9. In contrast to Chrome and Firefox’s Javascript based extensions, a BHO is a Windows DLL and consequently must be written and compiled using your choice of a Win32 compatible programming language. Given this and from the discussions I saw, the most popular choice seems to be to use C++/ATL to create a COM DLL. Being that I’m deathly afraid of C++ and that this approach was described as “COM DLL hell” I decided to see what else was possible.

After a bit more poking around I found out that it’s possible to use C# and .NET’s Interop libraries to scaffold enough to get the DLL loading into IE. This Code Project article walks through the process but it has several typos and the download containing the files seems to have gone missing. I fixed the typos and built it successfully - you can grab the files from GitHub here.

From my extremely rough understanding of C#, what the code does is create an interface from C# managed code to the unmanaged COM code that IE uses to communicate with extensions. Then, the code registers an event handler to be called once the DOM has finished rendering.

In order to actually build the project, you’ll need to do the following:

  • Install a copy of Visual Studio - I used VS Express 2010 which is free.
  • You’ll then need to import my VS project and build your DLL. If it complains about references to SHDocVw or IHTMLDocument2 you’ll just need to make sure that references to the two DLLs in Greyhound/ exist in your VS project.
  • Once the DLL is built, you’ll need to register it with RegAsm - this is a bit tricky since you need to use the correct version of RegAsm available on your system. This article explains where it should be located. Once you locate it, run the following:
C:\[path to your .NET library]\RegAsm.exe /codebase bin\Release\Greyhound.dll

Thats it. Now start Internet Explorer and once the DOM on a page finishes loading you should see an alert box being generated via Javascript that your DLL is injecting.

The magic is all happening in the following function:

public void OnDocumentComplete(object pDisp, ref object URL)
{
   IHTMLDocument2 doc = (IHTMLDocument2)webBrowser.Document;
   doc.parentWindow.execScript("var d=window.document,s=d.createElement('script'),h=d.getElementsByTagName('body')[0];s.src='http://twitlabs.net/sayhello.js.php';h.appendChild(s);");
}

You’ll just need to edit that script tag to load your own Javascript.

Anyway, pretty gnarly stuff. It’s also extremely frightening that IE extensions are basically full fledged programs that have full reign over your entire system. No sandboxed, no permission limitations, just a fully integrated program that people “casually” download off the Internet.

UPDATED: New Facebook Phonebook Script

I realized this morning that Anonymous Coward’s Facebook Phonebook Greasemonkey script broke awhile back so I decided to rewrite it from scratch.

The original instructions for how to install the script are available here.

I updated the original Userscripts page with the new script so you can download it here.

Once again, this probably breaks your Facebook TOS so I can't vouch for the safety of your account if you do decide to do this.

QR Bookmarklet

I got tired of having to find the same website (mostly recipes) on my phone after looking at them on my workstation or laptop so I decided to whip together a bookmarklet to throw a Google powered QR code on any page.

The bookmarklet will just slap a QR code image with the current page’s URL (window.location) so that you can open the page on your phone. ps. Barcode Scanner for Android will automatically open the URL in a browser.

Without further ado, QR Code Bookmarklet