找我們做網站
↑
Resources · Chrome 擴充功能

Snippyly 網頁截圖標註 Chrome 擴充功能介紹(官網已轉型)

Chrome 擴充功能發布 2021.12.23更新 2026.10.02閱讀約 7 分鐘
Snippyly 網頁截圖標註 Chrome 擴充功能介紹(官網已轉型)

重點整理
Snippyly 是免費 Chrome 擴充功能,可截取網頁畫面並加上文字、框線等標註,再產生檢視或多人共同編輯的分享連結。注意:Snippyly 官網已轉型為開發者協作工具,擴充功能是否仍可安裝需自行確認。

有時候想跟朋友分享某個網站、應用程式的功能的時候,通常我們會使用截圖加上劃記標註,這樣朋友就能很快找到相應的位置,這個編輯的動作對於手機來說不會花費太多時間,但是如果這時候我們使用的是電腦,那在執行這些操作時就會變得更複雜、麻煩,這時我們就能透過 Snippyly ,不僅能截圖網頁畫面,還提供編輯功能,可自行加上文字與框線,最後還能產生線上連結,快速將資訊分享給其他人!下來跟著鵠學苑的腳步,讓我們開始學習吧!

Snippyly是什麼

Snippyly是一個免費 Chrome 擴充功能,能透過Snippyly將網頁畫面截圖、編輯和分享,讓分享資訊的過程變簡單,不用花費太多時間,而Snippyly除了可以分享一般僅供檢視的連結以外,比較特別的是可以分享線上多人編輯連結給其他人,對方開啟後就能透過線上編輯器對圖片加入更多的標註,這樣就能透過連結直接在上面與他人進行交流、分享。

Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 155806
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 155806

如何使用Snippyly

點擊網站上的連結就可以進入Snippyly的官方網站!接下來就是跟著下面的步驟學習如何使用吧~
第一步:點擊「Add to Chrome, it’s free」按鍵。
點擊「Add to Chrome, it’s free」按鍵就會跳轉到Chrome線上應用程式商店頁面。

Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 3
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 3

第二步:點擊「加到Chrome」按鍵。
點擊按鍵後Chrome就可以有這個擴充功能囉(會出現在畫面的右上方,有個拼圖的icon)。

Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 5
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 5

第三步:點擊右上方剪刀符號或是按 Control + Shift + 4。
點擊右上方剪刀符號是可以自己選擇截圖的範圍,如果是按 Control + Shift + 4的話會將使用者看到的網頁完整畫面直接轉為圖片,截圖後會跳轉至下方線上編輯器畫面,之後就可以進行截圖編輯~

Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 7
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 7
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 155157
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 155157

第四步:利用編輯工具增加說明劃記。

  • Snippyly編輯工具1:CROP(裁切),如果個人對於畫面的大小不滿意,或是你覺得重點資訊的區域需要集中,可以透過這個功能,將畫面再進行一次裁切。
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 9
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 9
  • Snippyly編輯工具2:RECTANGLE(長方形),可以加入長方形的框框,像畫面上我在訂閱電子報的部分加入長方形框線,另外上方靠右是有按鍵可以進行顏色的調整。
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 11
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 11
  • Snippyly編輯工具3:ARROW(箭頭),可以插入箭頭符號,除了長方形框的工具以外,還可以透過加上箭頭符號增加強調的效果。
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 12
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 12
  • Snippyly編輯工具4:TEXT(文字),可以插入文字內容,圖中紫色方框就是進行示範的結果,當確定好文字後紫色框就會自己消失囉。
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 13
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 13
  • Snippyly編輯工具5:COMMENT(文字),這邊可以加入評論內容,或者也可以直接標註@分享朋友的電子郵件。
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 14
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 14
  • Snippyly編輯工具6:BLUR(模糊),可以將畫面的某個區塊或是自己覺得不重要的部分模糊。
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 15
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 15
  • Snippyly編輯工具7:EMOJI,可以插入EMOJI,像圖中就插入萬歲的舉手符號,感覺增加了畫面的活潑感~
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 16
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 16
  • Snippyly編輯工具8:IMAGE(圖片),可以插入圖片,說不定還能用這個功能惡搞朋友呢。
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 17
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 17

第五步:分享出去!
點擊右上方分享,就可以將連結分享出去囉,另外可以選擇內容是僅供檢視或可以編輯,這樣就能透過連結直接在上面與他人進行交流、分享。

Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 18
Snippyly免費Chrome擴充功能,網頁截圖分享超簡單!還可多人線上編輯! - 步驟 18

 

有哪些可以取代 Snippyly 的截圖標註方式?

  • 系統內建工具:Windows 的剪取工具、Mac 的截圖與「預覽程式」都能加框線、箭頭、文字,最不需要額外安裝。
  • Chrome 開發人員工具:可以擷取整頁長截圖,適合回報網站版面問題。
  • 螢幕錄影分享:說明操作步驟時,錄一段短影片比多張截圖清楚,不少錄影工具錄完就能直接產生分享連結。

安裝任何截圖擴充功能前,先看它要求的權限:能「讀取和變更所有網站資料」的擴充功能,能看到你在每個網頁上的內容,最好只裝來源可信、仍持續更新的工具。

常見問題

Snippyly 還能用嗎?

本文介紹的截圖標註擴充功能已無法從官網取得。2026 年查證時 snippyly.com 已轉向開發者用的多人協作 SDK,官網不再介紹這款 Chrome 截圖工具,是否仍能在 Chrome 線上應用程式商店安裝需自行確認。

Chrome 可以不裝擴充功能直接截整個網頁嗎?

可以。在網頁按 F12 開啟開發人員工具,再按 Ctrl+Shift+P(Mac 為 Command+Shift+P)開啟指令選單,輸入 screenshot,選擇擷取完整尺寸螢幕截圖,就會下載整頁的 PNG 圖檔。

電腦內建的截圖快速鍵是什麼?

Windows 按 Win+Shift+S 可以框選範圍截圖,截完會進入剪取工具加註記;Mac 按 Command+Shift+4 框選範圍,Command+Shift+5 則可選擇截圖或錄影,截圖後點縮圖就能加上箭頭與文字。

結語

Snippyly 不僅能截圖網頁畫面,還提供編輯功能,最大的特點是還能產生線上連結,快速將資訊分享給其他人!而Snippyly的缺點是編輯錯誤的話,超過兩步驟沒有辦法取消還原,就必須全部重來,但就線上的截圖編輯軟體來說,算是功能多且上手快的好用工具。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。