引言
????????本系列博客旨在帶來最新的Chrome擴(kuò)展程序開發(fā)入門教程。
1、什么是擴(kuò)展程序？
????????通過向Chrome瀏覽器添加自定義特性和功能來提升網(wǎng)上沖浪體驗(yàn)，比如：
- 生產(chǎn)力工具
- 豐富網(wǎng)頁(yè)網(wǎng)頁(yè)內(nèi)容
- 信息聚合
2、Web技術(shù)
????????擴(kuò)展程序本質(zhì)上也是一個(gè)Web應(yīng)用，開發(fā)擴(kuò)展程序需要使用和Web應(yīng)用一樣技術(shù)棧：
- Javascript
- HTML
- CSS
3、Chrome 擴(kuò)展程序API
????????擴(kuò)展程序可以使用瀏覽器提供的所有JavaScript APIs。擴(kuò)展程序之所以能夠比普通Web應(yīng)用程序更強(qiáng)大，是因?yàn)樗鼈冞€可以使用Chrome提供的更強(qiáng)大的API。例如：
- 改變指定網(wǎng)站的功能或行為
- 允許用戶收集和組織各網(wǎng)站的信息
- 為 Chrome DevTools 添加自定義功能
4、擴(kuò)展程序架構(gòu)
????????一個(gè)完整的擴(kuò)展程序的架構(gòu)如圖所示：
-
manifest.json
所有的擴(kuò)展程序必須在根目錄中包含且只包含一個(gè) manifest.json 文件。這個(gè)文件我們通常稱為清單文件，里面記錄了關(guān)于這個(gè)擴(kuò)展程序的所有元數(shù)據(jù)：使用的文件，需要的權(quán)限，誰(shuí)來處理事件，誰(shuí)來處理網(wǎng)頁(yè)等。 -
service worker
service worker（service-worker.js）是一個(gè)基于事件的腳本，在后臺(tái)運(yùn)行，通常用來協(xié)調(diào)擴(kuò)展程序中不同部分的任務(wù)和監(jiān)聽瀏覽器事件，如：擴(kuò)展程序被安裝、打開頁(yè)面、關(guān)閉頁(yè)面，創(chuàng)建新標(biāo)簽、添加新書簽、點(diǎn)擊擴(kuò)展工具欄圖標(biāo)等。service worker 可以使用所有的Chrome API，但 service worker 不能直接與網(wǎng)頁(yè)的內(nèi)容直接進(jìn)行交互，需要與 content scripts 進(jìn)行通信來間接修改網(wǎng)頁(yè)的內(nèi)容。 -
content scripts
content scripts（content-script.js）會(huì)自動(dòng)向網(wǎng)頁(yè)注入 JavaScript 代碼，負(fù)責(zé)處理網(wǎng)頁(yè)內(nèi)容，可以讀取和修改它們所注入的網(wǎng)頁(yè)的 DOM。由于安全等原因 content scripts 的運(yùn)行環(huán)境和網(wǎng)頁(yè)內(nèi)容本身是隔離的，也就是說網(wǎng)頁(yè)本身所創(chuàng)建對(duì)象和函數(shù)，在 content scripts 中是無法訪問的，反之亦然。而且 content scripts 只能使用部分 Chrome API，但可以通過與 service worker 進(jìn)行通信來間接使用其它 Chrome API。文章來源：http://www.zghlxwxcb.cn/news/detail-421545.html -
可視化界面
擴(kuò)展程序可以通過包括各種 HTML 文件來構(gòu)建可視化界面，與用戶進(jìn)行交互，但這些 HTML 文件不能有內(nèi)嵌 JavaScript 代碼，想要使用 JavaScript 就必須指向 js 文件。所有這些頁(yè)面都可以訪問 Chrome API。最常見的兩種 HTML 界面包括：文章來源地址http://www.zghlxwxcb.cn/news/detail-421545.html- popup
大多數(shù)擴(kuò)展程序都使用 popup（popup.html）來提供交互功能，如顯示標(biāo)簽列表，或有關(guān)當(dāng)前頁(yè)面的額外信息。用戶可以通過點(diǎn)擊擴(kuò)展工具的圖標(biāo)打開它，當(dāng)用戶點(diǎn)擊其它地方時(shí)，popup就會(huì)自動(dòng)關(guān)閉。 - options
部分?jǐn)U展程序還使用 options（options.html）來提供更多，更詳細(xì)的交互功能，例如配置擴(kuò)展程序可以在哪些網(wǎng)站上運(yùn)行。
- popup
到了這里，關(guān)于#Chrome擴(kuò)展程序開發(fā)教程--01：基本概念介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
