博客 / 詳情

返回

100% 用 AI 做完一個新項目,從 Plan 到 Finished 我學到了這些

大家好,我是 Immerse,一名獨立開發者、內容創作者、AGI 實踐者。

關注公眾號:沉浸式趣談,獲取最新文章(更多內容只在公眾號更新)

個人網站:https://yaolifeng.com 也同步更新。

轉載請在文章開頭註明出處和版權信息。

我會在這裏分享關於編程獨立開發AI乾貨開源個人思考等內容。

如果本文對您有所幫助,歡迎動動小手指一鍵三連(點贊評論轉發),給我一些支持和鼓勵,謝謝!


女朋友一句話催生的 Chrome 插件,解決批量下載圖片問題

週末在家,女朋友工作需要下載網站上的一些圖片,她説太麻煩了。

右鍵、選擇保存圖片、選文件夾、改名字,一張圖就得折騰好幾步。

要是網頁裏有二三十張圖,這得點多少次鼠標。

<img src="https://qncdn.mopic.mozigu.net/work/143/25/0d5accca56ec406b/image.png" width="300"/>

下載地址:

GitHub:https://github.com/yaolifeng0629/PickPic

谷歌瀏覽器商店:https://chromewebstore.google.com/detail/pickpic-one-click-downloa/hfdohacifjijbgobekodafjpjghflemh

壓縮包:https://github.com/yaolifeng0629/PickPic/releases/tag/v1.0.2

一個很簡單的需求

需求其實很明確。

在網頁上看到喜歡的圖片,想批量保存到本地。

聽起來很簡單對吧?但我搜了一圈,發現現有的工具都不太滿意。

有些插件功能倒是有,但要麼太複雜,要麼廣告一堆,要麼就是隻支持特定網站。

我想要的很簡單:打開網頁,一鍵預覽,選擇下載,完事。

所以決定自己做一個。

這個插件能幹啥

核心功能就幾個。

點擊瀏覽器圖標,側邊欄會顯示當前網頁的所有圖片和視頻。

可以預覽,雙擊圖片會在新標籤頁打開,看得更清楚。

想下載哪張就勾選哪張,也可以全選。

單張圖直接下載,多張圖自動打包成 ZIP 文件。

對微信公眾號做了特殊優化。能看到文章標題、作者、描述這些信息。

支持中英文切換。

就這些,沒有複雜的設置,打開就能用。

開發過程還挺順

技術棧用的是 Plasmo 框架,這玩意專門做瀏覽器插件的。

配合 React、TypeScript、Tailwind CSS,開發體驗很不錯。

狀態管理用 Zustand,輕量好用。

圖片打包用 JSZip,生成 ZIP 文件很快。

支持的網站挺多

除了微信公眾號,其他網站也都能用。

我測試了掘金、知乎、InfoQ、簡書、CSDN、博客園這些技術社區,都沒問題。

理論上任何網頁都能用,因為我做的是通用提取邏輯。只要是 img 標籤或者 video 標籤,都能識別出來。(暫時沒有處理防爬邏輯)

對微信公眾號做了額外優化,因為自己平時也會用到,所以多花了點心思。

其他網站暫時沒做特殊處理,但基本功能都是正常的。

為啥又是一個工具

做這個插件的時候,我想起之前看 Marc Lou 的分享。

他説最好的產品,往往是解決自己問題的產品。

因為你就是第一個用户,最清楚哪裏好用哪裏不好用。

不需要做市場調研,不需要猜用户想要什麼。

你自己用着舒服,產品就不會太差。

做的過程中沒想過能不能賺錢,會不會有很多人用。

就是單純想解決這個癢處。

接下來想加點啥

目前功能還比較基礎,後面想加一些新東西。

比如批量重命名,按文章標題、日期、序號這些規則自動命名文件。

在考慮支持更多格式,不光是圖片和視頻,PDF、音頻這些也能提取。

不過這些都是想法,會不會做、什麼時候做,還沒確定。

先把目前的問題解決了再説。

如何使用

<img src="https://qncdn.mopic.mozigu.net/work/143/25/0d5accca56ec406b/image-1.png" width="300"/>

GitHub:https://github.com/yaolifeng0629/PickPic

谷歌瀏覽器商店:https://chromewebstore.google.com/detail/pickpic-one-click-downloa/hfdohacifjijbgobekodafjpjghflemh

壓縮包:https://github.com/yaolifeng0629/PickPic/releases/tag/v1.0.2

歡迎提 Issue 和 PR,有想法可以一起討論。

也歡迎 Star 支持一下。

項目還在早期階段,肯定有不完善的地方。

但我會持續維護,遇到問題會盡快修復。

開發過程開源

對了,這個項目從 Plan 到 Task 再到 Implement,每個階段我都開源出來了。

包括最初的想法、任務拆解、具體實現,甚至原型設計都在 GitHub 倉庫裏。

想看完整開發過程的小夥伴,可以去倉庫翻一翻。

説不定能給你自己做項目提供點思路。

順便點個 Star 支持一下,感謝!

一點小感悟

做這個插件讓我想明白一件事。

不是所有項目都要追求商業化,不是所有產品都要想着賺錢。

有時候就是想解決一個小問題,讓自己的生活方便一點。

這個過程本身就很有意思。

而且你真心解決了自己的問題,產品自然會有温度。

別人用起來也能感受到這種真實。

Marc Lou 説好奇心才是創業的起點,我覺得説得特別對。

先把癢處撓了,至於能不能變成生意,那是後面的事。


項目地址:https://github.com/yaolifeng0629/PickPic

歡迎試用,歡迎反饋。

user avatar FatTiger4399 頭像 chazhoudeqingchun 頭像 wodingshangniliao 頭像 mylxsw 頭像 codelogs 頭像 aphysia 頭像 chenyishi 頭像
7 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.