在這個(gè)信息爆炸的時(shí)代,瀏覽器已經(jīng)成為人們獲取知識(shí)、溝通交流、工作與娛樂(lè)的重要門(mén)戶(hù)。瀏覽器插件作為這個(gè)門(mén)戶(hù)的自定義工具,通過(guò)增加新的功能或特性,極大地豐富了我們的網(wǎng)絡(luò)體驗(yàn)。從早期的網(wǎng)景瀏覽器到今天的Chrome,瀏覽器的演進(jìn)歷程就是互聯(lián)網(wǎng)發(fā)展的縮影。
一開(kāi)始瀏覽器僅是一個(gè)簡(jiǎn)單的信息查閱工具,而如今隨著AI技術(shù)的進(jìn)步,尤其是ChatGPT等大型語(yǔ)言模型的出現(xiàn),我們已經(jīng)進(jìn)入了全新的智能時(shí)代,在這個(gè)時(shí)代,瀏覽器插件不再只是簡(jiǎn)單的工具,它們被賦予了更復(fù)雜、更智能的功能,如Monica、ChatGPT for Google等擴(kuò)展,它們正在改變我們與網(wǎng)絡(luò)內(nèi)容的互動(dòng)方式。例如,Shulex Copilot這樣的瀏覽器插件結(jié)合了AI技術(shù),為電商提供了前所未有的數(shù)據(jù)分析能力,而Evernote Web Clipper則讓信息的收集和整理變得十分簡(jiǎn)單。這些插件不僅增強(qiáng)了功能,更提高了效率,改善了用戶(hù)體驗(yàn)。瀏覽器插件已經(jīng)轉(zhuǎn)變?yōu)橐粋(gè)強(qiáng)大的平臺(tái),能夠通過(guò)各種插件和擴(kuò)展,實(shí)現(xiàn)高度定制化的用戶(hù)體驗(yàn)。
在本書(shū)的編寫(xiě)過(guò)程中,筆者面臨著資料混雜的挑戰(zhàn)自2009年谷歌公司推出瀏覽器插件平臺(tái)至今市面上沒(méi)有系統(tǒng)地介紹如何開(kāi)發(fā)插件的書(shū)籍,現(xiàn)有的資料零散、繁雜且都缺乏更新。正是在這種背景下,筆者邊實(shí)踐邊寫(xiě)作,將個(gè)人的探索和總結(jié)凝結(jié)成書(shū),可以說(shuō),書(shū)中的每一頁(yè)都蘊(yùn)含著筆者的汗水和智慧。筆者不僅提供了理論基礎(chǔ),更通過(guò)親身實(shí)踐的案例,展示了如何將抽象的概念轉(zhuǎn)換為實(shí)際可行的解決方案。
本書(shū)將從實(shí)戰(zhàn)出發(fā)分三部分詳細(xì)介紹瀏覽器插件開(kāi)發(fā)。首先,第1~3章側(cè)重于理論基礎(chǔ),為后續(xù)的實(shí)戰(zhàn)做好充分的鋪墊。這部分會(huì)詳細(xì)介紹瀏覽器插件的基本原理,包括插件的工作機(jī)制、開(kāi)發(fā)環(huán)境的搭建及一些核心的編程概念。雖然這部分內(nèi)容可能相對(duì)抽象,但是它們是理解后續(xù)實(shí)戰(zhàn)內(nèi)容的必要基礎(chǔ)。接下來(lái),第4~11章以模塊化的方式,結(jié)合具體的實(shí)戰(zhàn)案例,詳細(xì)講解了瀏覽器插件開(kāi)發(fā)的各個(gè)環(huán)節(jié)。每章都圍繞一個(gè)主題,如界面設(shè)計(jì)、權(quán)限介紹、網(wǎng)絡(luò)請(qǐng)求等,通過(guò)實(shí)際的代碼和詳細(xì)的解析,幫助讀者掌握瀏覽器插件的開(kāi)發(fā)技巧和方法。最后,第12章是項(xiàng)目實(shí)戰(zhàn),筆者以一個(gè)完整的項(xiàng)目為例,對(duì)前面介紹的知識(shí)點(diǎn)進(jìn)行整合,讓讀者能夠在實(shí)踐中看到各個(gè)知識(shí)點(diǎn)的運(yùn)用,并理解它們?nèi)绾螀f(xié)同工作,共同構(gòu)建出一個(gè)功能完善的瀏覽器插件。
在Chrome瀏覽器插件的發(fā)展史中,我們看到了一個(gè)不斷擴(kuò)張的生態(tài)系統(tǒng)。從最初的擴(kuò)展支持到如今的商店里擁有超過(guò)十萬(wàn)個(gè)擴(kuò)展,Chrome的成功不僅體現(xiàn)在市場(chǎng)份額上,更重要的是,它為開(kāi)發(fā)者和用戶(hù)提供了一個(gè)充滿(mǎn)可能性的平臺(tái)。
本書(shū)將一步步引導(dǎo)你走進(jìn)瀏覽器插件開(kāi)發(fā)的世界。無(wú)論你是一名有抱負(fù)的開(kāi)發(fā)者,還是一名對(duì)瀏覽器插件充滿(mǎn)好奇的用戶(hù),本書(shū)都將為你提供必要的理論知識(shí)和實(shí)戰(zhàn)技巧,幫助你在這個(gè)令人興奮的領(lǐng)域中找到自己的位置。讓我們一起開(kāi)始這段探索之旅吧。
閱讀建議
要想深入掌握瀏覽器擴(kuò)展開(kāi)發(fā),光靠理論學(xué)習(xí)是遠(yuǎn)遠(yuǎn)不夠的。在本書(shū)中,筆者不僅分享了豐富的理論知識(shí),更重要的是,還把自己在工作中的實(shí)踐經(jīng)驗(yàn)融入了寫(xiě)作之中。本書(shū)不僅是一個(gè)知識(shí)庫(kù),也是一個(gè)實(shí)際操作的手冊(cè),筆者通過(guò)親身實(shí)踐,為讀者提供了一系列切實(shí)可行的案例和解決方案。
本書(shū)的價(jià)值在于實(shí)踐。希望讀者不僅要閱讀和理解,更要?jiǎng)邮謬L試和實(shí)驗(yàn)。通過(guò)實(shí)際編碼和調(diào)試,你將能夠更深入地理解瀏覽器擴(kuò)展的開(kāi)發(fā)過(guò)程。此外,書(shū)中的知識(shí)點(diǎn)和經(jīng)驗(yàn)教訓(xùn)都是筆者在現(xiàn)實(shí)工作中一點(diǎn)一滴積累起來(lái)的,因此,每次實(shí)踐都是在與筆者的工作經(jīng)歷對(duì)話,讓你在學(xué)習(xí)的道路上少走彎路。
與此同時(shí),不斷回顧和復(fù)習(xí)所學(xué)知識(shí),與他人討論和分享你的發(fā)現(xiàn)和挑戰(zhàn)都能夠幫助你更深刻地理解書(shū)中的內(nèi)容。最終,通過(guò)不斷實(shí)踐和探索,你將能夠熟練地運(yùn)用瀏覽器擴(kuò)展開(kāi)發(fā)的技能,甚至創(chuàng)造出屬于自己的獨(dú)特插件。本書(shū)是你旅程的起點(diǎn),實(shí)踐則是你通往成為專(zhuān)家道路上的加速器。
資源下載提示
素材(源碼)等資源: 掃描目錄上方的二維碼下載。
視頻等資源: 掃描封底的文泉云盤(pán)防盜碼,再掃描書(shū)中相應(yīng)章節(jié)的二維碼,可以在線學(xué)習(xí)。
致謝
感謝我的妻子和岳母對(duì)我的大力支持并承擔(dān)了所有的家務(wù),使我得以全身心地投入寫(xiě)作工作中。
由于時(shí)間倉(cāng)促,書(shū)中難免存在不妥之處,請(qǐng)讀者見(jiàn)諒,并提出寶貴意見(jiàn)。
喬凱
2024年12月
于北京
第1章瀏覽器插件發(fā)展背景概述(22min)
1.1引言
1.1.1互聯(lián)網(wǎng)和瀏覽器的早期發(fā)展
1.1.2瀏覽器技術(shù)的關(guān)鍵發(fā)展
1.2瀏覽器插件的起源和發(fā)展歷程
1.2.1使用插件自定義軟件
1.2.2原生瀏覽器插件
1.2.3從瀏覽器附加組件到擴(kuò)展
1.3瀏覽器擴(kuò)展領(lǐng)域概覽
1.3.1移動(dòng)應(yīng)用程序與瀏覽器擴(kuò)展的比較
1.3.2瀏覽器擴(kuò)展商店
1.3.3瀏覽器擴(kuò)展的類(lèi)型
1.4本章小結(jié)
第2章Chrome瀏覽器插件基礎(chǔ)(26min)
2.1現(xiàn)代瀏覽器架構(gòu)
2.1.1瀏覽器的核心組成
2.1.2功能分層
2.1.3多進(jìn)程架構(gòu)
2.2瀏覽器及插件模型
2.2.1瀏覽器模型
2.2.2瀏覽器的標(biāo)簽頁(yè)
2.2.3瀏覽器插件模型
2.3插件的工作原理
2.3.1插件的架構(gòu)
2.3.2事件和通信模型
2.3.3同源策略
2.4插件開(kāi)發(fā)的基本概念
2.4.1Manifest V3
2.4.2Manifest V3 基本組成部分
2.5本章小結(jié)
第3章Manifest新特性介紹(24min)
3.1瀏覽器插件的發(fā)展愿景
3.1.1Webby模型
3.1.2權(quán)限模型
3.1.3隱私
3.1.4安全性
3.1.5性能
3.1.6Webbiness
3.2主要新特性詳解
3.2.1Service Worker
3.2.2網(wǎng)絡(luò)請(qǐng)求調(diào)整
3.2.3遠(yuǎn)程資源訪問(wèn)限制
3.2.4Promise
3.3本章小結(jié)
第4章快速上手(14min)
4.1創(chuàng)建清單文件
4.2安裝擴(kuò)展
4.3重新加載擴(kuò)展
4.4添加后臺(tái)腳本
4.5添加彈出頁(yè)面
4.6添加選項(xiàng)頁(yè)面
4.7添加內(nèi)容腳本
4.8添加開(kāi)發(fā)者工具面板
4.9本章小結(jié)
第5章Manifest詳解(22min)
5.1清單文件
5.2國(guó)際化與模式匹配
5.2.1國(guó)際化配置
5.2.2模式匹配
5.3Manifest 屬性
5.3.1必填屬性
5.3.2推薦屬性
5.4本章小結(jié)
第6章權(quán)限詳解(27min)
6.1瀏覽器插件權(quán)限的基本概念
6.1.1瀏覽器權(quán)限模型
6.1.2瀏覽器插件權(quán)限模型
6.1.3聲明式授權(quán)與命令式授權(quán)
6.1.4權(quán)限檢查
6.1.5可選權(quán)限
6.1.6主機(jī)權(quán)限
6.2深入理解瀏覽器插件權(quán)限
6.2.1插件權(quán)限的生命周期
6.2.2理解與管理瀏覽器插件權(quán)限
6.3權(quán)限列表
6.4本章小結(jié)
第7章Popup and Option Page(16min)
7.1基本概念
7.1.1角色定位
7.1.2彈出頁(yè)面與配置頁(yè)面的區(qū)別
7.2彈出頁(yè)面
7.2.1彈出頁(yè)面
7.2.2彈出頁(yè)面的設(shè)計(jì)原則
7.2.3開(kāi)發(fā)彈出頁(yè)面的常用操作
7.2.4常見(jiàn)的彈出頁(yè)面使用建議
7.3配置頁(yè)面
7.3.1配置頁(yè)面介紹
7.3.2配置頁(yè)面的設(shè)計(jì)原則
7.3.3開(kāi)發(fā)配置頁(yè)面的常用操作
7.3.4常見(jiàn)的配置頁(yè)面建議
7.4本章小結(jié)
第8章Content(24min)
8.1深入理解內(nèi)容腳本
8.1.1什么是內(nèi)容腳本
8.1.2創(chuàng)建第1個(gè)內(nèi)容腳本文件
8.1.3內(nèi)容腳本的隔離性
8.1.4擴(kuò)展API的訪問(wèn)
8.1.5腳本注入
8.1.6與共享頁(yè)面通信
8.2模塊化
8.2.1動(dòng)態(tài)導(dǎo)入
8.2.2打包
8.2.3模塊加載庫(kù)
8.2.4轉(zhuǎn)譯
8.3特殊的屬性
8.4與網(wǎng)頁(yè)交互的范式
8.4.1文章閱讀時(shí)間生成器
8.4.2沉浸式閱讀模式
8.4.3對(duì)話助手界面生成
8.5本章小結(jié)
第9章Background腳本(18min)
9.1Service Worker
9.1.1Service Worker簡(jiǎn)介
9.1.2插件Service Worker
9.1.3Service Worker與Web Service Worker的異同
9.2核心概念
9.2.1插件的Service Worker生命周期
9.2.2插件Service Worker的事件
9.3Service Worker的常用模式
9.3.1事件處理器
9.3.2消息總線
9.3.3存儲(chǔ)管理
9.3.4認(rèn)證與密鑰
9.3.5強(qiáng)制Service Worker活躍
9.3.6網(wǎng)絡(luò)流量監(jiān)控
9.3.7安裝與事件更新
9.3.8Opening Tab
9.3.9腳本注入
9.4本章小結(jié)
第10章擴(kuò)展與瀏覽器API(25min)
10.1快速預(yù)覽
10.1.1基本概念
10.1.2深入理解WebExtensions API
10.1.3瀏覽器擴(kuò)展的關(guān)鍵因素
10.2關(guān)鍵功能
10.2.1網(wǎng)絡(luò)請(qǐng)求
10.2.2隱私
10.2.3idle
10.2.4DevTools
10.2.5擴(kuò)展管理
10.2.6系統(tǒng)狀態(tài)
10.3本章小結(jié)
第11章網(wǎng)絡(luò)(13min)
11.1網(wǎng)頁(yè)與瀏覽器插件的比較
11.1.1源
11.1.2API
11.1.3Remote assets
11.1.4頁(yè)面類(lèi)型
11.1.5服務(wù)器端請(qǐng)求
11.1.6認(rèn)證
11.1.7長(zhǎng)請(qǐng)求
11.2瀏覽器插件的網(wǎng)絡(luò)架構(gòu)
11.2.1選項(xiàng)頁(yè)
11.2.2彈出和開(kāi)發(fā)者工具頁(yè)
11.2.3內(nèi)容腳本
11.2.4服務(wù)工作線程
11.3瀏覽器插件網(wǎng)絡(luò)API
11.3.1WebNavigation API
11.3.2WebRequest API
11.3.3DeclarativeNetRequest API
11.4本章小結(jié)
第12章項(xiàng)目實(shí)戰(zhàn)
12.1基礎(chǔ)知識(shí)
12.1.1Node.js
12.1.2TypeScript
12.1.3CSS預(yù)處理語(yǔ)言
12.1.4靜態(tài)規(guī)則集
12.1.5動(dòng)態(tài)規(guī)則集
12.2框架與工具
12.2.1JavaScript框架
12.2.2Vue 3
12.2.3Vite 5
12.3快速上手
12.4本章小結(jié)