- 作者:老汪软件技巧
- 发表时间: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页面
结尾
上面我们完成了弹窗式窗口项目的基础搭建和安装,其中涉及到的配置也进行了说明。当然这项目的项目显然无法满足业务需求,在下一章节将给大家讲解,如何通过弹出式窗口和页面进行交互。