雖然有點標題黨的嫌疑,但是內容絕對是滿滿的的乾貨。很多擴充套件功能比較單一,直接用一張圖就能很清楚說明它的用途啦。出於篇幅的限制,我在這裡會重點介紹一些我個人比較用得上的一些擴充套件。因為平時前端開發的比較多,所以偏向前端程式設計師的擴充套件可能會比較多一些。
我本人對 chrome 擴充套件比較挑,一般有同型別的擴充套件我會選擇維護比較積極的,使用人數更多的。像有些 3 年都沒更新過的擴充套件我基本上是不會用的,除非這個擴充套件本身功能比較簡單,不需要更新。我平時有事沒事就會去 chrome 擴充套件市場去逛逛,所以積累的優秀擴充套件比較多。一大波圖片即將襲來, 請在 wifi 條件下或者流量充足的情況下閱讀。
讓 chrome 更好用的擴充套件
Chrome Better History
這是一個用來替代 chrome 自帶的檢視歷史記錄功能的擴充套件,介面設計的很簡潔,比較讚的是可以很方便的檢視不同日期的歷史記錄。
Grammarly for Chrome
其實包括很多編輯器和 ide 都有類似的擴充套件用來糾正英文的拼寫錯誤。當你在網頁中的編輯框中編輯文字時,這個擴充套件能提示你單詞的拼寫錯誤,你少了標點符號和混淆單詞提示等, 高階版功能更多,不過標準版就已經夠用了。
Webtime Tracker
統計你瀏覽各個網站的時間,以圓環圖和列表的形式展示,簡潔專一。
uBlock Origin
攔截廣告的擴充套件有很多,比較有名的有 Adblock
,Adblocks plus
,AdGuard
, uBlock Origin
等,各有各的特點,挑一個安裝就行了,安裝多個完全沒必要,浪費記憶體還容易起衝突。感覺用來攔截廣告的擴充套件後,瀏覽網頁就沒怎麼碰到過噁心的廣告,彈窗了。清爽了不少,實在必備神器啊。
Enable Copy
遇到限制複製貼上和右鍵的網頁是不是很頭痛?安裝這個擴充套件後,點下擴充套件按鈕就能解決了~
Chrome清理大師
非常輕巧實用的清理工具,沒有其他亂七八糟的功能。
高效網頁截圖編輯擴充套件
這款截圖工具不但截圖功能豐富,還可以在截圖之後直接標註。
劃詞翻譯
一款小巧實用的劃詞翻譯工具,設定項很豐富。
Wappalyzer
一款可以分析網站用到的技術框架的擴充套件。
IP Whois & Flags Chrome & Websites Rating
可以顯示網站的國旗和其它資訊。
另一款更強大的 ip 分析擴充套件是 IP Address and Domain Information
擴充套件管理器(Extension Manager)
簡單易用的擴充套件管理器,點選已啟用的擴充套件圖示即可禁用,還有搜尋和分組功能。
Copyfish ? Free OCR Software
一個 ocr 文字識別擴充套件。
Markdown Preview Plus
一款可以讓你在瀏覽器中閱讀 markdown 檔案的擴充套件,配色還是挺護眼的。
Markdown Here
官方描述:
Markdown Here允許你在傳送電子郵件之前用Markdown語法編輯並轉換它(讓它看起來漂亮極了!)。 這對於那些不喜歡在撰寫電郵時反覆擺弄排版按鈕的人無疑是好訊息。 它特別適合那些要在電子郵件中插入程式碼的程式設計師們 —— 沒錯,它甚至支援語法高亮顯示。 對於我們之中的數學家們而言,Markdown Here也支援轉換TeX公式。 複製程式碼
類似的網站 - 發現相關網站
Proxy SwitchyOmega
代理管理擴充套件,方便快速切換各種代理模式。
Tampermonkey
很多網友叫這個擴充套件叫油猴,本質上是一個管理注入網站的 javascript 指令碼的擴充套件。使用它我們可以自定義某個網站開啟時注入的指令碼,也可以去一些論壇直接安裝別人分享的指令碼。油猴搭配 idm
對於治療百度網盤蝸速有奇效,,比較受歡迎的指令碼還有破解會員之類的。推薦指令碼源 greasyfork, 還有一個顯示當前網站所有可用指令碼的指令碼 Userscript+。
Stylus
油猴是用來注入 javascript 指令碼的,而這個是用來注入 css 樣式的。
Infinity 新標籤頁
這個擴充套件被太多人推薦過了,非常良心的一款新標籤頁擴充套件,有很多地方都可以自定義。本文的封面就是這個擴充套件。
HTTPS Everywhere
加密網路瀏覽,自動使用 HTTPS 連線訪問站點,更加安全。
還有一些都用得上的擴充套件我就簡單列一下:
- Black Menu for Google™ 一個選單擴充套件讓你快速使用 Google 提供的各種服務
- crxMouse Chrome™ 手勢 極大的擴充套件了 chrome 的手勢功能
- Fatkun圖片批量下載
- IE Tab 解決 chrome 無法使用網銀的問題
- Note Board - Sticky Notes App
- MEGA 免費 50 G 的網盤
- Office Online 在瀏覽器中檢視、編輯和建立 Office 檔案。
- PDF Viewer chrome 瀏覽 pdf
- Screencastify - Screen Video Recorder 網頁錄屏
- OneTab 合併所有標籤頁,節省記憶體
- Tabs Outliner 將標籤頁樹狀顯示
- Speedtest by Ookla 測試網路速度和開啟網頁的速度
- Surfingkeys
- Vimium 像 vim 一樣操控網頁
- Volume Master 音量調節器
- 為什麼你們就是不能加個空格呢?
- Listen 1 音樂聚合
- Video Speed Controller 視訊加速擴充套件,可以用來做壞事(。^▽^)
- Hover Zoom 滑鼠懸浮到圖片上顯示大圖
- 右鍵搜 擴充套件右鍵選單
- 關燈看視訊
網站加強擴充套件
github 相關的擴充套件比較多。
Awesome Autocomplete for GitHub
加強 github 的搜尋框。
File Icon for GitHub, GitLab and Bitbucket
給 github 倉庫檔案新增圖示。
Octohint
github 程式碼智慧高亮。
OctoLinker
直接從程式碼跳轉到 gtihub 對應倉庫。
Isometric Contributions
立體顯示 github Contributions 的擴充套件。
Octotree
在左側新增一個檔案瀏覽器,可以更快的在檔案之間跳轉。
Sourcegraph
這個擴充套件厲害了,將 github 變得和 IDE 一般,整合各種功能。
和 github 相關的還有幾個我就簡要介紹一下了
- GayHub
- Refined GitHub 這個和上面的都是對 github 整體進行加強的擴充套件
- GitHub Hovercard 這個加強了 github 懸浮在某些元素上的功能
v2ex plus
官方介紹:
優雅便捷的 V2EX 擴充套件
- 帖子會話詳細.
- 帖子列表主題預覽.
- 只看樓主功能.
- 樓主回覆背景色高亮(顏色可自定義).
- 感謝愛心顏色自定義.
- 插入表情與圖片(weibo或imgur).
- 回覆內圖片旋轉.
- 一鍵簽到與自動簽到.
- 新訊息通知提醒並改變擴充套件按鈕顏色.
One more thing... ^-^
YouTube™廣告攔截器
這個廣告攔截器會刪除YouTube上的所有廣告。前貼片視訊廣告,文字和橫幅廣告。
還有一個和 youtube 相關的擴充套件 Magic Actions for YouTube™
眼不見心不煩(新浪微博)
新浪微博加強擴充套件,不過評論有些負面評價,我也不知道是不是真的,平時不怎麼玩微博。
新浪微博圖床
簡單好用的新浪微博圖床,支援選擇/拖拽/貼上上傳圖片,並生成圖片地址,HTML,UBB和Markdown等格式,支援瀏覽和刪除歷史記錄
嗶哩嗶哩助手:bilibili.com 綜合輔助擴充套件
嗶哩嗶哩彈幕網輔助擴充套件,擁有視訊區和直播區的人性化功能。
bilibili嗶哩嗶哩下載助手
bilibili 嗶哩嗶哩 B站 下載助手 幫你下載版權受限(能看不能快取)的 番劇 視訊。
前端擴充套件
ColorZilla
取色器。
CSSViewer
css 檢視器。
EditThisCookie
EditThisCookie 是一個 cookie 管理器。您可以新增,刪除,編輯,搜尋,鎖定和遮蔽cookies!
下面是知乎登入後的 cookie 編輯頁面。
JSON Viewer Awesome
美化 json 內容。
Lighthouse
谷歌官方出品的一個網站效能測試,分析擴充套件。
下面是這個擴充套件生成的知乎首頁的一份測試報告,可以看出知乎根本沒做 pwa 。
LiveReload
一款讓你不使用 webpack 構建專案也能享受熱載入的擴充套件。
Page Ruler
一款尺寸測量工具。
ReRes
很實用的一個開發工具,官方介紹:
Change the response of the request. ReRes可以用來更改頁面請求響應的內容。通過指定規則,您可以把請求對映到其他的url,也可以對映到本機的檔案或者目錄。ReRes支援單個url對映,也支援目錄對映。
User-Agent Switcher and Manager
這個擴充套件能讓你自定義網站的 user-agent,切換不同的 user-agent,檢視網頁在不同的 user-agent 下的效果。
WEB前端助手(FeHelper)
這個就不用介紹了吧,很多開發者都在用,國內開發者開發的一套前端工具集。
Restlet Client - REST API Testing
一款 restful api 測試工具,不過我一般都直接用 postman。
VisBug
谷歌公司開源的一款前端設計,除錯工具。
Moesif Orign & CORS Changer
解除瀏覽器跨域限制。
還有一些我就簡要介紹一下了:
- React Developer Tools facebook 官方開發 react 開發擴充套件。
- Redux DevTools redux 開發擴充套件
- lucid A React-GraphQL developer tool
- Vue.js devtools vue 官方開發 vue 開發擴充套件
- Puppeteer Recorder 錄製 puppeteer 指令碼
- SEOquake 檢視一個網站在各大搜尋引擎的 SEO 情況
chrome app
Gliffy Diagrams
有了它,就可以替代 processon, draw.io 之類的線上畫圖工具了。
Secure Shell App
一個終端模擬器,ssh 客戶端,有興趣可以體驗一下,我自己是沒怎麼用過。
Text
一款文字編輯器,支援語法高亮,還可以儲存內容到 Google Drive 上。
寫在最後的一些話
這篇文章有點長,能看到這也是不容易。很多人是文章太長就不看的(>人<;)。別看我說了這麼多擴充套件,我平時也不會把這麼多外掛全開著,有些擴充套件還是挺佔用記憶體的。有些人可能不知道怎樣檢視 chrome 的資源佔用情況,方法很簡單: 右擊 chrome 標籤欄可以看到一個開啟工作管理員的選項。點選就可以開啟 chrome 工作管理員,在 chrome 工作管理員就可以看到各種擴充套件資源佔用情況。
一般情況下我只會啟用少部分我常用的擴充套件。我電腦記憶體 16 G,其實多開幾個擴充套件倒無所謂。我只是怕擴充套件之間會起衝突,或者對我的網頁內容造成一些隱性 bug,畢竟我目前還是搞前端開發的。如果有什麼問題或者你有更好的擴充套件推薦,不妨在評論區留言,我一般都會積極回覆。
感謝您的閱讀,如果對你有所幫助不妨加個關注,點個贊支援一下O(∩_∩)O。