DEV Community

Cover image for Browser extensions - Popup extension
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Browser extensions - Popup extension

We have already had quite the exposure to browser extensions so far and looked at the following items:

This article will look at how we can set up a popup extension. This extension pops up when you click on the icon in your toolbar.

The result for today will be this popup extension showing our React app in the dropdown.

Browser pop up extension

Setting up the popup extension

First, create the new project and navigate to it.

mkdir popup-extension && cd popup-extension
Enter fullscreen mode Exit fullscreen mode

Then let's initialize a new node project.

npm init -y
Enter fullscreen mode Exit fullscreen mode

Now we can start adding the packages we need.

npm i react react-dom tailwindcss vite
Enter fullscreen mode Exit fullscreen mode

And the dev dependencies we'll use.

npm i -D @vitejs/plugin-react postcss-cli
Enter fullscreen mode Exit fullscreen mode

Let's start by initializing the Taiwlidn config.

npx tailwind init
Enter fullscreen mode Exit fullscreen mode

This will create a tailwind.config.js file, where you can place the following config.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['src/*.jsx'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

Let's also add a .postcssrc.json file to our project's root.

{
  "plugins": {
    "tailwindcss": {}
  }
}
Enter fullscreen mode Exit fullscreen mode

The Tailwind config's last step is to add a css folder with a style.css file inside.

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Then we also want a Vite config file called vite.config.js.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});
Enter fullscreen mode Exit fullscreen mode

Also, open up your package.json and add the following scripts.

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
},
Enter fullscreen mode Exit fullscreen mode

Creating the public assets and manifest

Extensions work based on the manifest file to run it in our build. We can create a public folder.

Create another folder called icons and put your extension icons there. (or use mine from the GitHub project).
Also, put a file called manifest.json inside.

{
  "manifest_version": 3,
  "version": "1.0",
  "name": "Popup Extension",
  "description": "A demo popup experience",
  "action": {
    "default_icon": "icons/icon-48.png",
    "default_popup": "index.html"
  },
  "icons": {
    "48": "icons/icon-48.png"
  }
}
Enter fullscreen mode Exit fullscreen mode

Now, if we create this index.html file at the root of our project, we should be ready to try it out.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DDT Popup</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    Hello world πŸ‘‹
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

If you now build and install the plugin, following these directions, you should be able to add it to your browser.

Pop up extension first version

As you can see in the screenshot above, it looks relatively small and unstyled.
It also has no interactivity. Let's change that by adding some Tailwind and React.

Adding Tailwind and React, a popup extension

We already loaded all the needed configurations, so let's start by converting our plain HTML into a React app.

In your index.html, replace the body with the following contents.

<body>
  <div id="app"></div>
  <script type="module" src="src/index.jsx"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

Now we'll have to create an src directory, which will be the main entry point for our React application.

Inside this directory, start by adding an index.jsx file.

import ReactDOM from 'react-dom';
import { App } from './App';

const app = document.getElementById('app');
ReactDOM.render(<App />, app);
Enter fullscreen mode Exit fullscreen mode

This is our basic React init and injects React into our app.
Let's create this App component by adding an App.jsx file.

import Counter from './Counter';

export function App() {
  return (
    <div className='flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white'>
      <p>Welcome πŸ‘‹</p>
      <br />
      <Counter />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

As you can see, this also renders a Counter component responsible for some interactions.
Let's create that one as well: Counter.jsx.

import { useState } from 'react';

export default function Counter() {
  const [counter, setCounter] = useState(0);
  const increase = () => setCounter((count) => count + 1);
  const decrease = () => setCounter((count) => count - 1);
  return (
    <div>
      <button onClick={decrease}>-</button>
      <span className='px-4'>{counter}</span>
      <button onClick={increase}>+</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

As you can see, throughout these components, we also introduced some Tailwind classes that should take care of the styling.

Let's build our app again and try it out in the browser.

React and styled component

It looks to be there, but our app is super narrow, and we can't see much!
Let's fix that by making our main popup a fixed size.
Open up the style.css file and add the following line.

#app {
  width: 350px;
}
Enter fullscreen mode Exit fullscreen mode

Now build the app again and try it out.

Browser pop up extension

You can find the complete code on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (0)