22min
第5章
CHAPTER 5
Manifest详解
第5章〓Manifest详解
Manifest(清单)文件是浏览器扩展的蓝图。广义上讲，它是一个配置文件，包含一系列键值对，规定了扩展可以做什么及Manifest以何种方式做。
清单的内容因清单版本和浏览器而异，并非所有浏览器都能使用所有属性； 有些浏览器会部分支持某个属性，甚至完全不支持。从Manifest V2到Manifest V3会添加新的属性，删除其他属性，有些属性的定义方式也会发生变化。
5.1清单文件
清单文件是浏览器扩展的重要组成部分。它以JSON格式(键值对的集合)定义了扩展的各种属性，包括名称、版本号、权限、页面、脚本等。这个清单告诉浏览器如何加载和管理扩展。以下展示Manifest的结构和常见用法。
(1) 最小化配置，代码如下：
//第5章，5.1
{
"manifest_version": 3,
"name": "Minimal Manifest",
"version": "1.0.0",
"description": "A basic example extension with only required keys",
"icons": {
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
}
(2) 注册内容脚本，代码如下：
//第5章，5.1
{
"manifest_version": 3,
"name": "Run script automatically",
"description": "Runs a script on www.example.com automatically when user installs the extension",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"content_scripts": ［
{
"js": ［
"content-script.js"
］,
"matches": ［
"http://*.example.com//"
］
}
］
}
(3) 注入内容脚本，代码如下：
//第5章，5.1
{
"manifest_version": 3,
"name": "Click to run",
"description": "Runs a script when the user clicks the action toolbar icon.",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"background": {
"service_worker": "service-worker.js"
},
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
"permissions": ［"scripting", "activeTab"］
}
(4) 配置弹出脚本，代码如下：
//第5章，5.1
{
"manifest_version": 3,
"name": "Popup extension that requests permissions",
"description": "Extension that includes a popup and requests host permissions and storage
permissions .",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"action": {
"default_popup": "popup.html"
},
"host_permissions": ［
"https://*.example.com/"
］,
"permissions": ［
"storage"
］
}
(5) 配置侧边栏，代码如下：
//第5章，5.1
{
"manifest_version": 3,
"name": "Side panel extension",
"version": "1.0",
"description": "Extension with a default side panel.",
"icons": {
"16": "images/icon-16.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": ［"sidePanel"］
}
5.2国际化与模式匹配
5.2.1国际化配置
浏览器扩展的国际化配置是一种使扩展支持多种语言和地区的方法。它允许开发者根据用户的首选语言，动态地显示不同语言版本的扩展界面文本、按钮标签、提示信息等内容，提高了扩展的可用性和用户体验。
国际化配置通常使用JSON文件来管理不同语言的文本资源。在扩展开发中，需要创建一个消息目录，其中包含多个语言版本的JSON文件。每个文件都包含一个键值对，其中键是标识符，值是对应语言下的文本内容。
以简单的浏览器扩展为例，展示如何配置国际化支持。这个扩展是一个简单的页面计数器，当用户单击按钮时，页面上的计数数字会增加。
1. 创建消息目录
首先，在扩展的根目录下创建一个名为 _locales 的文件夹，里面包含不同语言的文件夹。例如，创建英语(en)和法语(fr)版本：
_locales
├── en
│└── messages.json
└── fr
└── messages.json
2. messages.json文件内容
messages.json文件是用来存储不同语言的键值对的。例如，在英语版本的messages.json文件中的代码如下：
//第5章，5.2.1
//en/messages.json
{
"pageTitle": {
"message": "Page Counter"
},
"countLabel": {
"message": "Count: "
},
"incrementButton": {
"message": "Increment"
}
}
而在法语版本的messages.json文件中的代码如下：
//第5章，5.2.1
//fr/messages.json
{
"pageTitle": {
"message": "Compteur de Pages"
},
"countLabel": {
"message": "Compte : "
},
"incrementButton": {
"message": "Incrémenter"
}
}
3. 引用国际化文本
在扩展的HTML文件中，使用国际化消息的标识符来引用文本内容。例如，HTML文件中的一段示例代码如下：
//第5章，5.2.1
Page Counter
Page Counter
Count: 0
和