- 作者：老汪软件技巧
- 发表时间：2024-10-04 04:00
- 浏览量：
前言
弹出式窗口交互模式：当用户点击浏览器工具栏上的扩展图标时，会出现一个小窗口。这种窗口通常用于快速展示信息或提供简单的交互界面，显示时间通常较短，用户操作后窗口会消失。
弹窗式窗口旨在能够更快、更直观 的给用户提供服务，适用于需要用户执行短暂操作的场景，如表单填写、快速查看信息或执行简单命令。
常见插件
下面插件都是通过 弹出式窗口 来提供服务，例如：
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"
}
}
}
manifest.json 可以配合 vscode 插件（chrome-extesion-manifest-json-schema），提供语法提示。
popup.html 代码
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<h1>hello worldh1>
body>
html>
我们已经完成项目的基础搭建，下面我们在 Chrome 浏览器中进行安装
安装插件
打开扩展程序
因为我们本地代码是非压缩的，这里选择加载已解压的扩展程序
选择我们插件项目的根目录，然后就能在所有扩展程序中看到我们的插件了
点击图钉的图标，插件会固定在浏览器上
点击图标，弹出的窗口就是popup.html页面
结尾
上面我们完成了弹窗式窗口项目的基础搭建和安装，其中涉及到的配置也进行了说明。当然这项目的项目显然无法满足业务需求，在下一章节将给大家讲解，如何通过弹出式窗口和页面进行交互。
