Tôi đã thử tạo một tiện ích mở rộng ghi chú đơn giản bằng vibe coding
(chromewebstore.google.com)Giới thiệu
Đúng như tiêu đề, tôi đã thử tạo một ứng dụng ghi chú đơn giản có thể mở trong Side panel của trình duyệt để sử dụng.
Ban đầu tôi bắt đầu với mục đích dùng một mình, nhưng sau khi nhìn thấy thành quả trong 3 ngày đầu, tôi nghĩ rằng chia sẻ ở đây cũng hay, nên sau một tuần sửa lỗi/thêm tính năng, tôi mới viết bài này.
Về cách sử dụng và các đặc điểm thì có
- Chạy ứng dụng ghi chú bằng phím tắt Alt+Shift+W
- Có thể ghi chú bằng cú pháp Markdown
- Nhấp đúp để vào cửa sổ Edit, chuyển sang chế độ preview bằng ESC hoặc Shift+Enter
- Khi viết bài, tự động xử lý xuống dòng (thêm 2 dấu cách ở cuối dòng) (
Bật/Tắtđược) - Khi dán văn bản từ bên ngoài, tự động xử lý xuống dòng và thay ký tự
~thành￦~để tránh vỡ nội dung (Bật/Tắtđược) - Có thể dán hình ảnh bằng Ctrl+V
- Có thể ghim các ghi chú mong muốn lên phía trên
- Hỗ trợ dark mode
Đại khái là như vậy.
Động lực phát triển
Có thể một số người đã nhận ra khi nhìn thấy phím tắt mở ứng dụng ghi chú, nhưng chương trình này chịu ảnh hưởng rất nhiều từ tiện ích mở rộng Notes by Firefox đã ngừng phát triển từ 5 năm trước, bao gồm cả phím tắt và thiết kế.
Tuy nhiên, sau vài năm kể từ khi ngừng phát triển, việc nhập tiếng Hàn trở nên kỳ lạ, bản thân Firefox cũng dùng nhiều bộ nhớ hơn Chrome, nên đó trở thành động lực để tôi tự triển khai một tiện ích mở rộng tương tự như thế này.
Môi trường phát triển
Tôi dùng kết hợp cả Gemini CLI và trang web Gemini cho phần AI.
Những phần không quá quan trọng về thiết kế thì tôi chủ yếu dùng Gemini CLI, còn web thì tôi thường dùng để đưa ảnh chụp màn hình và tinh chỉnh các yếu tố thiết kế, hoặc khi Gemini CLI bị mắc kẹt vào một câu trả lời sai nào đó và không thoát ra được cái bẫy ấy.
Trong cả hai trường hợp, tôi đều cố định mô hình ở bản chính thức gemini-2.5-pro, và nhìn trên dashboard thì riêng số token đầu vào nhập qua Gemini CLI đã gần chạm mốc 100 triệu token.
Tôi quản lý phiên bản bằng git để có thể quay lại bản trước nếu AI làm hỏng code theo cách kỳ quặc, và khi làm việc tôi lặp lại quy trình: ra lệnh -> Gemini CLI viết code -> Gemini CLI commit -> tự kiểm tra thủ công code đã sửa và kết quả -> ra lệnh.
Kế hoạch sắp tới
Trước hết, tôi dự định sẽ tiến hành một đợt refactor lớn để thoát khỏi tình trạng toàn bộ mã JavaScript đang nằm trong một file như hiện tại, tách code thành nhiều file và nạp theo dạng module để việc bảo trì trở nên dễ dàng hơn.
Ban đầu tôi chỉ bắt đầu ở mức ghi chú văn bản đơn giản nên dồn hết code vào một file, nhưng khi quy mô lớn dần thì nảy sinh vấn đề là code trở nên khó đọc và khó trực tiếp chỉnh sửa.
Ngoài ra, các tính năng tôi muốn bổ sung gồm có hỗ trợ ghi chú WYSIWYG hoàn chỉnh, hỗ trợ nhập và hiển thị công thức, và khả năng ghi chú không chỉ bằng Markdown mà còn bằng văn bản thuần hoặc dựa trên HTML.
Đặc biệt, tôi nghĩ hỗ trợ WYSIWYG sẽ cải thiện đáng kể sự tiện lợi khi ghi chú, nên có lẽ đây sẽ là thứ tôi thử triển khai đầu tiên sau khi refactor xong.
Và nếu có thời gian, có lẽ tôi sẽ port nó để dùng được cả trên Firefox rồi đăng lên dưới dạng add-on.
Kết lời
Bình thường tôi vẫn dùng AI nhiều cho các công việc đơn giản, nhưng đây là lần đầu tiên tôi lấy AI làm trung tâm cho một công việc ở quy mô như thế này, và tôi thực sự thấy rất thú vị vì nó hoạt động tốt hơn mong đợi.
Tuy vậy, không rõ có phải do Gemini CLI có vấn đề hay không, nhưng để dùng gemini-2.5-pro không giới hạn thì chỉ có cách nhập API key và trả tiền theo mức sử dụng, mà trong quá trình tạo chương trình này, riêng token đầu vào đã tiêu tốn gần 100 triệu token nên điểm đáng tiếc là chi phí phát sinh cao hơn tôi tưởng.
Dù có caching nên số tiền bị tính thực tế vẫn thấp hơn mức dự kiến, nhưng việc dùng nhiều đến vậy là kết quả tôi không ngờ tới, nên tôi nghĩ khi sử dụng cần tận dụng hợp lý tính năng tóm tắt ngữ cảnh để có thể duy trì hiệu năng.
Dù đã được phát triển đến mức có thể dùng thực tế, nhưng vì vẫn chưa hoàn chỉnh tất cả những tính năng tôi hình dung, nên nếu các bạn thử dùng và có câu hỏi hay góp ý gì thì tôi rất mong nhận được phản hồi thẳng thắn!
3 bình luận
Cảm ơn bài viết hay.
Cho mình hỏi nếu là 100 triệu token thì chi phí khoảng bao nhiêu vậy?
Có vẻ tổng chi phí, bao gồm cả caching, vào khoảng 90.000~100.000 won.
Khi tôi kiểm tra mức sử dụng bằng lệnh
/stats modeltrong Gemini CLI, tỷ lệ cache cũng ở khoảng 50~60%, nên khá khớp với phép tính.Cảm ơn bạn đã cho biết~!