Creating a basic browser extension using SolidJS
Tags: solidjs, typescript, extensions, beginners
Published: 2023-08-05 22:27:23

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](https://nodejs.org/en)
2. [SolidJS](https://www.solidjs.com/)
3. [A Chromium based browser](https://www.google.com/chrome)

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.

```bash
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:

![An example of how the basic SolidJS project structure looks](https://yvellwnvywwynkrgnsvr.supabase.co/storage/v1/object/public/blog/solid-ts-template-structure)

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:

```tsx
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:

```json
{
  "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.

![The loaded browser extension in the chrome extensions screen](https://yvellwnvywwynkrgnsvr.supabase.co/storage/v1/object/public/blog/chrome-extension-screenshot)

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](https://developer.chrome.com/docs/webstore/publish/) from the Chrome Developers documentation.

If you enjoyed this article please don't forget to share, check out my [other work](https://dev.to/devshogun) and [follow me](https://twitter.com/devshogun).