I developed a Chrome extension

The browser I usually use is Chrome. I use it without much dissatisfaction, but sometimes its convenience can be a problem.

That problem is the suggestion feature.

If you want to leave no history at all, you can use secret mode, or you can use different browsers for different situations, but sometimes that’s not enough.

For example, when you search for something as usual, you might see a keyword or an article you clicked on before, or get lured by an ad. There are many such cases.

You might be searching for node.js, but your note history pops up. Hey, Chrome! Do you know I’m sharing my screen with someone right now? Read the room!

So, after searching around, I found that Chrome doesn’t have a feature to delete history for only specific sites. You can only delete all history.

I also looked for Chrome extensions, but couldn’t find anything suitable. And with Chrome extensions, if you install something you don’t know, it might steal all your information. So, I decided to make my own.

It wasn’t a simple Hello World, so it took a bit of time, but I managed to get it working.

What I made

I made a Chrome extension that deletes history for specific sites.

Chrome has an API to delete history, but not one to delete history for only specific sites. So, I save the URLs of sites I want to delete, and when I visit those sites in Chrome, I delete the history one by one.

Overall, you can register and delete sites you don’t want to leave in your history.

Tips for Chrome extension development

There are a few points to keep in mind when developing Chrome extensions.

If it’s just a Hello World, there are detailed docs, so just follow those and you’ll be fine.

Hello World extension tutorial

The problem arises when you try to create something a bit more complex. In such cases, it’s good to keep the following points in mind.

Content Security Policy (CSP)

If you want to create something a bit more complex, you’ll want to consider using libraries. However, this can be quite tricky.

If you simply use the same approach as building a static site with any library, you’ll run into CSP issues when you actually import and run the Chrome extension.

Content Security Policy

I initially tried to use Vue.js with Vite as the build tool, but ran into CSP issues.

There was information that changing the Manifest V3 policy or Vite settings might solve the problem, and I tried various things, but instead of spending more time, I decided to change the library. The goal is to create a Chrome extension, so the library doesn’t matter that much.

Next, I tried Svelte and Alpine.js, but both also had CSP issues. The use of inline code and eval() during the build process was problematic.

In the end, I decided to go with Vite+ TypeScript+Tailwind CSS+HTML.

While it’s a hassle to write DOM manipulation code, not having to worry about CSP turned out to be a relief in the end.

API

When creating a Chrome extension, you’ll often use Chrome’s API. Therefore, it’s important to read the API documentation carefully and learn how to use it effectively.

That said, the documentation is thorough, and there is plenty of sample code, so as long as you follow that, you should be fine.

Chrome Extension API Reference

For a while, I plan to operate it only in my environment, and if there are no problems, I will publish it on the Chrome Web Store.