chrome浏览器插件开发-入门

前言

chrome插件最重要的是一个manifest.json配置文件，整个插件的所有功能和文件都在配置清单里。在插件中可以调用chrome提供的API实现各种功能。

manifest.json配置文件

{
  "manifest_version": 3,
  "name": "MyExtension",
  "description": "This is my first extension",
  "version": "1.0",
  "action": {
    "default_icon": "images/icon_128.png",
    "default_popup": "popup/popup.html"
 },
  "icons": {
    "128": "images/icon_128.png",
    "16": "images/icon_128.png",
    "32": "images/icon_128.png"
 },
  "background": {
    "service_worker": "service.js"
  },
  "content_scripts": [
    {
      "js": [ "content/content.js" ],
      "matches": [ "<all_urls>" ]
    }
  ],
  "permissions": [
    "storage",
    "unlimitedStorage"
  ]
}

说明：

manifest_version 是声明 chrome extension 版本，目前v2已被弃用；

name 插件名称，开发自定义；

description 插件描述，开发自定义；

version 插件的版本号，开发自定义；

action default_icon 固定在浏览器上时展示的图标

action default_title 固定在浏览器上时悬浮展示的文案

action default_popup 固定在浏览器上时点击图标弹出的内容

icons 插件展示用的各尺寸图标

background service_worker 后台脚本，一直在后台运行的脚本

content_scripts 内容脚本，根据matches字段匹配到的网页插入对应的js

permissions 声明的权限，使用插件API需要声明对应的权限

Service Worker 后台脚本

对应manifest.json配置的background，是在插件的生命周期内一直存在的，可以通过官方提供的API获取所有tab信息，处理插件的安装、停用等钩子函数，处理storage存储数据等，但是不能直接获取页面数据，不能访问页面document。

Content Script 内容脚本

根据manifest.json配置的规则，插入到指定页面的脚本，可以直接访问和修改页面内容，比如更改背景，插入新的Dom元素等

Popup 弹出页面

点击浏览器上插件图标时弹出的内容，对应一个html页面，如果不需要可以不配置。