It was amazing! I submitted my flomo synchronization browser plugin to the Chrome Web Store in just 1 hour! During this process, I also did a live text broadcast:
I started at 9:55 and completed the development by 11:08. A product was born just like that, with zero coding experience! I also used Windsurf to help submit it to the Chrome Web Store!
In this article, I will give you a comprehensive overview of how to accomplish these tasks within 1 hour. Additionally, I will continue to discuss AI programming, developing WeChat mini-programs, and integrating service accounts with push notifications, so feel free to follow along:
01 First, Let’s Talk About Product Requirements
First of all, I am someone who loves to keep records. Over the past year, I have tried various AI recording tools, and I found that flomo is the most suitable note-taking software for me.
During my recording process, there is a type of note structure that I like the most:
The notes were too long, so I made a cut. You will find that it is divided into three main sections:
The first section starts with the title and original link, which makes it easier for us to find the source of the information.
The second section is a summary of highlights, which captures high-quality information that you want to record.
The third section is my own thoughts. To understand information, you must express it in your own words.
The more we enter the AI era, the more important your first brain becomes. In a previous analysis of note-taking software, I also strongly agreed with the flomo team’s thinking.
However, this card recording method is a bit cumbersome. It requires me to continuously operate between two windows. Is it possible to complete all these tasks within the same browser interface and effectively handle some repetitive work (like copying titles and links)?
This is my final product:
On the right side of the browser, I can click on the plugin in the toolbar or press the shortcut key ALT+F to smoothly open the right-side plugin panel.
The plugin panel automatically captures the title and link of the webpage content.
The original text summary can be quickly copied.
Then, I just need to fill in my personal thoughts.
Clicking submit will result in this note appearing in flomo:
You can see that it contains the three elements we just discussed: title and link, original text summary, and personal thoughts, and it’s very convenient!
Yes, this is my requirement: how to more efficiently and conveniently save the content of articles and my thoughts into flomo notes.
02 Rapid Development in 1 Hour
Now, let me tell you how to use Windsurf to complete this work in 1 hour:
Step 1: Download Windsurf and Get a Membership.
Perhaps you have all heard of Cursor, but after switching to Windsurf last night because Cursor often lagged, I never looked back. The difference between them can be seen in an article about overseas unicorns:
Cursor emphasizes programming experience and recognizing the user’s next intentions, while Codeium’s new product Windsurf emphasizes high automation. Their chat function is more complete than Cursor’s, allowing many users to accomplish basic development without hands-on coding.
This means that for less complex products, Windsurf is easier to get started with! Because it is more automated, it can handle many tasks for you!
So why buy a membership? Because we need to use Claude Sonnet, you can find one on Taobao.
Step 2: Create a Folder to Store Code
Since the final plugin partially follows the classic SS card structure, I named the folder “ss to flomo”:
Here, we require that when we reach a certain stage and have insights, we stop and write an SS card (hereafter referred to as SS card, the initials of “善思卡” in Chinese).
An SS card consists of four parts:
• Original text excerpt: to facilitate future writing and discussion when quoting the original text.
• My paraphrase: to confirm my understanding.
• Personal experience: to relate to my personal experiences. All the knowledge that you “brainstormed” or “had a realization” actually stems from past walls you’ve hit and pits you’ve stepped into. Only by linking knowledge with personal life experiences can knowledge stay grounded.
• Action guidance: to write down the action prompts of “When I… I will…”.
From “【flomo 布道师】古典 – You Don’t Read Less, You Just Can’t Remember and Use It”
Step 3: Open the Folder with Windsurf
After opening, wait a moment for it to load the right-side Write sidebar, which is the main area for interacting with Windsurf.
Step 4: State Your Requirements
Then, directly tell it what you want to achieve in the input box, and finally add, “Okay, I am a product manager who doesn’t understand code, so please discuss the product requirements with me first, and once I confirm, we will proceed step by step.”
By the way, you can also check the flomo API page, especially the section at the bottom “I want to develop myself”. This information can be included in your requirements to help Windsurf reference:
Step 5: Confirm Requirement Points
Then Windsurf will command Claude to do the work and inform you when it’s done:
You can also discuss whether these outputs meet your expectations and if you need any modifications. This step is crucial because it ensures that the “development” team understands your requirements. During the discussion, you can clarify points that you may not have thought through completely.
In a formal product development process, this step is called “reiteration,” which involves confirming the developer’s understanding of the product and comparing it with what we have in mind!
After confirming again, it’s time to get to work!
Step 6: Windsurf Starts Working
Browser plugins are relatively simple, with just a few files, so they are generated quickly. At this point, it prompted me to create some logos.
Did you think that would let me get to work? Not so fast! I turned back and had Claude continue working for me:
In no time, my icon was ready:
Step 7: Start Debugging
After completing the development, it’s time to start debugging in the Chrome browser’s extensions. First, enable developer mode in the upper right corner. Then click on “Load unpacked extension”. Oh no, as expected, an error occurred:
Error!
No worries, we can copy the error message and paste it to Windsurf, scolding it for the issue!
Then I found that there were also issues in the plugin settings:
Chinese characters were garbled! Similarly, we can screenshot this issue and send it to Windsurf.
After resolving these issues, we mainly need to check if the plugin can be invoked and whether the input can be synced to flomo. Sure enough, there was also a problem:
No worries, continue to let Windsurf debug:
During this time, I also scolded it for being nonsensical.
Step 8: Write README
After several rounds of debugging, the plugin met expectations, indicating that overall it was almost done, and there were still some tasks to wrap up.
The first task was to let AI write a README:
This step serves as version documentation, and it looks like this:
The README can also be used on GitHub to help others understand what your code does.
Step 9: Submit to Chrome Web Store
The plugin we developed earlier can only be used by ourselves. If we want others to easily search for and download it, listing it in the Chrome Web Store is a good option.
There will be many fields to fill out, and I may not know how to write them. No worries, I can screenshot them and let Windsurf write for us:
Finally, there is one step that is a bit tricky: submitting a privacy policy link. Again, I will let Windsurf handle it:
The solution Windsurf provided is to host it on GitHub, create a repository, and enable pages. You can register yourself; I won’t go into detail here. After completion, you will get a page:
Then copy this link into the application form and submit it:
Conclusion
In summary, this is the entire process of using AI programming software Windsurf to complete a browser plugin in one hour—from initiation to development completion, and finally to submission for review in the Chrome Web Store.
2025 will be a golden age for individual developers. With the enhancement of AI coding, those who dare to create will seize a wave of opportunities. What I mentioned here is not only about coding but also about media opportunities. For instance, this article is a mix of both.
Alright, for those interested in the new era of opportunities, whether it’s discussing AI coding or media benefits, feel free to join the group for more exchanges:
If it’s full or expired, you can add my WeChat first, with the note: AI Programming
References
AI Coding Comprehensive Map: How Agents Will Disrupt Software
【flomo 布道师】古典 – You Don’t Read Less, You Just Can’t Remember and Use It