Recently, I tried Notion and found that it has rich features. I spent some time migrating my previous articles to Notion. Therefore, I had an idea to synchronize some cross-platform content to Notion, such as Youdao vocabulary, WeRead notes, etc. I could directly write a Python script to synchronize them, but it would be too cumbersome to execute the script every time. I haven’t tried Chrome extensions before, so I thought of using a Chrome extension for synchronization.
For developers with no experience in plugins, it is important to first understand the development documentation. After a brief review of the documentation, the most important file to focus on is the manifest.json, which needs to be differentiated between V2 and V3.
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
It is obvious that developing a web extension is very similar to regular web development, but it requires packaging and outputting files according to official requirements. However, in the official documentation, there is no specific recommendation on how to use a particular framework to build an extension. Therefore, the choice of development framework may vary depending on individual preferences.
I plan to use Next.js, which I am currently learning, as the framework for development, but I quickly encountered a problem. After setting up the build command:
"lint:build": "mv out/_next out/assets && sed -i 's/\\\\/_next/\\\\/assets/g' out/**.html",
"build:extension": "next build && npm run lint:build"
According to my idea, I packaged and outputted the static resource files, and added them in chrome://extensions/. However, due to using App Router mode in NextJS, the generated index.html file contains a lot of inline script code, which caused Chrome to display a bunch of error messages.
After a simple Google search, I initially suspected it was a CSP problem. I also found similar issues on NextJS’s GitHub repository. I decided to switch to Pages Router and followed the steps to rebuild and load the extension, and the CSP error disappeared. It may seem like a few simple sentences, but in reality, it took several hours to search for information. Ultimately, I didn’t solve the issue on the App Router. Later, I discovered that the official documentation provided solutions for CSP, but since switching to Pages Router worked fine, I didn’t try them.
After developing some modules, I found that storage communication was particularly troublesome, so I started searching for a solution. By chance, I discovered a browser extension framework called plasmo on Github, which is known as the NextJS of browser extensions. It supports React, TypeScript, and provides storage communication related APIs, allowing for multiple browser outputs simultaneously. There is a phrase in the introduction that says:
With Plasmo, you can say goodbye to tedious boilerplate code and hello to a faster, more seamless development experience.
It provides a large number of template cases to help understand how to use the relevant API. For more features, you can directly refer to the official documentation. After trying it out, I abandoned the previous solution of using NextJS and found it quite convenient to use NextUI component library and Tailwind together.
With the help of Plasmo, I quickly completed the first version of the plugin development. The process of publishing to the extension store for review was relatively easy compared to the domestic process. The only slightly troublesome part for me was the need to pay $5 to register a Chrome developer account, but fortunately, I asked a friend studying abroad to help pay this fee. I didn’t carefully understand the review rules for the first review, so I was rejected once, but it wasn’t as troublesome for the subsequent updates.
Finally, I built a simple website using Astro, named AntSoft, to share some small tools or other projects I develop in the future.