本文首發於微信公衆號："算法與編程之美"，歡迎關注，及時瞭解更多此係列文章。
1 谷歌插件簡介
谷歌插件及ChormeExtensions是一個小型的程序，它可以修改並增強chrome瀏覽器的功能。可以使用web技術（如HTML，CSS，JavaScript）來編寫。一個擴展就是一個壓縮的包，裏面有HTML、CSS、JavaScript、圖片或者任何你需要的資源。從本質上來講，擴展就是一個web頁面，它也可以使用瀏覽器爲web頁面提供的API。
如XMLHttpRequest、JSON、HTML5等。
2 插件基礎
2.1 創建manifest.json文件
任何谷歌插件都必須擁有的文件，這個文件的作用簡單來說就是這個插件的組成清單，在這個清單上大約能看的這個插件的大體作用
代碼展示：
{ "manifest_version":2 "name": "我的擴展",//擴展名字 "version": "1.0",//擴展版本 "description": "第一次沒啥好說的.",//擴展描述 //瀏覽器小窗口 "browser_action": { "default_icon": "icon.png",//小窗口圖標 "default_popup": "popup.html"//小窗口內容 }, //擴展圖標 "icons":{ "16": "images/get_started16.png", "32": "images/get_started32.png", "48": "images/get_started48.png", "128": "images/get_started128.png" }, } |
下面是manifest.json的配置項
（1）Icons
插件的程序圖標，可以一個或多個16的是插件頁面圖標48是管理界面圖標
128是安裝界面圖標
（2）brower_action和page_action
這兩個功能都是用來處理擴展在瀏覽器工具欄上的表現
區別是前者啥地方都能用後者是特定頁面才能用
（3）default_popup
在用戶點解擴展圖標時可以設置彈出一個popup頁面這個頁面可以說是一個簡單的網頁也可以有自己的js腳本點擊圖標時運行此腳本
（4）Permissions
在background裏使用一些chrmoeapi，需要授權才能使用。
2.2 background
background可以認爲是插件運行是在瀏覽器中的一個後臺腳本，與當前瀏覽頁面無關。
Backgropund包括（page，scripts，persistent）
Page是後臺網站的主頁（不一定要求有）
Scripts就是後臺引入的腳本文件
Persistent就是後臺程序是否持久運行
2.3 content script
這部分腳本，簡單來說是插入到網頁中的腳本。它具有獨立而富有包容性。所謂獨立，指它的工作空間，命名空間，域等是獨立的，不會說跟插入到的頁面的某些函數和變量發生衝突。所謂包容性，指插件把自己的一些腳本（content script）插入到符合條件的頁面裏，作爲頁面的腳本，因此與插入的頁面共享dom的，即用dom操作是針對插入的網頁的，在這些腳本里使用的window對象跟插入頁面的window是一樣的。
主要用在消息傳遞上（使用postMessage和onmessage）
3 成果
圖3.1成果展示
圖3.2成果展示
圖3.3成果展示
4 總結
谷歌插件開發必須要有一定的前端開發基礎，而我的前端基礎才處於起步階段，只初步瞭解一些靜態網頁的製作。所以還不能爲其添加後臺腳本，並且無法實現前端後臺腳本之間的信息交流。總的來說，我能實現的只有插件的安裝與小圖標的設置與工具欄頁面的簡單顯示。
主編：王楠嵐
稿件來源：深度學習與文旅應用實驗室（DLETA）
本文分享自微信公衆號 - 算法與編程之美（algo_coding）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。