Chrome extension to order a latte

I live in Berlin which has so many nice cafes. I like going there and opening a laptop and doing something.

Recently I found one that serves really really nice Latte. I don't remember how many times I ordered it so far. Also, one thing which I like on the cafe is that we can order drinks or foods from web page. So we don't have to wait in front of counter. Instead, we can just find available table and sit there.

On checkout page, it requires our information such as name, email address and phone number. The only problem is that it doesn't save it so I have to fill them out every single time I order something. There is a checkbox clearly saying "Remember personal information for next order", but it doesn't do that.

After several times I filled the form, I decided to create a Chrome Extension that automatically does it for me. This is how it looks. Once I enter information, it saves those data in storage so I don't have to refill form from next time.

The source code will be published later.

It was my first time creating a Chrome Extension but I found it quite straightforward and also fun. I just pretty much followed the official instruction.

Apart from the extension ecosystem, I encountered an issue. I filled input fields using JavaScript but the browser didn't recognize it. My initial approach looked like this.

const elem = document.body.querySelector("input[name='email']");
if (elem != null) {
  elem.value = "foo@example.com";
}

After the investigation, I realized that I had to dispatch input event.

const elem = document.body.querySelector("input[name='email']");
if (elem != null) {
  elem.value = "foo@example.com";
  elem.dispatchEvent(new Event("input"));
}

I guess it's a common knowledge but as a Web Frontend newbie, it was nice to know that we have to dispatch events when we modify fields programmatically.

By the way, I submitted the extension to Chrome Web Store but it was rejected because the usage is too specific :)