嗨大家好！今天是你們的 Hello World 搭子阿真！

最近我受朋友啟發，嘗試把自己需要的便攜小功能使用 AI 工具做出來，考慮編程寫代碼目前還得咨詢 Claude，我最開始想著，和它聊幾句獲得一些靈感，結果聊了兩句話以后，我的插件雛形已經做出來了。我：？？？

更多AI編程案例：

給大家看我和它的原始聊天記錄：

插件的誕生：

眾所周不知，我是一個設計師，我的代碼能力基本基于我看代碼能認識的單詞詞匯量。對我來說，要是我自己來做這個插件，差不多是一年級小學生做高等微積分了。但是我都能做出來谷歌插件，相信絕大多數朋友也都能做出來。而我從腦子里冒出這個想法到完全做出來這個插件并且上架到谷歌（不包括審核時間），只用了大約 5 小時的時間。

這里我分享我制作和上架插件的過程以及其中踩過的坑分享給大家，希望對大家也有一些些啟發。另外，插件已經上架，大家有需要可以下載，也可以嘗試功能，如果有其他想法建議，歡迎評論區留言討論！

疊甲：

我基本算是編程小白，這個過程中有什么操作很傻瓜的也希望大家不要大聲嘲笑我，謝謝哈哈哈！

一、功能說明

插件名稱：文本導出助手

簡單看一下使用方法：

此為 1.0 版本錄屏，后續可能有修改

這個插件的作用，簡單來說，只要我們有“我需要把這段復制下來的東西存起來”的想法，這個插件就能派上用場。它讓我們省去了“打開記事本/Word/各種文件→新建文件→粘貼→點擊保存→選擇路徑→命名”這一系列繁瑣的步驟，將一切簡化為“復制→點擊插件→點擊格式”，主打一個復制就讀取，讀取就輸出。

無論是需要快速保存網頁資料和論文引用的學生與研究者，還是隨時捕捉靈感素材、整理草稿的內容創作者，亦或是需要將 API 返回的 JSON 數據和錯誤日志即時存檔的開發者，以及希望將網頁表格直接轉為 Excel、將會議紀要存為 PDF 的辦公人員，都能通過這個插件簡化從復制到保存的流程，提升工作與學習效率。

目前支持以下 9 種輸出格式：

文檔類:

1. TXT - 純文本格式，兼容性最佳
2. PDF - 專業文檔格式，適合正式分發
3. Word - Office文檔格式，便于深度編輯
4. Markdown - 標記語言，程序員與寫作者最愛

數據與網頁類:

1. Excel - 表格格式，輕松整理數據
2. JSON - 數據交換格式，方便開發調試
3. HTML - 網頁文件，保留原始結構

圖片類:

1. JPG - 常用圖片格式，便于分享
2. PNG -透明底圖片格式，保留圓角

當我們選擇了一段文字內容，右上角會出現這樣的圓角彈窗，我們直接點擊：

點擊后就會出現文本導出助手插件。

點擊「清空」，可以清空復制的所有內容。

點擊上方復制的內容，可以對內容進行修改。

如果遇到第二次復制的內容沒有同步到插件的文本框中，點擊「刷新/重新讀取」即可刷新。

然后點擊選擇我們需要的文件格式的按鈕，文件就會導出了。其他的都是一鍵直接導出，除了 PDF 文件，最開始它會導出為一個 html 格式，我們點擊「我知道了」會下載 html 文件：

點擊打開 html，選擇「打印/轉 PDF」，即可輸出 PDF 文檔到自己選擇的保存位置。

之所以調用瀏覽器自帶的“另存為 PDF”功能，是為了生成最高質量且完美兼容所有文字的 PDF 文件。這避免了集成一個龐大又可能有缺陷的程序庫，讓插件本身能始終保持輕巧和快速。

二、抓住腦海里的想法

之所以我有制作這個插件的想法，是因為有一天我想將復制的文本內容快速導出給到知識庫，但每次導出都需要我重新保存，想保存為 txt 格式需要新建文本文檔，保存為 word 也要新建文檔，簡單想快速分享內容到什么平臺，復制純文字和截圖好像都差點感覺。

