Chrome 外掛開發入門

語言: CN / TW / HK

熱門外掛

安全類 LastPass:密碼管理器

一款Freemium的跨平臺線上密碼管理工具。 旨在通過將使用者的密碼集中在雲端以解決密碼疲勞。 LastPass使用Web介面為基礎,但還提供使用於許多現代瀏覽器的外掛和小書籤。

  • 儲存使用者名稱和密碼,自動登入
  • 通過儲存地址、信用卡號等來快速填寫表格
  • 儲存護照、保險卡和其他任保護的東西

ctx-lastpass-2.jpg

效率類 Flash Switcher:閃電切換器

專注於提高瀏覽器操作效率、體驗的工具,聚焦最常用的多選項卡 Tab 切換、千級甚至萬級書籤檢索、以及海量的搜尋歷史,踐行"現在有用的,將來大概率有用的"理念,實現任意數量 Tab、書籤、歷史的常數級、沉浸式操作,提升效率,節省海量的毛細時間。

  • 目標:  將瀏覽器打造成【第二大腦🧠】
  • 特徵🌩 :  將瀏覽器操作效率提高到極致,無視Tab、書籤、歷史的數量和深度,實現常數級的效率保證

Switcher-tabs.png

Switcher-marks.jpg

外掛意義

場景:🔖 書籤操作

書籤是瀏覽器最重要、也是生活日常生活工作最常用的功能之一

ctx-bookmark-manually.png

  • 核心問題:長耗時操作

在書籤數量大、層級深、歸類不清晰等背景下,每一次的新增、修改、查詢書籤都是極其耗時的長、重操作,大大限制了書籤的數量和作用。

chrome-crx-bmk-cost.png

  • 外掛式方案

秒級定位:  無視書籤數量、層級深度 絲滑操作: 語義化快捷鍵,當前頁面,不跳轉、不分散主精力 數量級提升: 可以輕鬆管理千級甚至萬級數量的書籤,大幅提升書籤數量和質量

外掛核心概念

根據個人習慣、生活、工作場景的需要,利用瀏覽器外掛開發機制和API,將自己特定大量、重複性需求外掛化、自助化。

ctx-bookmark-crx-add.png

哪裡可以擴充套件?

chrome-crx-points.png

Chrome 的介面佈局和外掛式設計決定了其可能的擴充套件點和機制。

Manifest.json:配置入口

用以配置應用名、版本,以及所需的系統許可權,最重要、不可缺少,必須置於根目錄

  • manifest_version: 外掛版本

目前只支援上架和更新 v3 版本,v2 不再支援,必須在 2023 年前全部替換。且 V3 版的上架稽核優先順序更高,週期更短。

v3版本對 v2 版的元件和API進行了大幅度的優化和安全增強,最主要的變動如下圖

  • Permission 許可權

需要申請正確的許可權才可以呼叫相應的API,如操作選項卡的 tabs 許可權。

最小許可權原則:儘量使用必要的許可權,過多的、敏感許可權將導致稽核時間大大延長,甚至拒絕

componets permission.png

v3版本中Api Permission 和 Host Permission 分離,以更清晰的界定許可權類別。

Service Worker: 中央處理器

本質上是瀏覽器在後臺執行的指令碼,它是完全獨立於它正在處理或服務的網頁。它們充當了 web 應用程式、瀏覽器和網路之間的代理伺服器。service worker 賦予 Web 應用程式像原生應用程式一樣工作的能力

  • 無狀態瞬時元件:在瀏覽器啟動後初始化執行,便銷燬
  • 事件驅動: 通過註冊各類事件監聽器,作為其他元件間的中央處理和通訊單元
  • 許可權最大:  可以呼叫除了 Dom 外的大部分API,完成其他元件不可用執行的功能

Popup: 彈窗

點選browseraction或者pageaction圖示時開啟的一個小視窗網頁,焦點離開網頁就立即關閉,一般用來做一些臨時性的互動。

  • 大部分外掛主要的互動區域、工作方式
  • 最大空間:800 x 600

ContentJs: 內容指令碼

向當前主頁面視窗中注入指令碼的一種形式,最常見的比如:廣告遮蔽、頁面CSS定製。

  • 突破POP視窗大小的侷限性,自由度更高
  • 注意CSS樣式汙染,會導致部分宿主頁面變形

外掛DIY - Rename Tab

背景

部分網站的所有子頁面的標題相同,當開啟眾多時,很難通過標題快速區分具體是哪個頁面,影響併發多開基數。

功能需求

支援手動或自動修改當前頁面Tab標題,增加Tab可辨識性、可搜尋性。

連結