5分钟学会开发浏览器扩展
寫(xiě)在前面
做web開(kāi)發(fā)的同學(xué)，經(jīng)常會(huì)用到各種chrome瀏覽器插件，那么我們寄幾怎么開(kāi)發(fā)一個(gè)插件呢（其實(shí)是瀏覽器擴(kuò)展）？其實(shí)很簡(jiǎn)單，你意想不到的簡(jiǎn)單。只要有web開(kāi)發(fā)基礎(chǔ)，會(huì)寫(xiě)基本的html，css和js就可以做。
那面就跟著我一起開(kāi)始吧！
1.創(chuàng)建項(xiàng)目
首先新建一個(gè)文件夾，比如叫 plugin-demo
mkdir plugin-demo cd plugin-demo/2.manifest.json
chrome瀏覽器對(duì)插件基本要求就一個(gè)，就是要有一個(gè)manifest.json的文件。這個(gè)文件內(nèi)容如下：
{"name": "plugin-demo","version": "0.9.0","manifest_version": 2,"description": "chrome plugin demo","browser_action": {"default_icon": "icon.png","default_title": "5分鐘學(xué)會(huì)開(kāi)發(fā)瀏覽器插件","default_popup": "popup.html"} }這只是一個(gè)最基本的配置，詳細(xì)的配置參看這里.
3.創(chuàng)建界面
我們注意到，在manifest.json的配置中，有一個(gè)default_popup的選項(xiàng)，它的值是 popup.html,所以我們需要新建這么一個(gè)頁(yè)面。
在當(dāng)前項(xiàng)目下新建popup.html
內(nèi)容我們盡可能的簡(jiǎn)單了，如下：
頁(yè)面中，基本就是一個(gè)div以及內(nèi)容展示，很簡(jiǎn)單，你自己寫(xiě)也可以。
然后我們的插件還需要一個(gè)圖標(biāo)，圖標(biāo)你可以自己制作，也可以去找一張圖。比如這里.
我下載了一個(gè)蘋(píng)果的圖片作為我的這個(gè)插件的圖標(biāo)。放在項(xiàng)目根目錄。把圖標(biāo)名字命名為icon.png(或者修改配置也可以)。
下面就是最激動(dòng)人心的時(shí)刻了！
4、安裝插件
現(xiàn)在我們就可以讓chrome瀏覽器來(lái)安裝我們的插件了。
點(diǎn)擊瀏覽器最右側(cè)的三個(gè)點(diǎn)圖標(biāo)，選擇 更多工具->k擴(kuò)展程序，或者直接在地址欄輸入 chrome://extensions/，打開(kāi)擴(kuò)展程序安裝界面。
擴(kuò)展界面：
打開(kāi)開(kāi)發(fā)者模式，然后選擇 “加載已解壓的擴(kuò)展程序”
找到我們剛才新建的項(xiàng)目，打開(kāi)就可以了。
如圖，我們的插件已經(jīng)安裝好了
5、查看效果
點(diǎn)擊蘋(píng)果?圖標(biāo)就能看到我們剛剛寫(xiě)的插件頁(yè)面啦。
啦啦啦 ~啦 ~啦，啦啦啦 ~啦 ~啦，哈哈哈哈哈。。。。。。。。
什么？圖片是哪來(lái)的？
是我后來(lái)偷偷加的，就問(wèn)你騷不騷？?
6、打包插件
插件一般都會(huì)打包成crx格式文件，方便安裝。下面我們就把剛才我們開(kāi)發(fā)的這個(gè)插件打包一下。
還是擴(kuò)展安裝界面，中間有個(gè) 打包擴(kuò)展的按鈕不知道你看到?jīng)]有
點(diǎn)擊這個(gè)按鈕，
點(diǎn)擊第一個(gè)瀏覽，打開(kāi)剛才我們的插件項(xiàng)目，
點(diǎn)擊打包擴(kuò)展程序按鈕，
非常快，就打包好了。點(diǎn)擊確定關(guān)閉。找到我們的擴(kuò)展程序
7、使用crx格式文件安裝
找到我們剛才安裝好的插件
點(diǎn)擊刪除，卸載我們直接通過(guò)源碼安裝的插件。
然后把剛才打包好的crx文件直接拖入擴(kuò)展安裝頁(yè)面，是的，就是直接拖過(guò)來(lái)，就這這么暴力。
然后我們就可以看到插件安裝好了。
寫(xiě)在后面
好了，如何去開(kāi)發(fā)一個(gè)chrome插件已經(jīng)介紹完了。下面就是你根據(jù)自己的需要，去寫(xiě)一個(gè)屬于自己的chrome插件了。
代碼我就不給了，上面已經(jīng)寫(xiě)了。主要就是一個(gè)manifest.json文件。
更高級(jí)的功能實(shí)現(xiàn)，比如消息通信，開(kāi)發(fā)者工具等等，參考這篇文章：
https://www.cnblogs.com/liuxi...
其他參考：https://www.w3cschool.cn/kesy...
掃描下方二維碼，關(guān)注微信公眾號(hào)：H5開(kāi)講啦，獲取更多學(xué)習(xí)資料。
總結(jié)
以上是生活随笔為你收集整理的5分钟学会开发浏览器扩展的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： windows环境下安装scrapy框架
- 下一篇： python 入门第六课 class面向