前陣子為了整理手頭的資料我換了好幾款筆記和剪藏插件最后留在瀏覽器里的是一個(gè)小眾但很順手的工具名字叫 ponytail。第一次看到這個(gè)英文名我還以為是個(gè)跟女生發(fā)型相關(guān)的應(yīng)用裝上之后才發(fā)現(xiàn)它其實(shí)是個(gè)純本地的內(nèi)容收納插件選中網(wǎng)頁上任意一段文字、一個(gè)鏈接甚至幾行代碼右鍵一點(diǎn)內(nèi)容就被“扎”進(jìn)了本地倉庫。名字取的是馬尾辮那種“把散落的頭發(fā)攏成一束”的意思用了一段時(shí)間后我確實(shí)覺得它把我在網(wǎng)頁上隨手遇到的知識(shí)碎片扎得井井有條。這篇文章適合誰如果你和我一樣經(jīng)常一邊查資料一邊開一堆標(biāo)簽頁最后關(guān)瀏覽器時(shí)什么都沒留下或者你平時(shí)需要收集代碼片段、產(chǎn)品文檔、臨時(shí)靈感又不想把這些內(nèi)容全交給某個(gè)需要登錄的云筆記再或者你就是單純嫌瀏覽器自帶的書簽功能太單薄——那 ponytail 這類插件的思路值得你看看。下面我會(huì)把從安裝、配置到日常使用的完整過程寫出來包括我這幾天實(shí)測(cè)中遇到的坑。因?yàn)?GitHub 上叫 ponytail 的小項(xiàng)目不止一個(gè)有做發(fā)型的、有做前端組件的我這邊說的是目前社區(qū)里流傳較廣的那款輕量級(jí)剪藏/內(nèi)容整理插件版本我看的是 0.6.x 分支算是做一個(gè)清晰的定位說明。1. 先搞清楚 ponytail 是個(gè)什么插件再?zèng)Q定裝不裝1.1 名字想表達(dá)的核心邏輯插件的設(shè)計(jì)思路其實(shí)特別樸素你在瀏覽器里每天會(huì)刷到大量“有點(diǎn)用但現(xiàn)在用不上”的內(nèi)容比如一篇講緩存策略的文章、一段別人分享的 shell 命令、某個(gè)產(chǎn)品的定價(jià)頁面。大多數(shù)人的處理方式要么是丟進(jìn)書簽要么就是開著標(biāo)簽頁等以后再看結(jié)果標(biāo)簽頁越來越多書簽里躺著一堆“收藏了等于沒收藏”的鏈接。ponytail 做的事情就一句話把零散內(nèi)容快速收集到一個(gè)本地倉庫里并且允許你用標(biāo)簽和備注去歸類。這和我以前用過的“稍后讀”工具不太一樣它不追求閱讀體驗(yàn)不做什么網(wǎng)頁正文重排就是簡(jiǎn)單粗暴地幫你“扎起來”。1.2 它解決的三個(gè)真實(shí)痛點(diǎn)我在用的這幾天最大的感受是它契中了我三個(gè)具體痛點(diǎn)選中的內(nèi)容經(jīng)常帶一堆頁面噪聲。整頁剪藏工具會(huì)把導(dǎo)航欄、廣告、側(cè)邊欄都存下來而 ponytail 存的是你選中那一部分粒度由你控制。收藏鏈接不等于收藏內(nèi)容。普通書簽存的是 URL過幾個(gè)月原網(wǎng)頁一改版或者刪了什么都找不回來。ponytail 默認(rèn)把選中內(nèi)容的文本也一起存下來一定程度上等于做了本地快照。分類體系太重反而是負(fù)擔(dān)。Notion 或者印象筆記的剪藏插件適合做體系化整理但我大部分碎片根本來不及建庫只需要有個(gè)地方先堆著、能搜就行。ponytail 的做法就特別輕內(nèi)容進(jìn)來之后先堆在默認(rèn)收件箱里等有空了再慢慢打標(biāo)簽。1.3 和主流剪藏方案相比它“輕”在哪如果你一直在用瀏覽器自帶的收藏夾或者某個(gè)大廠筆記軟件的剪藏插件ponytail 的優(yōu)勢(shì)不一定在于功能多恰恰在于功能少。我列個(gè)表對(duì)比一下我當(dāng)時(shí)的感受對(duì)比項(xiàng)瀏覽器書簽云筆記剪藏插件ponytail我用的版本是否需要賬號(hào)不需要通常需要不需要內(nèi)容保存形態(tài)只有鏈接網(wǎng)頁正文鏈接選中文本/鏈接/代碼可多選離線可用性鏈接本身離線內(nèi)容不行部分受限純本地完全離線整理負(fù)擔(dān)文件夾層級(jí)維護(hù)成本高筆記本/標(biāo)簽體系偏重單一收件箱自定義標(biāo)簽數(shù)據(jù)自主權(quán)同步到賬戶體系存在廠商服務(wù)器全在本地瀏覽器存儲(chǔ)如果你對(duì)數(shù)據(jù)自主權(quán)比較敏感或者只是在公司電腦上想臨時(shí)存點(diǎn)資料又不想登錄任何賬號(hào)這個(gè)插件的本地屬性就成了很大的加分項(xiàng)。2. 安裝的兩種方式與版本選擇從源碼目錄加載最穩(wěn)2.1 安裝前要確認(rèn)的環(huán)境先說環(huán)境我用的是 Chromium 系瀏覽器Chrome 和 Edge 都測(cè)試過。插件本身是一個(gè)基于 Manifest V3 的擴(kuò)展理論上 Firefox 也能通過加載臨時(shí)擴(kuò)展的方式跑但我沒去折騰這里只講 Chromium 系的流程。安裝之前先去項(xiàng)目 release 頁面看一眼版本號(hào)盡量選最近三個(gè)月內(nèi)還更新過的版本我在老版本上遇到過右鍵菜單偶爾失效的問題升級(jí)之后就好了。2.2 方式一源碼目錄加載我推薦的穩(wěn)妥路線因?yàn)椴寮]有上架到應(yīng)用商店直接在商店搜是搜不到的我最推薦的安裝方式是把源碼下載下來用開發(fā)者模式加載。第一步下載項(xiàng)目壓縮包解壓到本地注意解壓之后不要挪動(dòng)目錄后面每次開瀏覽器都需要它存在。第二步打開瀏覽器擴(kuò)展管理頁。Chrome 是在地址欄輸入 chrome://extensionsEdge 是 edge://extensions。第三步打開右上角的“開發(fā)者模式”開關(guān)。第四步點(diǎn)擊“加載已解壓的擴(kuò)展程序”選擇解壓后包含 manifest.json 的那個(gè)目錄。第五步確認(rèn)插件卡片出現(xiàn)并且圖標(biāo)出現(xiàn)在瀏覽器工具欄上。加載成功之后工具欄上會(huì)多出一個(gè)馬尾一樣的圖標(biāo)。這里有個(gè)細(xì)節(jié)特別容易踩插件加載完圖標(biāo)可能被折疊進(jìn)擴(kuò)展菜單里我建議手動(dòng)把它釘在工具欄上不然右鍵菜單功能雖然能用但你想用彈窗收集時(shí)還得先點(diǎn)拼圖圖標(biāo)去找它很影響順手程度。2.3 方式二打包成 crx 之后安裝如果你想把插件分發(fā)給其他人用體驗(yàn)更像傳統(tǒng)插件可以走 crx 路線在擴(kuò)展管理頁點(diǎn)擊“打包擴(kuò)展程序”選擇源碼目錄生成 .crx 文件和 .pem 密鑰。然后把 .crx 拖進(jìn)擴(kuò)展管理頁瀏覽器會(huì)提示安裝。不過我實(shí)測(cè)下來新的瀏覽器版本對(duì)這種做法的限制越來越多會(huì)提示“無法從該網(wǎng)站添加應(yīng)用/擴(kuò)展程序”或者直接說是“不受支持的擴(kuò)展程序”。所以除非你有分發(fā)需求否則自己用的話就走源碼加載那一步。另外如果你換電腦或者清除瀏覽器數(shù)據(jù)插件配置也會(huì)跟著沒所以等會(huì)兒我會(huì)專門說數(shù)據(jù)備份這件事。3. manifest 配置與數(shù)據(jù)存儲(chǔ)權(quán)限、快捷鍵、本地倉庫的位置3.1 安裝之后先看權(quán)限配置很多朋友拿到插件第一件事就是開始用但我建議你先點(diǎn)開“詳情”看一下插件聲明的權(quán)限這里能看出一個(gè)插件的基本品性。我當(dāng)時(shí)看的是 manifest.json 里這幾項(xiàng)storage負(fù)責(zé)把收集的碎片寫到瀏覽器本地存儲(chǔ)里這個(gè)權(quán)限基本所有剪藏類插件都要。contextMenus負(fù)責(zé)在你右鍵選中文字時(shí)添加“收進(jìn) ponytail”的菜單項(xiàng)這是插件的核心交互。activeTab只在當(dāng)前標(biāo)簽頁激活時(shí)才生效用來讀取你當(dāng)前頁面的標(biāo)題、URL、選中文本比整站讀取權(quán)限克制得多。clipboardWrite一部分版本用來在復(fù)制操作時(shí)寫剪貼板如果你用不到一鍵復(fù)制功能可以留意一下設(shè)置里有沒有開關(guān)。這套權(quán)限組合整體是中規(guī)中矩的沒有出現(xiàn)“讀取瀏覽歷史”“讀取所有網(wǎng)站數(shù)據(jù)”這種大而全的請(qǐng)求我用的時(shí)候心里比較踏實(shí)。你要是下載的是別人二次改名的版本建議先翻一下 manifest 聲明避免被人偷偷改了權(quán)限。3.2 默認(rèn)快捷鍵和修改入口插件的默認(rèn)快捷鍵通常是 CtrlShiftYWindows/Linux和 CommandShiftYMac用來快速打開收集彈窗。我剛開始一直沒觸發(fā)后來才發(fā)現(xiàn)它跟瀏覽器自帶的“歷史記錄”快捷鍵沒有沖突但是跟某款翻譯插件有沖突兩邊同時(shí)搶這個(gè)組合鍵結(jié)果誰都沒彈出來。解決辦法去擴(kuò)展管理頁的“快捷鍵”設(shè)置里改掉即可。記住這個(gè)入口chrome://extensions/shortcuts這頁面列出了所有插件的快捷鍵綁定以后遇到任何快捷鍵打架去那兒查最直接。3.3 數(shù)據(jù)到底存在哪會(huì)不會(huì)丟ponytail 的默認(rèn)存儲(chǔ)是 chrome.storage.local也就是存在你本機(jī)的瀏覽器配置文件里。它不會(huì)像云筆記那樣給你同步到服務(wù)器卸載插件、清理瀏覽器緩存或者換電腦時(shí)如果沒有手動(dòng)導(dǎo)出數(shù)據(jù)就真的沒了。我做的第一件事就是翻設(shè)置頁找“導(dǎo)出備份”。它導(dǎo)出的格式是 JSON里面有每條碎片的原始文本、來源 URL、保存時(shí)間、標(biāo)簽和備注。后來我又手動(dòng)把 JSON 轉(zhuǎn)成了 Markdown 存檔。這部分操作不算復(fù)雜但屬于用插件第一天就該做好的習(xí)慣不然等碎片攢到幾百條再備份導(dǎo)出文件本身也讓人頭疼。4. 連續(xù)七天用下來的核心操作路徑從劃詞收集到批量導(dǎo)出4.1 路徑一劃詞收集最常用的一招ponytail 最核心的使用方式就是右鍵劃詞。比如你在某篇技術(shù)博客里看到一段 nginx 配置想存下來直接用鼠標(biāo)選中那段配置右鍵點(diǎn)“收進(jìn) ponytail”彈窗里會(huì)自動(dòng)帶上選中文本和網(wǎng)頁標(biāo)題。你只需要在彈窗里選一個(gè)標(biāo)簽比如叫“nginx”點(diǎn)保存完事。這段流程看起來簡(jiǎn)單但我實(shí)際用的時(shí)候發(fā)現(xiàn)幾個(gè)影響效率的小細(xì)節(jié)選中的內(nèi)容如果帶格式插件默認(rèn)會(huì)保存純文本不會(huì)把網(wǎng)頁的字體、顏色樣式存下來。對(duì)我這種需要摘代碼的人來說純文本反而干凈。如果網(wǎng)頁本身有版權(quán)保護(hù)禁止選中文字右鍵菜單就不會(huì)出現(xiàn)收集選項(xiàng)因?yàn)椴寮貌坏竭x中內(nèi)容。彈窗保存完之后默認(rèn)自動(dòng)關(guān)閉如果你連續(xù)收集同一頁面的多段內(nèi)容每次都要重新右鍵再選稍微有點(diǎn)繁瑣。我后來發(fā)現(xiàn)一個(gè)省事辦法在彈窗右上角關(guān)掉“保存后關(guān)閉”這樣就能在同一頁面連續(xù)收好幾段。4.2 路徑二工具欄按鈕整頁快存劃詞適合精確收集但有些場(chǎng)景你并不想只存某一兩句話你想把整頁的要點(diǎn)都留下來。這時(shí)候直接點(diǎn)工具欄的馬尾圖標(biāo)插件會(huì)把當(dāng)前頁面標(biāo)題和 URL 存下來并且盡量抓取頁面正文前若干段作為預(yù)覽。說實(shí)話這個(gè)抓取邏輯沒有那些專業(yè)剪藏工具精準(zhǔn)遇到極端排版會(huì)比較亂但它定位就是“快存”先留下個(gè)錨點(diǎn)再說。我通常的做法是如果頁面內(nèi)容結(jié)構(gòu)特別清晰我直接整頁存如果頁面很長只有一段有價(jià)值我就劃詞收集。兩種方式配合收集效率是最高的。4.3 標(biāo)簽整理方法論先堆后分用云筆記時(shí)我有個(gè)壞毛病收藏之前總想先把分類建好結(jié)果為了“放到哪”想半天最后索性不整理了。ponytail 默認(rèn)把所有內(nèi)容放進(jìn)“收件箱”標(biāo)簽這正好治了我這個(gè)毛病。我的用法是第一遍收集時(shí)完全不管分類全部進(jìn)收件箱晚上統(tǒng)一處理給它們加主題標(biāo)簽。我現(xiàn)在的標(biāo)簽體系也不復(fù)雜就幾種前綴型直接用項(xiàng)目代號(hào)命名比如“商城項(xiàng)目”“官網(wǎng)改版”涉及某個(gè)項(xiàng)目的內(nèi)容全部打上對(duì)應(yīng)前綴。場(chǎng)景型按用途區(qū)分比如“日?qǐng)?bào)素材”“周報(bào)備查”。資源型專門放代碼片段、命令、API 文檔鏈接標(biāo)簽統(tǒng)一叫“snippet”。這樣的好處是搜索時(shí)只要敲關(guān)鍵詞結(jié)果范圍馬上縮小。插件還支持在彈窗里直接搜索用不著打開你的系統(tǒng)文件管理器到處翻。4.4 導(dǎo)出與備份JSON 為主Markdown 為輔前面提過設(shè)置里的“導(dǎo)出”會(huì)生成 JSON。這份 JSON 包含所有字段適合長期歸檔。但我個(gè)人更常用的其實(shí)是 Markdown 導(dǎo)入導(dǎo)出用腳本把 JSON 轉(zhuǎn)成一篇按日期和標(biāo)簽分組的長文檔然后丟進(jìn)我自己維護(hù)的筆記倉庫里。轉(zhuǎn)換腳本其實(shí)十行不到核心邏輯就是把 JSON 里的每一項(xiàng)變成一行“- 時(shí)間 標(biāo)題內(nèi)容”我這一步做完等于給所有碎片又做了一層外部索引。即使哪天這個(gè)插件完全不更新了我的數(shù)據(jù)也不會(huì)被綁死在里面。5. 踩過的三個(gè)坑灰色圖標(biāo)、內(nèi)容被截?cái)?、快捷鍵打架5.1 圖標(biāo)變成灰色不是插件壞了我第一次遇到圖標(biāo)灰掉是在瀏覽器的擴(kuò)展管理頁里。當(dāng)時(shí)我還以為是插件加載出了問題重新加載了好幾遍都沒用。后來才明白Chromium 系插件默認(rèn)不在瀏覽器內(nèi)部頁面比如 chrome:// 開頭的頁面、擴(kuò)展商店頁面運(yùn)行你在這些頁面里點(diǎn)圖標(biāo)它自然是灰色無反應(yīng)的。這個(gè)機(jī)制其實(shí)是安全設(shè)計(jì)避免插件讀取瀏覽器的敏感頁面。遇到這種狀況不用重裝直接切回普通網(wǎng)頁刷新一下就好。5.2 收集的代碼片段少了幾個(gè)字符有一回我收集一長段 base64 編碼的配置信息保存后發(fā)現(xiàn)末尾少了一截。這個(gè)鍋不全在插件我發(fā)現(xiàn)是我選取的時(shí)候鼠標(biāo)少劃了幾個(gè)字符因?yàn)槟嵌蝺?nèi)容剛好在換行位置。但后來我又測(cè)試了一次把整段完整選中、確認(rèn)右鍵菜單顯示的內(nèi)容里包含末尾字符保存出來就完整了。所以遇到“內(nèi)容變少”先別急著怪插件優(yōu)先檢查選區(qū)邊界。另外如果你從某些 PDF 閱讀器或特殊網(wǎng)頁復(fù)制內(nèi)容插件拿到的可能不是純文本而是帶不可見字符的內(nèi)容這時(shí)候生成的保存內(nèi)容會(huì)顯得很亂我一般會(huì)在彈窗里手動(dòng)清理一下再存。5.3 右鍵菜單和快捷鍵同時(shí)失靈這是我這幾天遇到最折騰的一次。某天下午我突然發(fā)現(xiàn)右鍵菜單里“收進(jìn) ponytail”不見了快捷鍵也沒反應(yīng)。排查鏈路是這樣的第一步打開擴(kuò)展管理頁確認(rèn)插件還處于啟用狀態(tài)排除被瀏覽器禁用。第二步看看是不是其他插件把右鍵菜單擠掉了。某些網(wǎng)頁里多個(gè)插件同時(shí)注冊(cè)菜單項(xiàng)瀏覽器會(huì)折疊顯示你以為沒有其實(shí)它藏在二級(jí)菜單里。我那次遇到的確實(shí)是藏起來了。第三步檢查快捷鍵設(shè)置發(fā)現(xiàn)我之前改過的組合鍵被別人又占用了重新指定一個(gè)之后恢復(fù)正常。如果你遇到菜單項(xiàng)亮著但點(diǎn)擊沒反應(yīng)還有一種情況是瀏覽器新開了無痕窗口或者啟用了某個(gè)網(wǎng)站的“不允許權(quán)限”。無痕模式下默認(rèn)不加載插件需要去詳情頁里單獨(dú)打開“在無痕模式下啟用”開關(guān)這個(gè)細(xì)節(jié)我一開始完全沒注意。5.4 小坑總結(jié)再補(bǔ)充兩個(gè)沒那么嚴(yán)重但挺磨人的問題。一個(gè)是導(dǎo)出 CSV 文件后用 Excel 打開中文會(huì)亂碼解決方案是導(dǎo)出時(shí)選擇帶 BOM 的 UTF-8 編碼或者直接把 CSV 拖進(jìn)專門編輯工具里打開。另一個(gè)是雙擊彈窗里的“標(biāo)簽”輸入框想選中內(nèi)容時(shí)會(huì)不小心觸發(fā)瀏覽器自帶的詞典翻譯菜單這個(gè)屬于瀏覽器交互層面的事遇到時(shí)用鼠標(biāo)再點(diǎn)一次就能正常操作。6. 我的使用結(jié)構(gòu)和一點(diǎn)個(gè)人建議如果你看完上面這些準(zhǔn)備裝上試試我最后說幾個(gè)我目前在用的組合習(xí)慣。第一在瀏覽器工具欄上固定 ponytail 圖標(biāo)同時(shí)把快捷鍵改成 CtrlShiftP方便記憶也避開和其他插件的沖突。第二每周日花十分鐘完整導(dǎo)出一份 JSON 備份再轉(zhuǎn)成 Markdown 放進(jìn)自己的資料目錄。第三收集的時(shí)候不要過多糾結(jié)標(biāo)簽讓收件箱先堆著統(tǒng)一在晚上處理避免“整理焦慮”影響收集積極性。我個(gè)人使用下來ponytail 不適合當(dāng)作嚴(yán)肅的知識(shí)管理體系來用它更像一張工作臺(tái)作用是讓你在高速瀏覽時(shí)先把有價(jià)值的東西固定下來。真正的吸收、整理、內(nèi)化還是要靠你定期去處理這些碎片——就像馬尾辮只能幫你把頭發(fā)攏起來至于要扎成什么樣的發(fā)型還是得自己動(dòng)手。這個(gè)插件目前還是冷門階段如果你在集成過程中有任何自己的使用技巧建議也整理出來回饋給社區(qū)這種小而美的工具最需要的就是一批愿意認(rèn)真用它的人。