本書是一本全面深入的瀏覽器插件開發(fā)教程,旨在幫助讀者理解并掌握創(chuàng)建功能強(qiáng)大的瀏覽器插件的技術(shù)和方法。本書不僅詳細(xì)介紹了插件開發(fā)的理論知識(shí),同時(shí)還提供了豐富的實(shí)戰(zhàn)代碼,使讀者能夠通過實(shí)際操作來鞏固和提升技能。
全書共12章。第1~3章為背景與理論介紹,包括瀏覽器發(fā)展背景介紹、Chrome瀏覽器插件基礎(chǔ)以Manifest新特性的介紹,如service-worker、declarativeNetRequest API、promise等。第4~11章則是每個(gè)知識(shí)點(diǎn)的分章節(jié)介紹,包括插件的基本架構(gòu)、彈出界面與配置界面詳解、內(nèi)容組件詳解、background腳本詳解、權(quán)限詳解、瀏覽器擴(kuò)展API詳解、網(wǎng)絡(luò)通信等內(nèi)容,每章都配有對(duì)應(yīng)的實(shí)戰(zhàn)代碼,使理論知識(shí)得到實(shí)際應(yīng)用。最后的第12章是項(xiàng)目實(shí)戰(zhàn),通過完整的項(xiàng)目案例,幫助讀者快速上手,將前面學(xué)習(xí)的知識(shí)融會(huì)貫通。
本書的特色在于它理論與實(shí)戰(zhàn)并重的教學(xué)方式。每章的理論介紹都配備了對(duì)應(yīng)的實(shí)戰(zhàn)代碼,使讀者可以在理解原理的同時(shí),通過編寫和測(cè)試代碼來提升技能。這種強(qiáng)調(diào)實(shí)踐的方法,使本書成為那些希望快速上手瀏覽器插件開發(fā)的讀者的理想選擇。無論你是初學(xué)者,還是有一定基礎(chǔ)想要進(jìn)一步提升的開發(fā)者都能從本書中獲益。
創(chuàng)新技術(shù):利用最新的Manifest V3,打造更快、更安全的瀏覽器插件。
全方位教程:從基礎(chǔ)到高級(jí),詳盡的教程助你成為瀏覽器插件開發(fā)專家。
實(shí)戰(zhàn)應(yīng)用:結(jié)合現(xiàn)代開發(fā)工具,快速上手并實(shí)現(xiàn)你的插件創(chuàng)意。
在這個(gè)信息爆炸的時(shí)代,瀏覽器已經(jīng)成為人們獲取知識(shí)、溝通交流、工作與娛樂的重要門戶。瀏覽器插件作為這個(gè)門戶的自定義工具,通過增加新的功能或特性,極大地豐富了我們的網(wǎng)絡(luò)體驗(yàn)。從早期的網(wǎng)景瀏覽器到今天的Chrome,瀏覽器的演進(jìn)歷程就是互聯(lián)網(wǎng)發(fā)展的縮影。
一開始瀏覽器僅是一個(gè)簡單的信息查閱工具,而如今隨著AI技術(shù)的進(jìn)步,尤其是ChatGPT等大型語言模型的出現(xiàn),我們已經(jīng)進(jìn)入了全新的智能時(shí)代,在這個(gè)時(shí)代,瀏覽器插件不再只是簡單的工具,它們被賦予了更復(fù)雜、更智能的功能,如Monica、ChatGPT for Google等擴(kuò)展,它們正在改變我們與網(wǎng)絡(luò)內(nèi)容的互動(dòng)方式。例如,Shulex Copilot這樣的瀏覽器插件結(jié)合了AI技術(shù),為電商提供了前所未有的數(shù)據(jù)分析能力,而Evernote Web Clipper則讓信息的收集和整理變得十分簡單。這些插件不僅增強(qiáng)了功能,更提高了效率,改善了用戶體驗(yàn)。瀏覽器插件已經(jīng)轉(zhuǎn)變?yōu)橐粋(gè)強(qiáng)大的平臺(tái),能夠通過各種插件和擴(kuò)展,實(shí)現(xiàn)高度定制化的用戶體驗(yàn)。
在本書的編寫過程中,筆者面臨著資料混雜的挑戰(zhàn)自2009年谷歌公司推出瀏覽器插件平臺(tái)至今市面上沒有系統(tǒng)地介紹如何開發(fā)插件的書籍,現(xiàn)有的資料零散、繁雜且都缺乏更新。正是在這種背景下,筆者邊實(shí)踐邊寫作,將個(gè)人的探索和總結(jié)凝結(jié)成書,可以說,書中的每一頁都蘊(yùn)含著筆者的汗水和智慧。筆者不僅提供了理論基礎(chǔ),更通過親身實(shí)踐的案例,展示了如何將抽象的概念轉(zhuǎn)換為實(shí)際可行的解決方案。
本書將從實(shí)戰(zhàn)出發(fā)分三部分詳細(xì)介紹瀏覽器插件開發(fā)。首先,第1~3章側(cè)重于理論基礎(chǔ),為后續(xù)的實(shí)戰(zhàn)做好充分的鋪墊。這部分會(huì)詳細(xì)介紹瀏覽器插件的基本原理,包括插件的工作機(jī)制、開發(fā)環(huán)境的搭建及一些核心的編程概念。雖然這部分內(nèi)容可能相對(duì)抽象,但是它們是理解后續(xù)實(shí)戰(zhàn)內(nèi)容的必要基礎(chǔ)。接下來,第4~11章以模塊化的方式,結(jié)合具體的實(shí)戰(zhàn)案例,詳細(xì)講解了瀏覽器插件開發(fā)的各個(gè)環(huán)節(jié)。每章都圍繞一個(gè)主題,如界面設(shè)計(jì)、權(quán)限介紹、網(wǎng)絡(luò)請(qǐng)求等,通過實(shí)際的代碼和詳細(xì)的解析,幫助讀者掌握瀏覽器插件的開發(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ò)展支持到如今的商店里擁有超過十萬個(gè)擴(kuò)展,Chrome的成功不僅體現(xiàn)在市場(chǎng)份額上,更重要的是,它為開發(fā)者和用戶提供了一個(gè)充滿可能性的平臺(tái)。
本書將一步步引導(dǎo)你走進(jìn)瀏覽器插件開發(fā)的世界。無論你是一名有抱負(fù)的開發(fā)者,還是一名對(duì)瀏覽器插件充滿好奇的用戶,本書都將為你提供必要的理論知識(shí)和實(shí)戰(zhàn)技巧,幫助你在這個(gè)令人興奮的領(lǐng)域中找到自己的位置。讓我們一起開始這段探索之旅吧。
閱讀建議
要想深入掌握瀏覽器擴(kuò)展開發(fā),光靠理論學(xué)習(xí)是遠(yuǎn)遠(yuǎn)不夠的。在本書中,筆者不僅分享了豐富的理論知識(shí),更重要的是,還把自己在工作中的實(shí)踐經(jīng)驗(yàn)融入了寫作之中。本書不僅是一個(gè)知識(shí)庫,也是一個(gè)實(shí)際操作的手冊(cè),筆者通過親身實(shí)踐,為讀者提供了一系列切實(shí)可行的案例和解決方案。
本書的價(jià)值在于實(shí)踐。希望讀者不僅要閱讀和理解,更要?jiǎng)邮謬L試和實(shí)驗(yàn)。通過實(shí)際編碼和調(diào)試,你將能夠更深入地理解瀏覽器擴(kuò)展的開發(fā)過程。此外,書中的知識(shí)點(diǎn)和經(jīng)驗(yàn)教訓(xùn)都是筆者在現(xiàn)實(shí)工作中一點(diǎn)一滴積累起來的,因此,每次實(shí)踐都是在與筆者的工作經(jīng)歷對(duì)話,讓你在學(xué)習(xí)的道路上少走彎路。
與此同時(shí),不斷回顧和復(fù)習(xí)所學(xué)知識(shí),與他人討論和分享你的發(fā)現(xiàn)和挑戰(zhàn)都能夠幫助你更深刻地理解書中的內(nèi)容。最終,通過不斷實(shí)踐和探索,你將能夠熟練地運(yùn)用瀏覽器擴(kuò)展開發(fā)的技能,甚至創(chuàng)造出屬于自己的獨(dú)特插件。本書是你旅程的起點(diǎn),實(shí)踐則是你通往成為專家道路上的加速器。
資源下載提示
素材(源碼)等資源: 掃描目錄上方的二維碼下載。
視頻等資源: 掃描封底的文泉云盤防盜碼,再掃描書中相應(yīng)章節(jié)的二維碼,可以在線學(xué)習(xí)。
致謝
感謝我的妻子和岳母對(duì)我的大力支持并承擔(dān)了所有的家務(wù),使我得以全身心地投入寫作工作中。
由于時(shí)間倉促,書中難免存在不妥之處,請(qǐng)讀者見諒,并提出寶貴意見。
喬凱
2024年12月
于北京
喬凱,AI技術(shù)專家,十余年科研與互聯(lián)網(wǎng)行業(yè)從業(yè)經(jīng)驗(yàn),致力于AI產(chǎn)品創(chuàng)新,深耕語音、大模型、多模態(tài)領(lǐng)域,9年專業(yè)開發(fā)與設(shè)計(jì)經(jīng)驗(yàn),研究方向包括云原生架構(gòu)、分布式、微服務(wù)等,致力于AI的工程與產(chǎn)品商業(yè)化落地。
第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ò)展的類型
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)簽頁
2.2.3瀏覽器插件模型
2.3插件的工作原理
2.3.1插件的架構(gòu)
2.3.2事件和通信模型
2.3.3同源策略
2.4插件開發(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)程資源訪問限制
3.2.4Promise
3.3本章小結(jié)
第4章快速上手(14min)
4.1創(chuàng)建清單文件
4.2安裝擴(kuò)展
4.3重新加載擴(kuò)展
4.4添加后臺(tái)腳本
4.5添加彈出頁面
4.6添加選項(xiàng)頁面
4.7添加內(nèi)容腳本
4.8添加開發(fā)者工具面板
4.9本章小結(jié)
第5章Manifest詳解(22min)
5.1清單文件
5.2國際化與模式匹配
5.2.1國際化配置
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彈出頁面與配置頁面的區(qū)別
7.2彈出頁面
7.2.1彈出頁面
7.2.2彈出頁面的設(shè)計(jì)原則
7.2.3開發(fā)彈出頁面的常用操作
7.2.4常見的彈出頁面使用建議
7.3配置頁面
7.3.1配置頁面介紹
7.3.2配置頁面的設(shè)計(jì)原則
7.3.3開發(fā)配置頁面的常用操作
7.3.4常見的配置頁面建議
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的訪問
8.1.5腳本注入
8.1.6與共享頁面通信
8.2模塊化
8.2.1動(dòng)態(tài)導(dǎo)入
8.2.2打包
8.2.3模塊加載庫
8.2.4轉(zhuǎn)譯
8.3特殊的屬性
8.4與網(wǎng)頁交互的范式
8.4.1文章閱讀時(shí)間生成器
8.4.2沉浸式閱讀模式
8.4.3對(duì)話助手界面生成
8.5本章小結(jié)
第9章Background腳本(18min)
9.1Service Worker
9.1.1Service Worker簡介
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)頁與瀏覽器插件的比較
11.1.1源
11.1.2API
11.1.3Remote assets
11.1.4頁面類型
11.1.5服務(wù)器端請(qǐng)求
11.1.6認(rèn)證
11.1.7長請(qǐng)求
11.2瀏覽器插件的網(wǎng)絡(luò)架構(gòu)
11.2.1選項(xiàng)頁
11.2.2彈出和開發(fā)者工具頁
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ù)處理語言
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é)