Chrome 插件学习之弹出式窗口（一）弹窗式窗口旨在能够更快、更直观的给用户提供服务，适用于需要用户执行短暂操作的

前言

弹出式窗口交互模式：当用户点击浏览器工具栏上的扩展图标时，会出现一个小窗口。这种窗口通常用于快速展示信息或提供简单的交互界面，显示时间通常较短，用户操作后窗口会消失。

弹窗式窗口旨在能够更快、更直观 的给用户提供服务，适用于需要用户执行短暂操作的场景，如表单填写、快速查看信息或执行简单命令。

常见插件

下面插件都是通过 弹出式窗口 来提供服务，例如：

Wappalyzer

ColorZilla

开发

下面我们通过搭建一个简单的弹出式窗口项目，来熟悉 关键文件 和 基础配置

项目配置

项目结构

├── hello_extensions.png  插件图标
├── manifest.json         插件的配置文件，用来描述插件的基本信息和行为；它对插件的整体架构、权限以及加载的资源等进行定义。
└── popup.html            弹窗的界面

manifest.json 配置如下：

{
  "name": "my-popup",
  "description": "customize popup chrome extension",
  "manifest_version": 3,
  "version": "0.0.1",
  "action": {
    "default_popup": "./popup.html",
    "default_icon": {
      "16": "./hello_extensions.png",
      "24": "./hello_extensions.png",
      "32": "./hello_extensions.png"
    }
  }
}

name 插件名称
description 插件描述
manifest_version 指定扩展的版本规范(v2 | v3), 文档均以v3进行说明
version 版本号
default_popup 弹出窗口的html文件
default_icon 插件图标。图标通常有不同的分辨率(16、24、32)，以适应不同的设备和显示条件（例如普通屏幕和高分辨率屏幕）

manifest.json 可以配合 vscode 插件（chrome-extesion-manifest-json-schema），提供语法提示。

popup.html 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello world</h1>
</body>
</html>