Chrome 扩展开发

Chrome 扩展开发：扩展核心功能开发（一）-开发扩展界面

Moran 的茶馆

2024年2月20日 • 5 min read

前期准备

这是我使用 MasterGo 设计的一个简单的弹出页，这个教程的主要目的就是创建这样的页面，调用 Chrome API 获取浏览器所有书签数量。

完成功能开发之前，可以做两个工作：

如果使用的 Visual Studio Code 编辑器，则建议安装 Tailwind CSS IntelliSense 扩展，能在编辑 Tailwind CSS 的时候提供代码提示，在 VS Code 的扩展页面搜索就行

使用 TypeScript 开发扩展可以安装官方提供的 chrome-types 包，也能提供 Chrome API 的代码提示，终端执行 yarn add chrome-types --dev 就行（安装完成后建议重新打开 VS Code，目前我安装完成后并没有生效）。

D:\WorkSpace\SimpleBookmark>yarn add chrome-types --dev

# Out
yarn add v1.22.21
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["strip-ansi@^6.0.1"] is trying to unpack in the same destination "C:\\Users\\wqmor\\AppData\\Local\\Yarn\\Cache\\v6\\npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity\\node_modules\\strip-ansi-cjs" as pattern ["strip-ansi-cjs@npm:strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width@^4.1.0"] is trying to unpack in the same destination "C:\\Users\\wqmor\\AppData\\Local\\Yarn\\Cache\\v6\\npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity\\node_modules\\string-width-cjs" as pattern ["string-width-cjs@npm:string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["strip-ansi@^6.0.0"] is trying to unpack in the same destination "C:\\Users\\wqmor\\AppData\\Local\\Yarn\\Cache\\v6\\npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity\\node_modules\\strip-ansi-cjs" as pattern ["strip-ansi-cjs@npm:strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ chrome-types@0.1.256
info All dependencies
└─ chrome-types@0.1.256
Done in 1.31s.

安装过程会收到一些 warning，忽略就行。

界面开发

准备工作做完后，根据设计稿样式在 popup.html 文件完成前端开发，完整版代码如下，每一行都有注释说明。

其实我也是第一次使用 Tailwind CSS，看着好像很复杂，真正看着文档用起来其实真的非常简单方便。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简洁书签</title>
    <link href="../dist/tailwind.css" rel="stylesheet">
</head>

<body>
    <!-- 统一说明，在 Tailwind CSS 中，1 单位 = 0.25rem = 4px -->

    <!-- 外层容器，宽度 288px，高度 320px，背景色灰色，透明度 20% -->
    <div class="w-72 h-80 bg-gray-200">

        <!-- 内层容器，充满宽度，高度 288px，背景色白色，左下和右下圆角，垂直居中，列方向布局 -->
        <div class="w-full h-72 bg-white rounded-bl-xl rounded-br-xl flex items-center flex-col">

            <!-- 标题行，宽度占父容器的 10/12，高度 32px，顶部外边距 12px，水平布局 -->
            <div class="w-10/12 h-8 mt-3 flex">

                <!-- 图片，宽度和高度均为 32px -->
                <img class="w-8 h-full" src="images/logo48.png">

                <!-- 标题文字，内联块布局，充满高度，左外边距 12px，字体大小大，加粗，行高 32px 以实现垂直居中 -->
                <span class="inline-block h-full ml-3 text-lg font-bold leading-8">简洁书签</span>
            </div>

            <!-- “当前书签总数”文本，字体大小 24px，文字居中，加粗，顶部外边距 56px -->
            <div class="text-2xl text-center font-bold mt-14">当前书签总数</div>

            <!-- “5000”文本，字体大小 24px，文字居中，加粗，顶部外边距 8px，文本颜色自定义 [#56DFD3] -->
            <div class="text-2xl text-center font-bold mt-2 text-[#56DFD3]">5000</div>
        </div>

        <!-- 底部版本号，充满宽度，高度 32px，文本颜色灰色，内容水平和垂直居中，字体大小 14px -->
        <div class="w-full h-8 text-gray-400 flex items-center justify-center text-sm">v1.0.0</div>
    </div>
    <script src="../dist/popup.js"></script>
</body>

</html>

完成前端代码后，重新 yarn build 执行构建操作，构建完成后需要刷新 Chrome 中的扩展，如下：

刷新后再次点击扩展图标，静态页面效果就出来了，如下：

下一节我们会调用 Chrome API 获取书签数据。