• 作者:老汪软件技巧
  • 发表时间: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页面

结尾

上面我们完成了弹窗式窗口项目的基础搭建和安装,其中涉及到的配置也进行了说明。当然这项目的项目显然无法满足业务需求,在下一章节将给大家讲解,如何通过弹出式窗口和页面进行交互。