Adding a Popup to Our Web Extension

Now it’s time to start building our own extension the note taking app

Remember you can find all source code at webextensiontutorial.com but you can just follow along

So I will start by making the popup look nice

If I open popup index.html if you remember we used to have this here before I just cleared it in the previous chapter and I’m looking for a main.ts a TypeScript file

So I’ll just add it back

The index.html is the entry point so in the main.ts I don’t need to define it similarly as I would in the background or content script

So I can just start writing my JavaScript like if it was a normal page

Adding HTML

Let’s start by adding the HTML to the popup

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>TabNotes</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./main.ts"></script>
</body>
</html>

Alright I typed in this code which injects the form with the textarea into our popup

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div class="sticky-note">
    <form class="note-form">
      <textarea 
        id="note-text"
        placeholder="Write your note here..."
      ></textarea>
    </form>
  </div>
`;

Let’s see how it looks

One depth Here we go

It is not formatted but as you can see it’s already there

Adding CSS

Now since we’re using WXT and Vite under the hood I can just import the CSS style here and then of course I need to create it and I can start writing my styles like normal

Let’s say background color orange

import './style.css';

body {
  background-color: orange;
}

You can see I didn’t need to refresh anything it automatically changed the background color to orange

Before recording this video I already came up with the styles that will work best with our popup so I just copy and paste it here

I’ll show you how it looks like but I will give you a bit of a walkthrough

Basically I use a trick I use an infinitely repeated linear gradient which gives me 22 pixels between a one pixel long lines so that’s what gives this nice background

@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:wght@400;700&display=swap');

body {
  margin: 0;
  padding: 0;
  background-color: #f9d379;
  min-width: 350px;
  min-height: 400px;
  height: 100vh;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.sticky-note {
  background-color: #f9d379;
  background-image: 
    linear-gradient(to bottom, 
      transparent 0px, 
      transparent 22px, 
      #f3cb69 22px, 
      #f3cb69 23px, 
      transparent 23px
    );
  background-size: 100% 24px;
  background-position: 0 40px;
  padding: 40px 20px;
  height: 100%;
  box-sizing: border-box;
}

.note-form {
  height: 100%;
}

textarea {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: 'Sour Gummy', cursive;
  font-size: 16px;
  line-height: 24px;
  color: #333;
  padding: 0;
}

textarea::placeholder {
  color: #999;
}

And the rest is just the whole thing

Oh but look here I’m using Comic Sans MS which is a big no-no in the UX world so let me just use a similar handwritten font from Google Fonts

Super easy to do

fonts.google.com and I can filter by cute

This looks good so I click on it I click on get font get embed code and I want the import as I will add it to my CSS file

You see I didn’t need to do much I just put it on the top of the page and down here where I say Comic Sans MS I change it to Sour Gummy

If I look at the popup you can see that my font has changed

Amazing

Detecting user input

Right now our popup is showing the textarea we can enter text in it but how do we detect what’s in that textarea

Let’s go back to our main.ts file and add some event listener

First I define our textarea

I could use document.querySelector and I attach an event listener to it

The event should be keyup when the user lifts the key and let’s just log it

const noteText = document.querySelector<HTMLTextAreaElement>('#note-text')!;

noteText.addEventListener('keyup', (e) => {
  console.log(noteText.value);
});

Actually I could just say noteText

It’s complaining because it doesn’t know that noteText is actually a textarea so what I can do with this just tell it to TypeScript

There and then I don’t need that event

Okay you see I still haven’t refreshed anything as I told you it automatically refreshes

I click on the inspect now I’m inspecting the popup which by the way you can see all the elements that we created

If I click on console and start typing then you can see for every keyup we record it even

Now what happens if I close the popup

Well popups are not long-lived so every time I open it it starts from scratch and that is not really useful for us because our note is already gone

So in the next chapter we will figure out how to persist this data and store our notes

Adding HTML

Adding CSS

Detecting user input

The popup problem