chrome 插件页面请求转发_Chrome拓展开发(一):环境准备、目录结构和插件配置

最新推荐文章于 2024-10-10 15:31:57 发布

weixin_39660922

最新推荐文章于 2024-10-10 15:31:57 发布

阅读量170

点赞数

文章标签： chrome 插件页面请求转发

本文链接：https://blog.csdn.net/weixin_39660922/article/details/112191573

版权

本文介绍如何进行Chrome扩展开发，包括前置的JavaScript和前端知识，环境准备如开启Chrome开发者模式，使用VSCode作为开发环境，理解扩展的目录结构，以及重点讲解插件配置manifest.json的常用设置。

摘要由CSDN通过智能技术生成

Chrome拓展开发(一)

1. 前置知识

JavaScript
一些基本前端知识

2. 环境准备

运行环境：Chrome浏览器或Chromium内核浏览器(如Edge)，在浏览器"拓展"中打开"开发人员模式"

开发环境：凭个人喜好，这里我用的是VSCode

3. 目录结构

.
├── css      // css 文件
├── html     // html 文件
├── images   // 存放插件图标等图片
├── js       // js 文件
├── jsconfig.json // 配置相关API代码补全、代码提示
└── manifest.json // 插件配置文件

在jsconfig.json中添加下面的内容，就能用chrome 拓展API的代码补全/提示了！

{
  "typeAcquisition": {
    "include": ["chrome"]
  }
}

4. 插件配置(manifest.json)

以下为部分常用配置：

{
  // Required
  "manifest_version": 3,  // 版本，目前有MV2和MV3
  "name": "My Extension", // 拓展名称
  "version": "versionString", // 拓展版本

  // Recommended
  "default_locale": "en", // 本地化配置，默认语言
  "description": "A plain text description",
  "icons": {...},

  // Pick one (or none)
  "browser_action": {  // 该字段表示拓展可适用于任何页面
    "default_icon": {  // 配置图标
      "16": "<image_file>",
      "48": "<image_file>",
    },
    "default_title": "hello",
    "default_popup": "<html_file>", // 配置点击插件后弹出的气泡页面
  },   
  "page_action": {...},      // 该字段便是拓展适用于匹配的页面，打开匹配的页面后拓展运行，关闭所有匹配到的页面的标签页后拓展随之关闭。其中包含字段类似于browser_action

  // Optional
  "author": "authorname<author@name.com>",
  "background": {  // 配置插件在后台运行的js代码，及其行为
    "scripts": ["<js_file1>","<js_file2>"],
    // Recommended
    "persistent": false,  // 后台运行方式，true-始终运行，false-按需运行
    // Optional
    "service_worker": "", // 离线网络代理，能够处理控制页面发送的请求
  },
  "content_scripts": [ // 定义一系列匹配规则，当URL被匹配时，自动执行js
    {
      "js": ["<js_file1>", "<js_file2>"],
      "matches": ["*//www.baidu.com/*"]   // 匹配规则
    }
  ],
  "devtools_page": "devtools.html",
  "permissions": ["tabs"] // 插件运行需要的权限
}

完整的配置项请查阅Manifest file format.