chrome扩展开发（2）- manifest.json文件简述

一、本文目标

结合具体应用场景，让读者对manifest.json文件的写法和主要属性拥有初步认识。

二、目标读者

chrome扩展开发的初学者，想要先从宏观上了解一下chrome扩展能干哪些事情，而不是急于写出一个能运行的demo的人。

三、适用环境

操作系统：win10家庭中文版。chrome浏览器：81.0.4044.129（64位）
注意：这并不代表本文涉及的内容只适用于上述环境，而是代表在上述环境中，我已经经过必要的测试，基本可以确保我所说的和实际相符。软件开发领域因为环境、版本的差异导致混乱，是常有的事情。我会一直以严谨的态度提供尽可能靠谱的知识。

四、manifest.json的文件格式

看后缀名就知道，文件格式是json，格式不是开发过程中的一个难点，而是开发者和浏览器之间的一种约定，遵守约定，大家就可以和谐相处。
闲话少叙，直接看一个介绍我自己基本信息的json文件：

{"name": "zhuhuadong","age": 30,"hobbies": ["reading","listening classical musics","playing badminton"],"city": {"cityName": "nanjing","cityFlower": "meihua","cityTree": "xuesong"}
}

说明：熟悉js的人一看就知道，整个json文件的内容就像一个js对象（在js语言里，{ }表示一个对象，[ ]表示一个数组，" "或’ '或两个反引号则表示一个字符串）。对象里的内容是由n个所谓的“键值对”，或者说“key-value”组成的，每个键值对之间用逗号分隔，json的规范就这么简单，了解即可。当然，每个属性值中都可以嵌套类似的格式，这个在具体实践中再去体会，现在突然放出一个比较复杂的json，对于初学者来说不太容易接受。

五、manifest.json中必须要有的属性

1.name
这是最基本的，就像一个人的姓名一样，是不能少的，值是一个字符串。
2.version
你的扩展程序的版本号，这是一个字符串，没有明确的格式要求，一般是“1.0.0”这种格式，由句点分隔的多个数字组成。比如我正在使用的chrome浏览器的版本是：81.0.4044.129
3.manifest_version
这是manifest.json文件遵守的规范的版本，现在似乎只能把这个值设为2（注意：数字2，不是字符串2）。version和manifest_version同样是版本号，一个是字符串，一个是数字，比较容易弄错。

六、manifest.json中常用的关键属性

1.background
示例如下图：

"background": {"scripts": ["jquery.js","background.js"]
}

顾名思义，background是后台的意思，它的核心属性是scripts，即js脚本，另外还有一个page属性，基本用不到，这里就不提了。因此，background属性就是用来定义“让哪些js脚本一直在浏览器后台运行”的。这些js脚本在浏览器中拥有至高无上的权限，可以说是浏览器的超级管理员，可以操纵打开的网页（只能操纵网页的dom，不能干涉网页中原来的js变量，这是出于安全的考虑），管理所有网页的cookies，监控浏览器中出现的各种事件并作出反应。
2.browser_action
示例如下图：

"browser_action": {"default_icon": "popup.png","default_title": "my chrome extension","default_popup": "popup.html"
}

这个属性用来设置扩展程序的“脸”，说实话，browser_action这个英文不能给人以直观的感受，个人觉得，如果叫extension_face更合适（开玩笑）。让我们来瞅瞅这张脸：

这张脸位于浏览器地址栏右侧。脸的样子是由“default_icon”属性来设置的。鼠标停留在这张脸上，会出现提示文字，这个文字是由“default_title”属性来设置的。而当你鼠标左击这张脸，就会弹出一个html页面，我的页面如下图所示（页面设计比较粗糙，主要为了展示功能）：

这是一个完全独立的html页面，可以有自己的css样式、js文件。"default_popup"属性指定了这个页面的html文件。这个页面打开和关闭方式便捷，非常适合用来进行一些常用信息的提示。我把它用来进行站点管理，取代了浏览器自带的书签功能，举例：我在地址栏输入“goto”，然后空格，然后输入“360”，就能在新的标签页打开360扩展官方开发文档的网页。（我认为这种方式能够直接把我打开某个网页的意愿转换为结果，是打开网页最便捷的方式。这个功能的实现涉及到omnibox、storage等属性，在以后的文章中会陆续介绍）
3.content_scripts
示例如下图：

"content_scripts": [{"matches": ["https://www.baidu.com"],"js": ["myScript.js"]}
]

