前言

随着Chrome浏览器越来越受欢迎，开发Chrome插件成为了Web前端开发人员的一个热门话题。本篇文章将介绍如何入门Chrome插件开发，并提供一些有用的资源和技巧。

chrome插件是什么

Chrome插件是一种可以安装到Google Chrome浏览器中，用于扩展浏览器功能的软件程序。它们通常使用HTML、CSS和JavaScript等Web技术开发，并能够在Chrome浏览器中自定义用户界面、添加新的功能或修改现有功能。

Chrome插件可以通过Chrome网上应用商店或开发者模式进行安装和管理，用户也可以轻松启用或禁用它们。它们可以完成各种任务，例如自定义主页、添加广告拦截器、修改页面样式、保存网页内容等。

chrome插件有什么用

简单来说，chrome插件就可以增强浏览器功能，可以根据我们个人需求增加一些浏览器没有的功能。Chrome插件可以大大改善和定制化浏览体验，可以更加高效地工作和学习。例如：

广告拦截器：可以阻止网页中的广告显示，提高浏览体验。
网页翻译：可以将页面翻译成选择的语言。
屏幕录制：可以帮助记录屏幕活动并创建视频教程。
密码管理器：可以帮助存储和管理密码。
网页捕捉：可以将整个页面或某个区域保存为图像或PDF格式。
笔记应用：可以让在浏览器中添加笔记，并将它们保存到云端。
阅读模式：可以帮助以更清晰、简洁的方式阅读文章或博客等文本内容。
开发者工具：可以帮助Web开发人员调试代码、分析性能和优化网站性能等。

chrome插件Demo

要创建一个基本的Chrome插件，请遵循以下步骤：

在计算机上创建一个新的文件夹（例如 my-extension）。
在该文件夹中创建一个名为 manifest.json 的文件，并将以下代码复制到其中：

{
	"name": "demo",
	"version": "1.0",
	"manifest_version": 3,
	"description": "This is my first Chrome extension!",
	"content_scripts": [
		{
			"matches": [
				"<all_urls>"
			],
			"js": [
				"content.js"
			]
		}
	]
}

在这个例子中，我们定义了一个简单的Chrome插件，它具有名称、版本号、描述和一个名为 content.js 的脚本文件。

在该文件夹中创建一个名为 content.js 的文件，并将以下代码复制到其中：

console.log("Hello, world!");

在这个例子中，我们简单地输出了一句问候语。在安装插件后，会根据manifest.json中content_scripts配置规则，将对应js注入到匹配的页面中，按上面的配置，会将content.js注入到所有网站中。

打开Chrome浏览器并导航到 chrome://extensions/。
启用“开发者模式”（Developer mode）。
点击“加载已解压的扩展程序”按钮，并选择创建的文件夹（例如 my-extension）。
现在可以在Chrome浏览器中看到插件了！试试打开控制台看看是否成功输出了问候语。

manifest.json文件详解

{
  // 清单文件的版本
  "manifest_version": 3,
  // 插件的名称
  "name": "all in plugin",
  // 插件的版本
  "version": "2.0.0",
  // 插件描述
  "description": "all in plugin",
  // 图标
  "icons": {
    "16": "assets/icon16.png",
    "48": "assets/icon48.png",
    "128": "assets/icon128.png"
  },
  //背景页，后台脚本引入，v2是scripts:[xxx,xxx]，可以引入多个js文件，v3是service_worker：'xxx'，只能引入一个js，v3版最大的改动应该就是这里了，扩展程序管理界面的插件的那个“背景页”也将变成“Service Worker”，改动之后background.js将和浏览器完全分离，即无法调用window和ducoment对象
  "background": {
    "service_worker": "js/background.js"
  },
  "action": {
    "default_icon": {
      "19": "assets/icon19.png",
      "38": "assets/icon38.png"
    },
    "default_title": "all in plugin",
    "default_popup": "popup.html"
  },
  //注入脚本，值是个数组对象，可以有多个对象
  "content_scripts": [
    //每个对象代表一个注入的配置
    {
      //需要注入js脚本文件的指定页面
      "matches": ["http://*/*", "https://*/*"],
      "css": [],
      //需要在指定页面注入的js脚本文件
      "js": [
        "js/chunk-vendors.js",
        "js/jquery-1.8.3.js",
        "js/google-csdn.js",
        "js/monitor-help.js"
      ],
      //不允许注入js脚本文件的指定页面
      //  "exclude_matches": ["https://*.xxx.com/*"],
      //什么时候注入的js脚本，document_start=页面加载开始时，document_end=页面加载结束时
      "run_at": "document_start"
    }
  ],
  //API权限，需要使用某些API时需要设置该API权限才行
  "permissions": [
    "contextMenus",
    "tabs",
    "notifications",
    "webRequest",
    "storage"
  ],
  //主机权限，在背景页backgroud.js里面或者popup页面走请求时，请求域名的白名单权限，如果没添加的则请求会失败
  "host_permissions": ["http://*/*", "https://*/*"],
  //  免费广告位
  "homepage_url": "",
  // devtools栏页面
  "devtools_page": "devtools.html",
  //内容安全政策，V2的value是字符串，V3是对象
  "content_security_policy": {
    //原文：此政策涵盖您的扩展程序中的页面，包括 html 文件和服务人员；具体不是很明白，但是参数值得是self，即当前自己
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

chrome插件版本区别

文件结构

manifest_version 2 的结构比较简单，只有一个 background_page 或 background_scripts 字段用于定义后台脚本。而 manifest_version 3 使用模块化方式组织代码，将后台脚本和其他功能模块分离成多个文件。

权限

在 manifest_version 2 中，所有权限都必须在清单文件中声明，并且用户需要在安装扩展程序时授予这些权限。而在 manifest_version 3 中，权限更加细粒度，某些敏感权限（如访问剪贴板、通知等）需要用户进行额外的授权操作，以保护用户隐私和安全。

生命周期

在 manifest_version 2 中，扩展程序的生命周期由事件驱动，例如浏览器启动、标签页打开、插件图标点击等。而在 manifest_version 3 中，扩展程序基于服务工作者（Service Worker）实现，可以完全脱离事件驱动的体系，提高运行效率和性能。

API

在 manifest_version 3 中，Chrome API 已经被重构为异步 Promise 形式，并且删除了一些已经过时或不再安全的 API。新的 API 签名和调用方式也有所变化，需要开发者进行适当的更新。

chrome插件开发入门

前言