于是我就想，是不是可以有這樣一個插件，非常輕便，操作極簡，復制→點擊插件→選擇導出格式，3步即可完成這個目標。

最開始這個想法只是在我腦海里閃過，因為我雖然玩過很多無代碼或者低代碼的平臺和工具，但是真要涉及編程還是覺得自己多少有點膽怯，這種知識上的壁壘讓我望而卻步。但是隨著近期我的朋友@云舒的 AI 實踐筆記 @賽博小熊貓 Loki 都有做出自己的插件或者小工具，我開始想，好像也沒那么難，先試試做個垃圾出來。

所以朋友們，首先，有想法就去做，不要猶豫！

三、和 Claude 的對話

我在文章最開始給大家展示了，原本想多聊幾句整合一個 PRD（Product Requirements Document 產品需求文檔）出來，結果 Claude 把文件做出來了。

騎虎難下啊。事已至此就繼續做吧！

然后也沒我想的那么簡單了。第 1 個坑，從 Claude 直接下載的文件，文件名和文件結構中的名字可能不一樣。務必要按照它的文件夾結構中的名字為文件命名。

這是開發谷歌插件的項目結構：

我們首先新建一個文件夾（如我這個文件最開始叫 CopyMaster），包含以下基本文件：

1. manifest.json：配置文件，定義插件的元數據和權限。
2. popup.html：彈出窗口的 HTML（如果需要）。
3. popup.js：彈出窗口的邏輯代碼。
4. content.js：操作網頁內容的腳本（如果需要）。
5. background.js：后臺運行的腳本（如果需要）。

“如果需要”是指，這些文件（如 manifest.json、popup.html 等）是根據插件功能需求可選的。如果我們開發的插件不需要彈出窗口（popup）、內容腳本（content.js）或后臺腳本（background.js），可以省略對應的文件，但 manifest.json 是必須的，因為它是插件的核心配置文件。

關于圖標：

Chrome 擴展的圖標要求包括提供多種尺寸（如 16x16、48x48、128x128 像素）的 PNG 格式圖片。圖標要清晰、無透明背景，顏色對比度高，適應明暗主題。

圖標的制作，可以使用 AI 生成，很多 AI 生成圖片的工具都可以。比如我使用 ChatGPT，我直接讓 Claude 總結了功能，讓 ChatGPT 生成圖片。最開始要求模糊，得到的效果一般，我后面對話要求修改了 2 輪。

不過這個是 1.0 版本的圖標，我后面重新修改了。

另外，準備的 png 圖片要注意后綴是 png 文件，要注意調整分辨率的要求。這里有個工具可以修改圖片分辨率：https://www.iloveimg.com/resize-image#resize-options,pixels

可以將生成的圖片輸出為修改為 3 個分辨率并導出。分別是 128x128、48x48、16x16。

做完這一步，再按照它的文件結構進行檢查。確認無誤，并且都放在同一個項目文件夾后，就可以將整個文件夾拉到谷歌擴展程序進行檢查了。這里注意打開「開發者模式」：

然后我的第一步檢查就繼續遇到問題，PDF 文件導出無法實現。我復制給 Claude，它繼續改。

這里我就開始煩了，我是一個懶人，每次要我重新導出修改的文件，每多一步我就會感覺興趣減一減一，絕不可以。

決定了，想繼續優化還是用 Cursor。我這可惡的標題黨哈哈哈。

四、在 Cursor 中 debug

Cursor 在代碼修改的便捷性上還是更勝一籌，尤其是當我需要做這種快速、小型的代碼調整，并且希望通過自然語言指令快速實現修改，喜歡在一個集成環境中完成所有操作的的話，另外，考慮到長期使用的成本，好像還是 Cursor 更劃算點。

在 Cursor 中打開項目文件夾：

關于 Cursor 的三個模式（Agent、Ask 和 Manual）

Cursor 的三個模式提供了不同層次的 AI 輔助和用戶控制：