说明：content_scripts，英文的字面意思是“内容脚本”，也不太直观，可以理解为“content_scripts属性是用来定义以什么方式来操纵某个网页的”。以上图为例，当打开百度首页时，myScript.js就会被“注入”该页面，直白地说，就是可以操纵百度首页的DOM，比如把背景色改为粉红色，如下图所示：

content_scripts这个属性是操纵网页的核心，有一定的复杂性，在后面的文章中会专门讲解。
4.permissions
示例如下图：

"permissions": ["cookies","<all_urls>","tabs","notifications","background","webRequest","webRequestBlocking","management","downloads","contextMenus","storage","alarms"
]

说明：chrome扩展中的很多功能在使用时都要赋予权限，赋权的方式就是在manifest文件的permissions属性中加以申明。申明并不复杂，但是很重要，不能忘记，否则出了问题排查起来不太容易，举个例子：“tabs”赋予扩展操作任意标签页（就是网页，现在的大部分浏览器都是以标签页的形式打开网页的）的权限，但如果不在permissions中申明tabs权限，也可以查询到标签页的某些信息，但是不全，我曾经因此困扰过。

七、manifest.json中个人觉得很实用的其他属性

1.omnibox
示例如下：

"omnibox": {"keyword": "goto"
}

这个单词是“地址栏”的意思。当你在地址栏中输入你定义的keyword，然后按空格键或tab键，就会呈现下图所示的样子：

红框中是一个管道符（熟悉linux的人应该一看就懂），管道符左侧是你的扩展程序的名字。此时，你在管道符后面进行输入/按回车等操作都会通过这个“管道”传送到你的扩展程序后台脚本中，你可以针对你的输入进行任何扩展程序可以做的操作！这里就有了很大的自由发挥空间，可以根据你自己的需求随意定制功能。在地址栏中输入指令的优势在于：地址栏在浏览器中的位置是固定不动的，当你要发送指令时，完全不需要考虑当前处于哪个网页，可以瞬间准确锁定地址栏，可以做到随时产生想法，随时给扩展程序下达指令，立刻得到想要的结果。
注意：每个扩展程序只能设置一个keyword。
2.一些需要在permissions中申明权限的有用的功能
这些功能不是manifest文件中的独立属性，这里仅仅简单介绍一下，后续文章会针对具体功能详细介绍。
1）notifications
notification的意思是通知。这个功能是chrome扩展与操作系统的少数直接可以打交道的方式（如果配合nodejs搭建的后台服务器，能干的事情就太多了。nodejs是js栈技术中的重要一块，后续会以专题方式进行介绍），notification帮助我实现了比较理想的提醒功能。提醒效果如下图所示：

其中的图标/标题/内容（除了Google Chrome两个单词）都是可以自行设置的。这个提醒的特点是：出现数秒后会自动消失，不会打断你当前在电脑上的任何操作，我称之为“软提醒”，适用于那些不是特别紧急但不能忽略的事情，比如定时提醒自己查看一下rtx（类似qq的局域网聊天工具）消息，防止有些重要人物找我。（着重说明一下，我是不会让rtx图标一直显示在电脑右下角的，这是一种典型的分心物，绝不能任由消息随时跳出来打断我的工作思路）。但是如果提醒跳出来时，我正忙于更重要的事情，则可以置之不理。
题外话：当然，有些重要的事情是不能依靠这种软提醒的，比如说今天几点要参加某项重要的会议。对于这类硬提醒，我使用的是nodejs的electron，在桌面弹出对话框，你不关闭它，它就一直留在操作系统的任务栏，这个和浏览器扩展没什么关系，后续在nodejs专题中会进行介绍。notification的软提醒配合electron的硬提醒，是我目前探索出来的最佳组合。我曾经使用过第三方的提醒工具：梦畅闹钟，后来逐渐发现满足不了我多样化的需求了。至于手机闹铃，灵活性就更差了，况且我是比较抵制对手机的过度依赖的。
2）commands
这是快捷键功能，你可以设置海量的快捷键，比如ctrl+1，shift+2，alt+3，ctrl+shift+4，ctrl+alt+5，shift+alt+6等等，足够你用的了。然后，你可以给每个快捷键安排相应的任务，只要是扩展程序可以做的事情，都能安排！

八、结束语

本文零散地介绍了manifest.json文件的内容，部分方面进行了扩展，不涉及过多的具体实现，而是以manifest.json文件的配置为主线，对chrome扩展的主要功能进行了概述。欢迎各位批评指正。