Chrome 扩展程序是一种基于 Web 技术开发的浏览器插件，可以为用户提供各种功能和服务，例如广告拦截、密码管理、网页截图等。在开发 Chrome 扩展程序时，使用 TypeScript 可以带来更好的开发体验和代码质量。本文将介绍如何使用 TypeScript 开发 Chrome 扩展程序，并分享一些最佳实践。
TypeScript 简介
TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，增加了静态类型和类等面向对象特性。使用 TypeScript 可以提高代码的可维护性和可读性，并在编译时发现一些错误，减少运行时错误的发生。
Chrome 扩展程序开发环境
Chrome 扩展程序的开发环境需要安装 Chrome 浏览器和 Visual Studio Code 编辑器。在 Chrome 浏览器中，打开“更多工具”-“扩展程序”页面，开启开发者模式，创建一个新的扩展程序，即可开始开发。
TypeScript 开发 Chrome 扩展程序的步骤
- 初始化 TypeScript 项目
在项目根目录下运行以下命令，初始化 TypeScript 项目：
npm init -y npm install typescript --save-dev npx tsc --init
- 配置 TypeScript 编译选项
打开 tsconfig.json 文件，配置 TypeScript 编译选项：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
--------- -------
------------ -----
--------- -----
------------------ -----
----------------------------------- ----
--
---------- -------------
---------- ---------------- ---------------
-其中，target 指定编译后的 JavaScript 版本；module 指定模块化方式；outDir 指定编译后的输出目录；sourceMap 指定是否生成 source map 文件；strict 指定是否启用严格模式；esModuleInterop 指定是否启用 ES 模块化；forceConsistentCasingInFileNames 指定是否强制文件名大小写一致。
- 编写 TypeScript 代码
在 src 目录下创建 TypeScript 文件，编写 Chrome 扩展程序的逻辑。例如，以下代码创建了一个浏览器右键菜单：
chrome.contextMenus.create({
title: "Hello, world!",
contexts: ["all"],
onclick: () => {
chrome.tabs.executeScript({ code: "console.log('Hello, world!')" });
},
});- 编译 TypeScript 代码
运行以下命令，编译 TypeScript 代码：
npx tsc
编译后的 JavaScript 代码将输出到 dist 目录下。
- 加载 Chrome 扩展程序
在 Chrome 浏览器中打开“更多工具”-“扩展程序”页面，点击“加载已解压的扩展程序”，选择编译后的 dist 目录即可加载扩展程序。
最佳实践
以下是一些在 TypeScript 开发 Chrome 扩展程序时的最佳实践：
- 使用
chrome.d.ts类型定义文件
chrome.d.ts 是一个 TypeScript 类型定义文件，用于描述 Chrome 浏览器的 API。在 TypeScript 项目中，可以引入该文件，以获得更好的代码提示和类型检查。
npm install @types/chrome --save-dev
- 使用
chrome.runtime.onInstalled事件
chrome.runtime.onInstalled 是一个 Chrome 扩展程序安装或更新时触发的事件。在该事件中，可以进行一些初始化操作，例如注册菜单、设置默认值等。
-- -------------------- ---- -------
----------------------------------------- -- -
----------------------------
------ ------- --------
--------- --------
-------- -- -- -
--------------------------- ----- -------------------- --------- ---
--
---
---- 使用
chrome.storageAPI 存储数据
chrome.storage 是一个 Chrome 扩展程序提供的存储 API，可以存储扩展程序的配置、用户数据等。在 TypeScript 项目中，可以使用 chrome.storage 的类型定义文件，以获得更好的代码提示和类型检查。
-- -------------------- ---- ------- ------ - ----------- - ---- --------- ----- -------- ----------- - -------------------- ------------- ---- ------- -- -- -- - ----------------- --- ---- ---------- --- ------------------ ------ -- - ------------------ ---
示例代码
以下是一个完整的 TypeScript 开发的 Chrome 扩展程序示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- ---------
----- -------- ----------- - --------------------
----------------------------------------- -- -
----------------------------
------ ------- --------
--------- --------
-------- -- -- -
--------------------------- ----- -------------------- --------- ---
--
---
---
--------------------------------------------- -- -
-------------------- ------ -- -
----- ----- - ----------- -- -- - --
------------- ----- -- -- -- -
----------------------------------- ----- ---------------- ---
---
---
---该扩展程序创建了一个浏览器右键菜单，点击后在当前页面输出“Hello, world!”，并在浏览器工具栏上显示一个计数器。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cf943ae46428fe9eb268f6