进入 Chrome 扩展开发：使用 TypeScript 和 Webpack 轻松设置

截至 2024 年 12 月，Chrome 仍然是全球最受欢迎的浏览器。学习开发 Chrome 扩展程序可以为探索基于浏览器的开发提供令人兴奋的机会，并增强您对浏览器底层工作原理的理解。 Chrome 网上应用店提供了大量扩展程序，允许用户自定义浏览器的默认行为并扩展各种网站的功能。

在本博客中，我们将介绍如何设置本地开发环境，以使用 TypeScript 和 Webpack 创建 Chrome 扩展。本指南非常适合任何想要掌握 Chrome 扩展程序开发基础知识的人。最后，您将拥有一个正常运行的开发环境，可以用来试验您的第一个扩展。在深入研究之前，请确保您对 Web 技术、JavaScript 以及 JavaScript 生态系统中的常用工具有基本的了解。详细信息列于先决条件部分。

Chrome 扩展组件快速概览

在开始设置之前，让我们简单了解一下 Chrome 扩展程序的一些关键组件：

弹出窗口 : 管理扩展程序的用户界面，但无法直接访问父网页的 DOM。

内容脚本：可以直接访问父网页的 DOM，但在单独的执行上下文中运行。这种分离意味着它无法直接访问父页面的 JavaScript 对象。

注入的脚本 : 与父网页共享相同的执行上下文，允许访问其 DOM 和 JavaScript 对象。

后台脚本 ：在隔离的上下文中运行，无法直接访问父页面的 DOM 或 JavaScript 对象。

Popup、Content 和 Background 脚本在扩展的上下文中运行，而 Injected 脚本在扩展的上下文中运行父网页。父页面是指扩展程序在其上执行其功能的活动网页。对这些页面的权限和访问在manifest.json 文件中定义，我们将在本博客后面介绍。

先决条件

要学习本教程，请确保您已安装以下工具：

• Node.js (v18.16 LTS)

• NPM（节点包管理器）

• TypeScript

• Webpack

• VS 代码编辑器（或您选择的任何代码编辑器）

设置

每个 Chrome 扩展程序都需要在项目根级别有一个名为 manifest.json 的文件。该文件用作扩展的配置蓝图，包含有关项目的基本详细信息。虽然总体项目结构没有严格的规则，但我们将从创建此文件开始，并按照本博客中的概述逐步构建项目。

继续之前，请确保您的计算机上已安装所有必备软件。

按照以下步骤设置您的项目及其依赖项：

为您的项目创建一个目录并进入该目录。这将是您项目的根。除非另有说明，从这里开始的所有内容都将基于您项目的根。

mkdir chrome-extension && cd ./chrome-extension

创建一个名为manifest.json的文件

{
 "manifest_version": 3,
 "name": "My First Chrome App",
 "version": "1.0",
 "description": "A Chrome extension built with TypeScript using webpack.",
 "action": {
 "default_popup": "popup.html",
 "default_icon": "icon.png"
 }
}

manifest.json 中的大部分内容都是不言自明的，除了 action 对象。 default_icon 是应用程序的图标，将显示在 Chrome 中应用程序名称旁边，default_popup 指定单击扩展程序图标时要显示为弹出窗口的 HTML 文件。

创建一个名为 popup.html 的文件，其中包含以下内容，

 
  <title>First Chrome Extension</title>
 
 
  <h1 id="This-is-my-app-popup">This is my app popup</h1>
 

在根目录中包含一个名为 icon.png 的图像文件。这将作为您的应用程序的图标，显示在 Chrome 工具栏中。确保图像采用受支持的格式（例如 PNG）且大小适当。

只需最少的设置即可快速测试

在深入研究更复杂的功能之前，让我们测试这个基本扩展以确保一切设置正确。这个初始测试将作为我们开发过程的基础，并确认我们稍后所做的更改是否按预期工作。

打开 Chrome 的扩展程序管理 ：打开 Chrome 并通过在地址栏中输入 chrome://extensions/ 导航到“管理扩展程序”页面。这将带您进入“扩展”屏幕。

启用开发者模式 ：找到屏幕右上角的开发者模式开关，如果尚未启用，请将其打开。启用此模式允许 Chrome 除了从 Chrome Web Store 下载的扩展程序之外还加载本地构建的扩展程序。

加载您的扩展 ：点击页面顶部的加载解压按钮。浏览并选择项目的根目录。

验证安装：加载后，您的扩展应该出现在已安装扩展的列表中。

渲染弹出窗口： 单击 Chrome 右上角“管理扩展程序”按钮上方的“我的第一个 Chrome 应用程序”图标。此操作应该呈现 popup.html 文件，显示您之前定义的内容。

如果您已成功使其正常工作，那么我们的第一次测试就成功了，我们可以在此基础上继续进行。如果没有，请仔细阅读以上内容，以确保您没有错过任何一步。

