Chrome Extension 第一篇 — manifest
简介
Chrome 浏览器给我们提供了很多插件,比如:React Developer tools 、划词翻译、Octotree等,可以让我们在某些页面或者所有页面中能使用一些特定的功能。这是给 Chrome 浏览器增加功能。
Chrome 浏览器扩展使用的技术还是HTML、CSS 和 JavaScript ,所以对前端开发来说是非常友好很容易上手的。扩展程序本质上是网页
概念及基础
每一个扩展程序包含以下文件:
- 一个清单文件
- 一个或多个 HTML 文件(除非扩展程序是一个主题背景)
- *可选:*一个或多个 JavaScript 文件
- *可选:*您的扩展程序需要的任何其他文件,例如图片
清单文件 manifest.json
这是一个Chrome插件最重要也是必不可少的文件,用来配置所有和插件相关的配置,必须放在根目录。其中,manifest_version、name、version 3个是必不可少的,description 和 icons 是推荐的。完整配置
{
// 必填的 3 个
"manifest_version": 2, // 清单文件的版本,这个必须写,而且必须是2,在低于 chrome 17 的版本中使用 1,否则使用 2
"name": "demo", // 插件的名称
"version": "1.0.0", // 插件的版本
// 推荐增加的
"default_locale": "en", // 这个是指定你的扩展的默认显示的语言,涉及国际化内容 i18n
"description": "A plain text description", // 插件的描述
"icons": {
// 最好可以提供三个不同大小的图标,推荐使用 png 格式文件
"16": "icon16.png", // 用于展示在浏览器的右上角那个扩展图标
"48": "icon48.png", // 用于在扩展管理界面展示
"128": "icon128.png" // 在安装过程中和Chrome网上应用店都使用它
},
// 用一个或者都不用
"browser_action": {
// 浏览器右上角图标设置
"default_icon": "images/icon32.png", // 可以是这样的一个字符串,也可以如上面的 icon 一样是个对象,可以是静态图或者是 canvas
"default_title": "Google Mail", // 鼠标移入图标时展示 ,即tooltip
"default_popup": "popup.html" // 当点击 icon 的时候会弹出一个页面,
},
"page_action": {
...}, // 当某些特定页面打开才显示的图标,配置与 browser_action 相同
// 可选配置
"background": {
// 会一直常驻的后台JS或后台页面
"persistent": false, // 定义了常驻后台的方式——当其值为true时,表示扩展将一直在后台运行,无论其是否正在工作;当其值为false时,表示扩展在后台按需运行,这就是Chrome后来提出的Event Page
"scripts":