1. Agent 模式適合自動化支持，適合需要主動協助的用戶。
2. Ask 模式適合對話式交互，適合需要即時幫助的用戶。
3. Manual 模式適合用戶完全控制，適合經驗豐富或需要精確操作的用戶。

哪個貴？

1. Agent 模式 : 通常最貴，因為它涉及多步驟操作（如搜索、推理、執行），尤其在 Max 模式下，token 消耗可能迅速增加。
2. Ask 模式 : 成本中等，取決于對話長度和頻率。
3. Manual 模式 : 最便宜，因為 AI 介入少，請求消耗最低。

性價比分析

1. Agent 模式 : 性價比高，如果處理復雜項目（如多文件重構或新功能開發），能節省大量手動時間。但若使用頻繁或切換到了 Max 模式，成本可能上升，需注意使用量。
2. Ask 模式 : 適合需要即時指導或調試的用戶，請求消耗可控，適合偶爾使用高級模型。
3. Manual 模式 : 性價比最高，適合經驗豐富用戶，減少 AI 依賴，可以延長免費請求使用時間。

注意，我還是個 Cursor 初學者，很多功能我還沒有探索到，或者說因為這里不需要用到所以忽略沒有提到，大家感興趣的還是可以系統學一下的，后面我也會系統學習，希望和大家一起進步！

這個 debug 的過程還是持續了一些時間的，這里也是一個坑，我覺得大家可以避免的，就是最開始一定要想清楚，我要做什么，我的工具要實現什么功能，不要像我這次這樣，一邊做，一邊想加入很多新的功能，比如我最開始想要 6 種輸出格式，后來覺得還可以加上另外 3 種文件格式這種，最開始可以都一次性規劃清楚。

五、優化細節

因為這確實是個相對比較簡單的插件，功能也不多，加上前期 Claude 確實給力，把基礎打得很好了，后期我做的就只是一些細節上的修改：

• 去掉原有的底部標識等
• 在原來 6 個文件格式的基礎上，增加了 json、html、md 格式導出
• 按鈕的描邊線條更細，透明度更高
• 在按鈕上添加懸浮動效
• 修改了復制內容位置的滾動條的顏色
• 增加了贊賞（嘻嘻）
• 導出圖片背景色隨機，優化圖片版式
• 增加了復制超短和超長文本時圖片的自適應
• 修改了文件導出時文件名的顯示為時間+復制內容的前 8 個字，便于識別

目前這個是 1.0 版本，存在的問題還有很多，比如目前只能復制文本還不能實現圖片復制，同一頁面第二次復制的時候可能不會出現復制成功提示（但實際已復制成功）等。后續還需要繼續優化。

以上就是我的文本導出助手 1.0 的制作流程了。再次感謝 AI 讓我這種編程小學生也能做出實用的工具。

如果我們不想把自己的插件上架到平臺的話，那么做到這一步就結束了。只需要將保存插件內容的整個文件夾拉到插件擴展程序區，自己想怎么使用都可以。如果想把自己的插件提交到平臺，那么就可以繼續往下看～

六、插件提交到平臺

然后就是把插件提交到平臺了。開發者控制臺的鏈接在這里：

https://accounts.google.com/v3/signin/confirmidentifier

我們驗證身份登錄，完成開發者注冊。其中有個需要收費 5 美元的地方，我忘記截圖了。

這里第一個驗證我上傳的護照，第二個驗證我上傳的身份證，都是自己真實的信息填寫的。個人資料也是按照自己個人的情況填寫就好了。

這個上傳了護照：

這個上傳了身份證：

然后等待驗證通過。

在左邊選擇「內容」可以上傳我們的插件文件，這里注意，上傳的時候要將所有文件打包成 zip 壓縮包，是你的插件里的文件是直接都在壓縮包中，點開 zip 壓縮包就是文件，而不是點開壓縮包還有一層文件夾。

否則就會像下面這樣報錯：

插件上傳成功后，會要求我們填寫一系列信息，不會填寫的，直接截圖給 Cursor。