下一步是创建一个 package.json 文件来管理项目依赖项。运行以下命令：

npm init -y

此命令使用默认值初始化 package.json 文件。如果您想自定义它，请省略 -y 标志并以交互方式回答提示。

默认的 package.json 文件将如下所示：

{
 "manifest_version": 3,
 "name": "My First Chrome App",
 "version": "1.0",
 "description": "A Chrome extension built with TypeScript using webpack.",
 "action": {
 "default_popup": "popup.html",
 "default_icon": "icon.png"
 }
}

现在我们可以将所有必需的依赖项安装到项目中。您可以使用以下命令来执行此操作。

• npm install -D typescript — 安装 TypeScript 并将其添加到 package.json 的 devDependencies 部分

• npm install -D @types/chrome — 安装 Chrome 类型并将其添加到 package.json 的 devDependencies 部分

• npm install -D webpack — 将 webpack 安装到项目中并将其添加到 package.json 的 devDependencies 部分

• npm install -D webpack-cli — 这是必需的，因为每当我们对代码库进行更改时，我们都会进行热重载

• npm i -D copy-webpack-plugin — 需要将任何静态资源复制到输出目录或 dist 目录

• npm i -D path — 这是稍后解析 webpack 配置中静态资源的路径所必需的

• npm i -D @babel/core @babel/preset-env babel-loader ts-loader — 这是在 webpack 构建过程中编译代码所必需的

对于下一个测试，我们必须让这个应用程序与 typescript 和 webpack 一起使用。我们已经安装了所需的依赖项。现在我们必须创建一些配置文件并编写一些代码才能使其正常工作。

我们将创建两个配置文件，一个用于 TypeScript，另一个用于 webpack。创建一个名为 tsconfig.json 的文件，其中包含以下内容。

 
  <title>First Chrome Extension</title>
 
 
  <h1 id="This-is-my-app-popup">This is my app popup</h1>
 

以上是为了让TypeScript编译器正确识别.ts文件的位置并正确编译它们。根据上述配置，.ts 文件应位于 src 目录或其子目录下。转换后的 .js 文件将在 dist 目录中创建。

现在创建 webpack.config.cjs 文件，该文件将包含构建和生成编译文件以及其他静态资产所需的配置。图片

{
  "name": "chrome-extension",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

注意：CopyWebpackPlugin 将静态资源从源代码复制到 dist 目录。

现在使用以下命令创建所需的目录：

mkdir src/scripts -p

在脚本目录中，创建一个包含以下内容的简单 Typescript 文件，

src/scripts/popup.ts

{
 "manifest_version": 3,
 "name": "My First Chrome App",
 "version": "1.0",
 "description": "A Chrome extension built with TypeScript using webpack.",
 "action": {
 "default_popup": "popup.html",
 "default_icon": "icon.png"
 }
}

每当渲染弹出窗口时，上面的代码都会将消息打印到控制台。我们还必须在 popup.html 中包含此 popup.ts 文件的链接（它将被编译为 popup.js 文件）。另外，创建名为 popup-style.css 和 content-style.css 的文件。我们稍后可以使用这些文件来设计弹出窗口和其他页面的样式。那么让我们这样做吧，

在我们之前创建的 popup.html 中包含 popup-style.css 和 popup.js 的链接

popup.html

 
  <title>First Chrome Extension</title>
 
 
  <h1 id="This-is-my-app-popup">This is my app popup</h1>
 

创建 popup-style.css 文件：

{
  "name": "chrome-extension",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

创建 content-style.css 文件：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

现在是时候将 webpack 相关命令添加到 package.json 文件中，以便我们可以构建扩展了。

// [webpack.config.cjs]
const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: "development", // Use 'production' for production builds
  target: "web",
  devtool: "source-map",
  entry: {
   "popup": path.resolve(
      __dirname,
      "src/scripts/popup.ts"
    ),
  },
  output: {
    filename: "[name].js", // Output file name for each entry
    path: path.resolve(__dirname, "dist"), // Output directory
    clean: true, // Clean the output directory before each build
    libraryTarget: "umd", // Universal Module Definition
  },

  resolve: {
    extensions: [".ts", ".js"], // Resolve .ts and .js extensions
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
          "ts-loader",
        ],
      },
    ],
  },

  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "popup-style.css"), // Source directory
          to: path.resolve(__dirname, "dist"), // Destination directory
        },
        {
          from: path.resolve(__dirname, "content-style.css"), // Source directory
          to: path.resolve(__dirname, "dist"), // Destination directory
        },
     {
          from: path.resolve(__dirname, "icon.png"), // Source directory
          to: path.resolve(__dirname, "dist"), // Destination directory
        },
        {
          from: path.resolve(__dirname, "popup.html"), // Source directory
          to: path.resolve(__dirname, "dist"), // Destination directory
        },
        {
          from: path.resolve(__dirname, "manifest.json"), // Source directory
          to: path.resolve(__dirname, "dist"), // Destination directory
        },
      ],
    }),
  ],
}

