Chrome扩展的核心：manifest 文件（下）
大家好，我是 dom 哥。這是我關(guān)于 Chrome 擴(kuò)展開發(fā)的系列文章，感興趣的可以 點個小星星。
在上篇和中篇中已經(jīng)完成了對 manifest 文件中以下字段的解釋：
"manifest_version""name""version""description""icons""content_scripts""background""permissions"
本篇接著說剩下的 manifest 可選字段。
UI 配置
"action"
定義 Chrome 右上角工具欄上擴(kuò)展 icon 按鈕的 UI 和行為。
"action": {
"default_popup": "popup/index.html", // optional
"default_title": "Click Me", // optional, shown in tooltip
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
}
},
-
default_popup：當(dāng)用戶點擊右上角擴(kuò)展按鈕時展示的彈窗。是一個普通的 html 文件。彈窗的大小被限制在 25x25 至 800x600 之間。
在 crx-demo 根目錄下新建一個 html 文件 popup/index.html<!DOCTYPE html> <html> <head> </head> <body style="min-width: 300px;min-height: 400px;"> <img src="../icon128.png" /> <h1>crx-demo1</h1> </body> </html>更新 manifest.json 文件
+ "action": { + "default_popup": "popup/index.html" + }在 chrome://extensions 更新以下擴(kuò)展，就能看到效果啦
-
default_title：鼠標(biāo)懸浮在擴(kuò)展按鈕上展現(xiàn)的 tooltip。 -
default_icon：設(shè)置擴(kuò)展按鈕的圖標(biāo)，如果不設(shè)置的話，默認(rèn)是用"icons"里面設(shè)置的圖標(biāo)。這是我設(shè)置了
default_title和default_icon之后的效果：
"devtools_page"
在 Chrome DevTools 開發(fā)者工具中增加一個新的面板。像 Vue.js devtools 和 React Developer Tools 這兩個擴(kuò)展都是 devtools_page。
"devtools_page": "devtools/index.html"
在每次開發(fā)者工具打開時 devtools_page 配置的 html 都將以 iframe 的形式加載。但注意，devtools_page 配置的 html 并不會展現(xiàn)在 DevTools 的 UI 界面。它的主要作用是用于加載所需要的 JavaScript 文件。
設(shè)置 devtools/index.html 的內(nèi)容如下：
<script src="./index.js"></script>
沒錯！什么也不需要，只需要一個 script 標(biāo)簽！
從下圖可以看出，裝載 devtools_page 的 iframe 被設(shè)置了 display: none
需要在 devtools/index.js 里調(diào)用 chrome.devtools.* API 來創(chuàng)建 DevTools 面板：
chrome.devtools.panels.create("My Devtools Panel", "", "devtools/panel.html")
沒錯！就這一行！此時 crx-demo/devtools 目錄的結(jié)構(gòu)如下：
devtools
├── index.html
├── index.js
└── panel.html
有必要說說 chrome.devtools.panels.create 的參數(shù)，
chrome.devtools.panels.create(title, iconPath, pagePath)
-
title： DevTools 工具欄上展示的名字，類似 Elements，Console，Network，Application 這些。 -
iconPath：title 左邊配置一個小 icon，但但但！實際上 Chrome 會忽略這個參數(shù)！ 也就是根本設(shè)置不了小 icon，這個參數(shù)是廢的，寫死空字符串忽略就行啦。 -
pagePath：這個才是真正的 DevTools 面板要顯示的 HTML 頁面，值得注意的是，這個路徑是相對于擴(kuò)展根目錄的。它將以 iframe 的形式加載，如下圖所示：
"side_panel"
在 Chrome 側(cè)邊欄配置一個新的頁面。側(cè)邊欄是瀏覽器級別的，常駐右側(cè)。
值得注意的是，要求在 "permissions" 聲明 sidePanel 權(quán)限：
"permissions": [
"sidePanel"
]
"side_panel": {
"default_path": "side_panel/index.html"
}
side_panel 頁面里可以使用所有 chrome.* API，盡情馳騁吧～
"options_page"
配置一個擴(kuò)展選項頁，供用戶自定義擴(kuò)展的功能選項。
"options_page": "options_page/index.html"
配置完之后會多出來兩個入口，一個是右上角 action 按鈕右鍵里的選項：
另一個是擴(kuò)展詳情頁里的擴(kuò)展程序選項：
點擊之后實際上就是新開一個瀏覽器頁面打開擴(kuò)展里的靜態(tài)頁面：
"chrome_url_overrides"
重寫一些默認(rèn)的 Chrome 頁面。
"chrome_url_overrides" : {
"PAGE_TO_OVERRIDE": "myPage.html"
}
PAGE_TO_OVERRIDE 的取值須為下列之一，也是目前支持重寫的頁面：
-
newtab：新標(biāo)簽頁。即 chrome://newtab -
history：瀏覽歷史記錄頁面。即 chrome://history -
bookmarks：書簽管理頁面。即 chrome://bookmarks
值得注意的是，一個擴(kuò)展只允許重寫一個頁面，不能重寫多個頁面！
其他可選項
"declarative_net_request"
攔截和修改網(wǎng)絡(luò)請求。 不同于 manifest V2 編程式的操作處理，V3 規(guī)定必須使用聲明式的靜態(tài)規(guī)則進(jìn)行配置。
"commands"
定義全局快捷鍵。需要在 background service-worker 中監(jiān)聽并自定義處理邏輯。
chrome.commands.onCommand.addListener((command) => {
console.log(`Command: ${command}`)
})
"web_accessible_resources"
聲明擴(kuò)展里可以被外部 Web 頁面或其他擴(kuò)展訪問的資源。默認(rèn)情況下擴(kuò)展里的所有資源，包括 img，html，js，css 都不允許被外部訪問，這是為了安全而刻意設(shè)計的。
"homepage_url"
指定關(guān)于該擴(kuò)展的主頁。默認(rèn)是指向 Chrome 應(yīng)用商店，當(dāng)你的擴(kuò)展沒放到 Chrome 應(yīng)用商店，而是放在自己的網(wǎng)站上時可以用這個字段指明。
入口在擴(kuò)展的詳情頁，如下圖所示：
"author"
指明擴(kuò)展的作者。
"author": {
"email": "user@example.com"
}
值得注意的是，當(dāng)往 Chrome 應(yīng)用商店發(fā)布時，manifest.json 里指定的 author.email 地址必須和發(fā)布賬戶的一樣！
總結(jié)
本篇介紹了 manifest.json 里剩余的一些可配置項：
"action""devtools_page""side_panel""options_page""chrome_url_overrides""declarative_net_request""commands""web_accessible_resources""homepage_url""author"
至此，Chrome 擴(kuò)展 manifest 里常用的配置項全部介紹整理完畢。
文中涉及的 crx-demo 項目代碼已放在 GitHub。
覺得不錯可以 點個小星星 支持一下 ??
總結(jié)
以上是生活随笔為你收集整理的Chrome扩展的核心：manifest 文件（下）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php pdo属性设置问题
- 下一篇： java信息管理系统总结_java实现科