日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問(wèn) 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) > 前端技术 > HTML >内容正文

HTML

5分钟学会开发浏览器扩展

發(fā)布時(shí)間：2025/4/5 HTML 38 豆豆
生活随笔 收集整理的這篇文章主要介紹了 5分钟学会开发浏览器扩展 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

寫(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)單了，如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 400px;height: 400px;background: #fff;text-align: center;padding: 20px;}</style> </head> <body><div class="container"><h1>這是一個(gè)chrome 插件案例</h1><p>created by Davie</p></div> </body> </html>

頁(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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。