运行以下命令开始构建过程：

npm run build

此命令监视文件中的更改并自动重建项目。

只需最少的设置即可快速测试

我们现在可以做另一个测试来检查我们的 webpack 相关配置是否按预期工作。但在尝试测试之前，请从您将项目根目录上传到 Chrome 的第一个测试中删除旧扩展。现在，这次我们必须上传 dist 目录，因为编译后的代码将位于该目录中，而不是项目的根目录中。上传新版本的扩展并渲染弹出窗口后，右键单击弹出窗口并打开开发控制台，然后检查是否可以从 popup.ts 中看到控制台语句。该声明应该存在，如果没有，请检查前面的步骤是否有错误。

增强设置

至此，我们已经有了一个可以使用的基本版本的扩展，但我们还需要添加一些组件，以便我们可以轻松地进行本地开发。

到目前为止我们已经看到了弹出组件。现在是时候添加其他组件了。在 src/scripts 目录中创建三个文件，即injected.ts、content.ts和background.ts，内容如下：

src/scripts/injected.ts

(() => {
    const message:string = "This is a console statement from the popup script";
    console.log(message)
})();

injected.[ts|js] 是一个特殊文件，可以访问 Dom 以及父站点公开的 JavaScript 对象。我们需要使用内容脚本动态地将此文件添加到主机站点。

创建 content.ts 文件：

src/scripts/content.ts

....
<link href="popup-style.css" rel="stylesheet">
....
<script src="popup.js"></script>
....

创建background.ts文件：

src/scripts/background.ts

{
 "manifest_version": 3,
 "name": "My First Chrome App",
 "version": "1.0",
 "description": "A Chrome extension built with TypeScript using webpack.",
 "action": {
 "default_popup": "popup.html",
 "default_icon": "icon.png"
 }
}

现在我们必须更新 webpack.config.cjs 文件以添加这三个条目作为入口点。

 
  <title>First Chrome Extension</title>
 
 
  <h1 id="This-is-my-app-popup">This is my app popup</h1>
 

最后一步，我们必须更新 manifest.json 文件以包含所有这些配置，以便 Chrome 环境可以检测到它们。

{
  "name": "chrome-extension",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在上面的manifest.json中，我们配置了扩展程序以与google.com一起使用，这意味着该扩展程序仅在浏览器中加载google.com时才会执行其逻辑。您可以将其更改为您选择的任何其他网站。

通过增强设置进行快速测试

我们现在可以使用增强的设置进行最终测试。在继续之前，请确保在 Chrome 中重新安装该应用程序，以避免因与旧版本代码不匹配而出现问题。要查看所有组件是否正常工作，请检查不同的 console.log 语句。请记住，我们已将 console.log 语句放入四个不同的文件中：injected.ts、background.ts、content.ts 和 popup.ts。控制台中应记录四条消息。所以，步骤如下，

• 在终端中停止 npm run build 命令（如果它正在运行）并再次启动它，以便它获取我们刚刚创建的新文件

• 删除并重新安装应用程序

• 从扩展设置屏幕打开弹出窗口，右键单击该弹出窗口并打开开发人员控制台。您应该在此控制台中看到来自后台脚本和弹出脚本的消息

• 在浏览器的另一个选项卡中打开 https://www.google.com

• 右键单击打开的谷歌网站并打开开发者控制台。您应该能够看到来自内容脚本和注入脚本的消息

恭喜您成功设置并运行您的第一个 Chrome 扩展程序！如果您遇到任何问题，请仔细检查您所执行的步骤，以确保一切就绪。此外，本博客末尾还提供了 GitHub 存储库的链接，供您参考。

要点

在这篇博客中，我们学习了如何为 Chrome 扩展程序开发设置本地开发环境。以下是一些要点：

• 我们探索了 Chrome 扩展程序开发中涉及的主要组件。

• 我们学习了如何使用 TypeScript 和 Webpack 设置开发环境。

• 我们还介绍了如何在 Chrome 中设置和测试扩展程序。

瞥见前方

我目前正在撰写另一个博客，我们将在其中探索 Chrome 扩展的一个简单用例，展示我们在本博客中讨论的 Chrome 开发环境的所有组件如何组合在一起创建功能扩展。

感谢您花时间阅读此博客！非常感谢您的兴趣和时间。当我继续这一旅程时，我很高兴能分享更多。快乐编码！

GitHub 链接 — https://github.com/gauravnadkarni/chrome-extension-starter-ts

本文最初发表于Medium。

以上是进入 Chrome 扩展开发：使用 TypeScript 和 Webpack 轻松设置的详细内容。更多信息请关注PHP中文网其他相关文章！