Chrome Extension 第一篇 — manifest

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":