Creating a basic browser extension using SolidJS

I always thought that browser extensions were a complicated technology that required some kind of special programming language or compilation method. Turns out they're just web apps.

In this article we'll be building a very simple browser extension for generating QR codes. The technologies we'll be using in this article are listed below:

1. Node.js
2. SolidJS
3. A Chromium based browser

Make sure that you have these installed and ready to go. In order to create a SolidJS project and install the required dependencies you can run the following command.

npx degit solidjs/templates/ts-tailwindcss qrcode-extension
cd qrcode-extension && npm install

Getting started

Now that you have everything that you need installed open up the SolidJS project in your code editor. Your project should look something like this:

Head over to the App.tsx file inside the src/ where you'll see a basic app component.

You can run the app using the npm run dev -- --open terminal command. Feel free to make edits to the component and see your changes reflect in realtime.

Building the extension

The first and only thing that you'll need to install is the qrcode npm package, run this command to do so npm install qrcode.

Note: When using Typescript you'll run into an error about the qrcode package type definitions. In order to fix that error you will need to run npm install -D @types/qrcode.

Head over to the App.tsx file and modify the code like so:

import { createSignal, type Component } from "solid-js";
import QRcode from "qrcode";

const App: Component = () => {
  const [qrDataUrl, setQRDataUrl] = createSignal("");
  let canvasRef: HTMLCanvasElement;

  async function setter(v) {
    QRcode.toCanvas(canvasRef, v.currentTarget.value);
    setQRDataUrl(await QRcode.toDataURL(v.currentTarget.value));
  }

  return (
    <div class="flex h-[400px] min-w-[300px] flex-col items-center justify-center">
      <h1 class="text-3xl font-bold">QR Code Generator</h1>
      <input
        class="rounded p-2 outline outline-black"
        placeholder="Input text to encode..."
        onkeyup={setter}
      />

      <canvas
        class="m-4 h-0 w-0 rounded outline outline-black"
        ref={canvasRef}
      ></canvas>

      <a href={qrDataUrl()} download="qrcode.png">
        Download
      </a>
    </div>
  );
};

export default App;

In the above code snippet we're importing the createSignal primitive from SolidJS, as well as the QRcode package. We're also creating an input field that takes in the text that you would like to encode then calls a function called setter, which takes that text and converts it to a QR code using the QRcode package.

A download button is also provided which uses the generated data URL we set in the qrDataUrl signal.

That's all the code we need. Next just build the project by running the npm run build command. Once that's done, a dist folder will be created in the current working directory. cd into that folder and create a manifest.json file with this content:

{
  "name": "QR Code Generator",
  "version": "1.0",
  "description": "A generic QR code generator",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_popup": "index.html"
  },
  "manifest_version": 2
}

Testing the extension

Open up a Chromium based browser and head over to this url BROWSER://extensions, "BROWSER" being the name of your browser. e.g chrome://extensions, arc://extensions.

Once there you should see a button at the top right corner titled "Load unpacked". Click on that button and navigate to and select the dist folder that was created earlier. That's it! The extension should appear and be loaded into your browser.

Check your list of extensions and the QR Code Generator extension should be among them.

That's it! Your extension should be ready to go. If you would like to learn how to publish your extension to the Chrome web store I recommend following this guide from the Chrome Developers documentation.

If you enjoyed this article please don't forget to share, check out my other work and follow me.