chrome 浏览器插件开发——manifest.json分析-CFANZ编程社区

一、前言

chrome 浏览器插件开发——manifest.json分析_谷歌浏览器插件

从本blog开始，就要正式开始谷歌浏览器插件开发了。

先事先声明，我使用的版本是v2版本，当你把小插件放入浏览器运行时，他可能会提示v2版本在2024年会废弃，但是这并不影响我们的开发思路，有一位人生导师曾经跟我说过：编程语言从来都只是工具，是实现需求的手段，重要的是编程思想。

为什么要事先声明是v2版本呢，除了免于被喷之外，还有一个原因是不同的版本，浏览器提供的api，配置方式也有差别，因此，为了更好的复现博客案例，应该谨遵版本。

二、manifest.json

{
  "name": "My Comprehensive Extension",
  "version": "1.0.0",
  "description": "This is a sample Chrome extension demonstrating various features and configurations.",
  "manifest_version": 2,
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*", "<all_urls>"],
      "js": ["contentScript.js"],
      "css": ["contentStyle.css"],
      "run_at": "document_end"
    }
  ],
  "browser_action": {
    "default_icon": "browserActionIcon.png",
    "default_title": "My Extension Action",
    "default_popup": "popup.html"
  },
  "page_action": {
    "default_icon": "pageActionIcon.png",
    "default_title": "Page-Specific Action",
    "default_popup": "pagePopup.html",
    "show_matches": ["https://specificpage.example.com/*"]
  },
  "permissions": [
    "tabs",
    "storage",
    "notifications",
    "https://*.example.com/*",
    "activeTab"
  ],
  "options_page": "options.html",
  "web_accessible_resources": [
    "sharedScript.js",
    "image.png"
  ]
}

1、基础定义信息

name：插件的名称，将展示在浏览器扩展管理页面等位置，定义我们的插件叫什么名字。

chrome 浏览器插件开发——manifest.json分析_chrome_02

version：插件版本号，遵循常见的x.y.z格式。同上图
description：简短介绍插件功能，帮助用户了解插件用途，也是在管理处显示的。

chrome 浏览器插件开发——manifest.json分析_谷歌浏览器插件_03

manifest_version：就是我们刚刚前言中说到的，定义我们的浏览器插件是使用的V几API，我们现在是使用2。
icons：定义不同尺寸下插件使用的图标文件，方便在浏览器不同场景（如扩展列表、工具栏）以合适大小显示图标。

chrome 浏览器插件开发——manifest.json分析_javascript_04

chrome 浏览器插件开发——manifest.json分析_chrome_05

2、后台运行脚本

background：配置后台脚本，scripts数组指定后台脚本文件名（background.js），persistent设为false采用非持久模式，基于事件驱动运行后台逻辑，节省系统资源。如果你要做一些定时任务，或者是一些浏览器级别的操作，数据存储啥的，在这里做就最合适了

3、内容脚本

还记得一开始我们说的页面入侵吗？就是用到的这个配置哦

content_scripts：定义向匹配网页注入的脚本与样式。matches数组指定匹配的 URL 模式，示例中既匹配https://*.example.com/*域名下的页面，也可通过<all_urls>匹配所有网址；js数组包含要注入的 JavaScript 脚本文件（contentScript.js），css数组是注入的 CSS 样式文件（contentStyle.css），run_at指定脚本在网页加载流程中何时运行，document_end表示页面加载完毕后运行。

4、浏览器工具栏

browser_action：配置全局可用的浏览器工具栏图标及点击行为。default_icon指定图标文件，default_title是鼠标悬停提示文字，default_popup指向点击图标弹出显示的 HTML 页面。
page_action：类似browser_action，但用于特定页面场景。show_matches定义在哪类网址下才在工具栏显示该图标及交互功能，点击弹出pagePopup.html页面。

不得不说这功能是真强大

5、权限相关

这个部分最重要，只有在这里声明了要使用的浏览器能力，才能在脚本中调用到api!!!!

permissions：声明插件所需权限，tabs用于与浏览器标签交互、storage可存取本地存储数据、notifications能发送系统通知、https://*.example.com/*授予对特定域名下资源的访问权、activeTab允许临时访问当前激活标签的有限权限，按需组合满足功能实现。

6、额外页面

options_page：指定插件设置页面的 HTML 文件名（options.html），可以额外提供一个页面让用户访问。

7、静态资源

web_accessible_resources：罗列插件中可被外部网页访问的资源文件，像共享脚本（sharedScript.js）或图片（image.png），便于跨域交互场景下共享使用。要有这个，才能访问我们想要展示的图片等静态资源，不然会获取不到啊

三、下集预告

第一个插件