比如下面我這個說明，就是 Cursor 老師寫的。當然，覺得不滿意可以讓它修改，修改到我們滿意為止。

然后來到這個圖片資源的地方，商店圖標可以就選擇自己之前做的 128x128 像素的圖標。屏幕截圖主要用于插件上線后給用戶看的對插件的介紹，可以包含功能、優點、操作方式等等。有條件也可以上傳宣傳視頻到 YouTube 做一個系統的介紹。注意屏幕截圖的數量為 1-5 張，分辨率為 1280x800。

屏幕截圖這里的文案我也是讓 Cursor 輸出的。因為它已經對這個插件工具非常了解了，輸出的文案內容也基本是符合我需要的。下面是部分它輸出內容的截圖：

然后在隱私權這一部分，可能會遇到很多個需要填寫的內容：

沒關系，這些也可以通通交給 Cursor 包辦。把截圖上傳給它。

注意，我在這里填寫內容進行審核的時候也踩了坑，如下圖：

也就是說，如果這個請求權限不是必須的，建議就不要這個權限。這個權限是不是必須可以詢問 Cursor 讓它確認。

這 3 個必須全選：

如果上面的所有內容都已完成或填寫完畢，就可以在右上角點擊「提請審核」了。如果「提請審核」還是灰色不可點擊狀態，那么點擊它左邊的「我為何無法提交？」就可以查看原因。繼續解決問題即可。

等一切都完成了，可以看見「提請審核」的圖標有顏色了，提請審核之前，可以點擊右邊預覽。

完成了這一步，我們插件就已經可以提交了，等待審核通過，就可以在 Chrome 應用商店找到它啦。

大家如果對我的插件感興趣，可以在谷歌瀏覽器插件中心搜索「文本導出助手」。

或者復制鏈接到瀏覽器： https://chromewebstore.google.com/detail

感謝朋友們的支持??！

另外，我把這個插件的文件也都放在 github 上了

鏈接在這里： https://github.com/irenerachel/Text-Export-Assistant-1.0

小結

做到這里，感覺好像也沒有那么難，畢竟大部分活都是 AI 工具干的，我只是輸出了一些想法和要求而已（當然中間要仔細給 Cursor 描述我的需求還是有點抓狂的）。利用好 AI 工具，真的有很多機會能為我們的日常生活提高效率，讓日常工作更加便捷。

但是我想說，這距離真正的程序員開發程序、插件、應用還有很遠的距離，在專業知識上依然存在巨大鴻溝，絕不能因為用 AI 做出了一個插件，就小看了程序員的含金量。

程序員的工作有其核心價值，他們具備解決復雜問題的能力，而不是停留在淺顯的表層問題上，他們能夠架構整個系統并預見潛在問題。當系統出現性能瓶頸、安全漏洞或需要優化時，只有那些對底層原理有深入理解的專業人士才能調試這些真實生產環境中的復雜 bug。還有理解用戶需求，將一個個模糊的商業想法轉化為具體技術方案，這些都需要大量的知識積淀和抽象思維能力。

對于程序員來說，現在的機會可能更大更多了，他們從重復性的編碼中解放出來，有了更多精力去專注于具有創造性的工作。AI 成為了他們強大的助手，讓一個人就能完成以前需要團隊才能完成的事情，大大提高了個人生產力的上限。

雖然經常有人開玩笑說 AI 技術爆發后壓力最大的就是設計師和程序員，但事已至此，大家也只能擁抱變化，不斷適應和學習，尋找新的機會。程序員有了更好的機會向"技術產品經理"轉型，更多地關注工具功能能夠解決哪些場景下的哪些問題，而不再僅僅聚焦于如何實現功能。

另外，也想感慨一句，技術發展速度越來越快，堅持持續學習比掌握某個特定技能更重要。像我這樣的設計師都能用 AI 制作插件了，這本身也說明了未來的趨勢：技術工具會越來越智能化，這是不可阻擋的，但是真正有價值的還是知道如何去運用這些工具，創造實際價值的人。

我們一起繼續努力吧，共勉～！