使用TypeScript创建一个chrome扩展程序

0. 前言

Google Chrome浏览器扩展同时可用于Microsoft Edge浏览器等支持chromium内核与Chrome扩展标准的浏览器，为了叙述方便统一称为chrome扩展。

本文目标是建立一个基于TypeScript + Webpack的文件模板，并不涉及到网页框架技术。

需要掌握一定的JavaScript/TypeScript与Nodejs配置知识。

目前的扩展标准为Manifest V3

1. 前期准备

1.0 本地环境准备

需要自行安装Nodejs环境，这里不过多赘述。

包管理器可用npm/yarn/pnpm，本文选用pnpm，可以复用本地包，减少下载、安装量。

1.1 创建项目文件夹

在合适的位置创建一个文件夹，为避免不必要的错误，目录的路径需要为ASCII字符。文件夹名称为你的插件名称即可，最好使用小写英文，使用-（减号）代替空格。例如：mkdir hello-world

进入文件夹cd hello-world

打开终端，将工作目录切换到当前文件夹，例如：cd D:\hello-world

确保终端中的提示符内容为当前文件夹的路径。

1.2 创建文件

在刚刚的终端中输入：pnpm init，并enter。目录下会生成一个package.json文件。

再手动新建一个tsconfig.json

接下来创建README.md自述文件和LICENSE许可文件。内容自行发挥。

1.3 创建文件夹

在项目文件夹的根目录下，创建一个文件夹：src

在src中创建三个文件夹：ts | html | assests。分别表示TypeScript源文件目录、页面目录、资源文件目录。也可按照需求自行发挥。

2. 安装

确保终端的当前目录是项目文件夹，输入：

pnpm i -D typescript ts-loader webpack webpack-cli webpack-dev-server clean-webpack-plugin copy-webpack-plugin @types/chrome

等待将所有包安装完成，将package.json内容中的"scripts"改为：

"scripts": {
    "dev": "webpack --watch --mode development",
    "build": "webpack --mode production",
    "zip": "7z a -tzip ./%npm_package_name%-%npm_package_version%.zip -r dist/*"
},

3. 开发chrome插件的文件配置

编辑项目文件夹下tsconfig.json，填入：

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ES2015",
    "typeRoots": ["./node_modules/@types"],
    "outDir": "./dist/js/"
  },
  "buildOptions": {},
  "include": ["./src/ts/*.ts"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

在项目文件夹下新建webpack.config.js，填入：

const path = require("path");
const CopyWebpack = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
// 用于复制不参与编译的文件
const copyMap = [
  {
    from: path.resolve("src/manifest.json"),
    to: `${path.resolve("dist")}/manifest.json`,
  },
  {
    from: path.resolve("src/assets"),
    to: path.resolve("dist/assets"),
  },
  {
    from: path.resolve("src/html"),
    to: path.resolve("dist/"),
  },
];
//webpack的所有配置信息
module.exports = {
  optimization: {
    minimize: true,  // 关闭代码压缩，可选
    minimizer: [new TerserPlugin({ extractComments: false })],  // 关闭创建代码中的注释文件
  },
  //入口文件
  entry: {
    background: "./src/ts/background.ts",
    popup: "./src/ts/popup.ts",
    content: "./src/ts/content.ts",
  },
  devtool: "inline-source-map",

  devServer: {
    contentBase: "./dist",  // 开发阶段服务器的根目录
  },
  //指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].js",  // 编译打包后的js文件名称
  },
  //用来指定那些模块可以用来备注引入
  resolve: {
    extensions: [".ts", ".js"],
  },
  //指定webpack的打包使用的模块
  module: {
    rules: [
      {
        test: /\.ts$/, //规则生效的文件
        use: {
          loader: "ts-loader", //要使用的loader
        },
        exclude: /node_modules/, //编译排除的文件
      },
    ],
  },

  plugins: [new CleanWebpackPlugin(), new CopyWebpack({ patterns: copyMap })],
};

进入src中新建manifest.json文件，这是chrome扩展的描述文件，需要按照一定的要求配置。

{
    "name": "插件名称",
    "version": "1.0",
    "description": "插件描述",
    "homepage_url": "插件主页",
    "manifest_version": 3,
    "icons": {
        "16": "assets/logo_16.png",
        "48": "assets/logo_48.png",
        "64": "assets/logo_64.png",
        "128": "assets/logo_128.png"
    },
    "background": {
        "service_worker": "js/background.js"
    },
    "action": {
        "default_icon": "assets/logo_128.png",
        "default_popup": "popup.html"
    },
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "js": [
                "js/content.js"
            ],
            "run_at": "document_end"
        }
    ],
    "web_accessible_resources": [
        {
            "resources": [
                "/assets/*"
            ],
            "matches": [
                "http://*/*",
                "https://*/*"
            ]
        }
    ],
    "permissions": [
        "notifications",
        "contextMenus",
        "webRequest",
        "storage",
        "tabs",
        "activeTab"
    ]
}

接着在src/ts中新建三个文件：background.ts | content.ts | popup.ts。分别用于chrome扩展的后台服务任务、注入页面脚本、弹出菜单脚本

几乎所有chrome扩展都需要popup页面，在src/html中新建popup.html

准备chrome扩展的图标，为正方形，边长分别为：16,28,64,128，需要命名为logo_128.png，并保存的src/assets中。

4. 运行命令

• pnpm run dev: webpack监听文件更改，并实时编译
• pnpm run build: 以生产模式编译打包所有文件
• pnpm run zip: （仅适用于Windows环境且安装了7-zip）打包扩展并压缩为zip

打赏