chrome作為前端開發的標準瀏覽器,擁有強大的功能,其中chrome插件就其中非常有用的工具!作為一名前端,開發一款好用的chrome插件也是一件非常有成就感的事!下面我就簡單敘述一下如何開發!
1、一個簡單的二維碼插件目錄,核心文件manifest.json,以下簡稱清單文件,這個文件是必須有的,其余的html、js、css、img等就根據需要來創建就可以了。
2、manifest.json介紹
必須配置的字段、以及常用的配置字段
defalut_popup必須指定html文件,另外html內不允許內聯js(inlinejavascript),插件的開發和普通web開發是一樣的,都是用html、js、css。除此之外擴展還提供很多強大的api,幫助我們豐富瀏覽器的擴展功能。
3、常用API- chrome.tabs
- chrome.runtime可以監聽和響應擴展生命周期的事件
- chrome.webRequest
- chrome.window
- chrome.storage
- chrome.contextMenus
- chrome.devtools
- chrome.extension
使用大多數的api要聲明權限的,因為js中使用chromeAPI,所以示例中在permissions這個字段設置了tabs。
當然,清單的配置遠不止這些,隨著功能的強大,會看到更多的字段。
https://developer.chrome.com/extensions/manifest
4、代碼編寫完成后,打開擴展的界面,chrome://extensions.,勾選開發者模式,點擊‘已解壓的擴展程序’,選擇開發好的文件夾,這樣就成功添加上了擴展。
5、調試
示例中,擴展功能界面是以彈窗形式展示,點擊圖標,右鍵審查元素即可。
6、打包與發布- 登錄chrome應用商店
- https://chrome.google.com/webstore/developer/dashboard/點擊進去開發者信息中心
- 添加壓縮后的zip包
- 按提示添加必填的信息,發布即可