目錄
前言
chrome擴(kuò)展程序
文件結(jié)構(gòu)
manifest.json
html和css
js
加載插件
調(diào)試
總結(jié)
前言
當(dāng)前，chrome瀏覽器早已成為占據(jù)最大的市場(chǎng)份額，也是綜合體驗(yàn)最好的瀏覽器，開發(fā)人員使用的瀏覽器基本都以它為主。
我在使用chrome的過程中，積累增加了很多書簽，最多的時(shí)候接近上千個(gè)，后續(xù)慢慢清退了一些。有一次在查看清理這些書簽時(shí)，發(fā)現(xiàn)有些不太直觀，于是就想著自己開發(fā)一個(gè)簡(jiǎn)單的chrome插件，用于時(shí)時(shí)統(tǒng)計(jì)這些書簽。
這款插件也比較簡(jiǎn)單，功能有以下幾個(gè)：統(tǒng)計(jì)總書簽數(shù)、統(tǒng)計(jì)每個(gè)文件夾里的書簽數(shù)量、統(tǒng)計(jì)常用技術(shù)站點(diǎn)的書簽數(shù)量、最新增加的書簽、最早增加的書簽等。
具體的展示圖如下：
通過這個(gè)擴(kuò)展插件，我隨時(shí)了解自己增加的書簽，并進(jìn)行學(xué)習(xí)后再清退一波。
所以，本文將通過這個(gè)簡(jiǎn)單的插件，介紹下如何開發(fā)一款chrome插件。
chrome擴(kuò)展程序
chrome插件又稱擴(kuò)展程序，主要基于前端技術(shù)開發(fā)，用于擴(kuò)展瀏覽器功能的一類軟件程序，可以加載在chrome瀏覽器上運(yùn)行。
在瀏覽器里也能打開擴(kuò)展程序管理界面，查看到當(dāng)前瀏覽器里安裝的所有擴(kuò)展程序。
擴(kuò)展程序除了支持基本的前端WebAPI和JS-API以外，還擁有一些其他能力，如瀏覽器窗口、tab標(biāo)簽頁、右鍵菜單、開發(fā)者工具、歷史記錄、下載請(qǐng)求、書簽等等操作處理。這些對(duì)應(yīng)的功能都有自己的chrome對(duì)象來處理，比如書簽就會(huì)使用到? chrome.bookmarks 對(duì)象，它用于專門處理書簽相關(guān)的數(shù)據(jù)和操作。其他的還有諸如 `chromes.tabs` tab標(biāo)簽對(duì)象、`chromes.history` 歷史記錄對(duì)象等等，很多個(gè)為擴(kuò)展程序提供的專用API。
chrome擴(kuò)展程序有兩種：
- 彈出窗口：點(diǎn)擊按鈕后有彈出窗口頁面，可用于交互操作。
- 后臺(tái)程序：常駐在后臺(tái)運(yùn)行的腳本程序，隨瀏覽器的關(guān)閉而關(guān)閉。
用戶界面一般也有兩種：
- 瀏覽器按鈕，Browser Actions，附著于瀏覽器整體的功能。
- 頁面按鈕，Page Actions，附著于單獨(dú)標(biāo)簽頁面的功能，在特定的頁面上才能使用。
本文的示例，書簽插件就是用來整理書簽的一個(gè)瀏覽器按鈕性質(zhì)的彈出窗口，下面將完整介紹這個(gè)擴(kuò)展程序。
文件結(jié)構(gòu)
首先，看一下該書簽插件的文件目錄結(jié)構(gòu)：
通過上圖，可以看到，文件結(jié)構(gòu)比較簡(jiǎn)單：
- manifest.json：插件的資源和功能配置文件
- popup.html：插件窗口頁面入口文件，彈窗頁面
- bookmarks.js：對(duì)應(yīng)功能處理的js代碼
- popup.css：css代碼
- images/icon.png：圖標(biāo)資源，用于配置插件程序和按鈕圖標(biāo)
這幾個(gè)文件是開發(fā)chrome插件所需要的最基本的文件，其他的還可以使用諸如 locale國(guó)際化資源文件、模塊文件等等。
由于我們的書簽插件功能較簡(jiǎn)單，所以使用這幾個(gè)基本文件就可以了。
manifest.json
manifest.json 配置文件，用于提供插件的基本信息，如版本、圖標(biāo)、標(biāo)題、入口文件等等，如下所示，即為書簽插件的基本配置。
{
? "manifest_version": 3,
? "version": "2.0",
? "name": "mybookmarks",
? "description": "a chrome extension for bookmarks",
? "icons": {
? ? "128": "images/icon.png",
? ? "16": "images/icon.png"
? },
? "action": {
? ? "default_title": "書簽概覽",
? ? "default_popup": "popup.html"
? },
? "permissions": [
? ? "bookmarks"
? ],
? "host_permissions": [
? ? "http://*/*",
? ? "https://*/*"
? ]
}這里使用了manifest V3版本，相比較V2版本：
- 增加了 action，取代之前的 browser_action?和 page_action
- content_security_policy?配置有所變化，V3使用對(duì)象類型，取代V2的字符串
- 增加了 host_permissions?專門處理主機(jī)權(quán)限，不再糅雜入 permissions?中
- V3支持原生的 Promise，以及 async/await
- V3不允許訪問遠(yuǎn)程js或wasm文件
- V3增加 declarativeNetRequestAPI?處理網(wǎng)絡(luò)請(qǐng)求
- V3的 Background Scripts?強(qiáng)制使用 Service Workers
從書簽插件的配置可以看到：
- 插件版本、名稱、描述信息。
- 插件的圖標(biāo)，引用自文件中的 images/icon.png，自定義一個(gè)合適的圖片資源，但不支持SVG圖片。
- 插件在瀏覽器上的按鈕標(biāo)題，鼠標(biāo)移動(dòng)到按鈕上面時(shí)會(huì)顯示。
- 插件的彈窗入口頁面文件，popup.html。
- 插件權(quán)限配置，需要處理 bookmarks?瀏覽器書簽。
上圖展示的是書簽插件在瀏覽器上的按鈕位置，通過 manifest.json?文件配置的 icon?圖標(biāo)和 default_title?鼠標(biāo)hover描述。
html和css
插件的html文件，設(shè)置彈窗的頁面結(jié)構(gòu)，和一般的前端html頁面一樣，添加頁面標(biāo)簽元素、引入js和css文件等等。
基本代碼如下：
<!doctype html>
<html lang="zh-CN">
? <head>
? ? <meta charset="utf-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
? ? <title>書簽概覽</title>
? ? <link rel="stylesheet" type="text/css" type href="./popup.css"></link>
? </head>
? <body>
? ? <div id="app">
? ? ? <div id="total"></div>
? ? ? <div id="menus"></div>
? ? ? <div id="sites">站點(diǎn): </div>
? ? ? <!-- ... -->
? ? </div>
? ? <script src="./bookmarks.js"></script>
? </body>
</html>我們的插件html代碼中引入了 popup.css?樣式文件和 bookmarks.js?腳本文件。
css文件也是一樣，與平常我們寫前端樣式?jīng)]有區(qū)別。
需要注意的是，js代碼只能通過引入腳本文件的方式進(jìn)行處理，不能在html中使用script內(nèi)嵌腳本，否則會(huì)報(bào)錯(cuò)。
<script>
? console.log(3333)
</script>如果使用上述方式增加js代碼，則任何代碼都不會(huì)被執(zhí)行，并且會(huì)有非安全代碼錯(cuò)誤提示：
?文章來源地址http://www.zghlxwxcb.cn/news/detail-474412.html
另外，也不得請(qǐng)求網(wǎng)絡(luò)資源類型的js文件。
js
再來看一下js文件中的代碼，本質(zhì)上也與平時(shí)寫的代碼一樣，支持es6語法，比如根據(jù)id讀取頁面上的元素，如下代碼所示：
const app = document.getElementById('app')
const totalEl = document.getElementById('total')我們的插件主要處理書簽，chrome提供了 bookmarks?對(duì)象可以使用：
chrome.bookmarks.getRecent(10000, (results) => {
? totalEl.innerHTML = '總數(shù)：' + results.length
})以上代碼，即通過 bookmarks?對(duì)象的 getRecent?方法，獲取到瀏覽器書簽的總數(shù)量(這里默認(rèn)書簽總數(shù)小于10000，讀取最近1萬個(gè)書簽數(shù)據(jù))。
上面代碼是使用的回調(diào)函數(shù)的方式獲取結(jié)果，我們也可以使用 Promise?的方式調(diào)用：
chrome.bookmarks.getRecent(10000).then((results) => {
? totalEl.innerHTML = '總數(shù)：' + results.length
})通過這種方式就可以獲取到對(duì)應(yīng)的書簽總數(shù)量，其他的對(duì)書簽進(jìn)行不同的分類、統(tǒng)計(jì)最新或最早的書簽信息，都可以通過書簽對(duì)象來處理。
// 獲取整個(gè)書簽欄的樹結(jié)構(gòu)數(shù)據(jù)
chrome.bookmarks.getTree()
// 獲取某個(gè)父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)書簽
chrome.bookmarks.getChildren(str)
// 根據(jù)條件搜索書簽
chrome.bookmarks.search(str)通過對(duì)書簽對(duì)象的操作，可以基本完成我們插件對(duì)書簽的統(tǒng)計(jì)和特殊書簽的展示功能。
加載插件
到此，簡(jiǎn)單的書簽插件就可以使用了，我們需要把插件代碼加載到瀏覽器中，打開瀏覽器的擴(kuò)展程序管理界面。
如上圖所以，點(diǎn)擊 加載已解壓的擴(kuò)展程序?按鈕，直接加載源代碼文件夾，即可完成擴(kuò)展程序的加載導(dǎo)入。
上圖中的 mybookmarks 2.0?就是我們的書簽插件，已經(jīng)順利加載，就可以使用了。
調(diào)試
如果插件可以加載，但部分代碼有錯(cuò)誤，則會(huì)明示錯(cuò)誤，可以點(diǎn)擊查看：
調(diào)試插件代碼，也比較簡(jiǎn)單，在彈窗頁面上右鍵點(diǎn)擊 檢查，就會(huì)打開插件頁面的開發(fā)者工具，和瀏覽器頁面的開發(fā)者工具一樣，可以進(jìn)行代碼調(diào)試工作。
打開的開發(fā)者工具，加載的就是彈窗入口頁面：
總結(jié)
至此，我們的書簽插件就開發(fā)完成，可以加載到瀏覽器中使用了。
功能雖然很簡(jiǎn)單，但也是依據(jù)chrome插件開發(fā)的各種規(guī)范，如果要開發(fā)更復(fù)雜的功能，就需要查看chrome插件開發(fā)規(guī)范中提供的各種API?；蛘呤褂们岸藈eb技術(shù)，擴(kuò)展更多的功能也將是水到渠成的事情。文章來源：http://www.zghlxwxcb.cn/news/detail-474412.html
?
到了這里，關(guān)于如何開發(fā)一個(gè)chrome瀏覽器插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
