当前位置： 首页 > news >正文

chrome扩展控制popup页面动态切换

news 2026/5/26 11:36:52

文章目录

  • 1、通过控制元素的显示隐藏达到popup页面切换的效果
  • 2、通过监听页面重新加载完成不同popup的切换
  • 3、直接修改popup页面location.href，无需刷新页面

1、通过控制元素的显示隐藏达到popup页面切换的效果

下面在mv2版本的API下完成

实际上通过控制页面元素实现popup页面切换，是一种伪切换，从视觉上达到了切换效果，实际上还是一个popup.html

  1. 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><div id="id_1" style="display: none;">内容一</div><div id="id_2" style="display: none;">内容二</div><div id="id_3" style="display: block;">内容三</div>
</body>
</html>
  1. 判断展示哪一个div的内容
// 引入jquery// do something 逻辑判断，控制元素显示隐藏
$("#id_1").css({display: 'block'}) // 控制#id_1的元素展示
$("#id_2").css({display: 'none'}) // 其他的隐藏
$("#id_3").css({display: 'none'})

2、通过监听页面重新加载完成不同popup的切换

不需要在manifest里单独配置browser_action，通过所在的页面决定使用哪一个popup.html页面

  1. 准备两个popup.html

path：/popup_1.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><div id="popup_1" style="display: block;">popup_1</div>
</body>
</html>

path：/popup_2.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><div id="popup_2" style="display: block;">popup_2</div>
</body>
</html>
  1. 监听页面url判断加载哪个popup.html
// 注入需要先在manifest里面配置api的权限
// mv2版本API// 监听页面加载的API
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {console.log(tabId, changeInfo, tab)console.log(chrome)// 页面加载中if (changeInfo.status === 'loading') {// 当前标签页在百度页面打开popup_1.html、否则打开popup_2.htmlif (tab.url.indexOf('www.baidu.com') > 0) {chrome.browserAction.enable(tabId) // 在这个标签的为tabId的页面启用popup.htmlchrome.browserAction.setPopup({tabId: tabId,popup: '/popup_1.html'})} else {chrome.browserAction.enable(tabId) // 在这个标签的为tabId的页面启用popup.htmlchrome.browserAction.setPopup({tabId: tabId,popup: '/popup_2.html'})}}// 页面加载完成if (changeInfo.status === 'complete') {// do something}
})
需要注意的是通过**chrome.browserAction.setPopup**设置后的popup页面不会直接改变，重新打开popup图标页面改变。

3、直接修改popup页面location.href，无需刷新页面

这种方式popup.html的路径会直接改变，页面也会随着改变，不需要重新打开popup或者重新加载页面.

同样使用标题2中的页面示例：
popup.js

// do something逻辑判断console.log(chrome.runtime)// 获取/popup_1.html页面在扩展中的位置
chrome.runtime.getURL('/popup_1.html').then(url => {// url = chrome://extensions/xxxxx/popup_1.html// 直接修改当前popup页面的location.href页面直接改变，不需要重新打开扩展和重新刷新页面location.href = url
})

相关文章：

chrome扩展控制popup页面动态切换

文章目录 1、通过控制元素的显示隐藏达到popup页面切换的效果2、通过监听页面重新加载完成不同popup的切换3、直接修改popup页面location.href&#xff0c;无需刷新页面 1、通过控制元素的显示隐藏达到popup页面切换的效果 下面在mv2版本的API下完成 实际上通过控制页面元素实…...

编程日记 2023/7/30 2:14:45

【AI】《动手学-深度学习-PyTorch版》笔记（三）：PyTorch常用函数

AI学习目录汇总 1、torch.arange 返回一维张量（一维数组），官网说明，常见的三种用法如下 输入：torch.arange(5) 输出：tensor([0, 1, 2, 3, 4]) 输入：torch.arange(5, 16) 输出：tensor([ 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]) 输入：torch.arange(1, 25, 2) …...

编程日记 2023/7/30 2:13:43

某文化馆三维建模模型-glb格式-三维漫游-室内导航测试

资源描述 某文化馆某个楼层的三维建模模型&#xff0c;glb格式&#xff0c;适用于three.js开发&#xff0c;可用来做一些三维室内漫游测试和室内导航测试 资源下载地址...

编程日记 2023/7/30 2:12:41

网络安全 Day19-计算机网络基础知识04（网络协议）

计算机网络基础知识04&#xff08;网络协议&#xff09; 1. ARP1.1 ARP通讯原理1.2 arp欺骗1.3 ARP欺骗与预防1.4 排查ARP病毒 2. DHCP工作原理&#xff08;自动分配内网IP&#xff09;3. TCP协议三次握手、四次挥手原理4. DNS协议工作原理 1. ARP Linux查看arp&#xff1a;ar…...

编程日记 2023/7/30 2:11:41

Verilog语法学习——LV5_位拆分与运算

LV5_位拆分与运算 题目来源于牛客网 [牛客网在线编程_Verilog篇_Verilog快速入门 (nowcoder.com)](https://www.nowcoder.com/exam/oj?page1&tabVerilog篇&topicId301) 题目 题目描述&#xff1a; 现在输入了一个压缩的16位数据&#xff0c;其实际上包含了四个数据…...

编程日记 2023/7/30 2:10:39

❤️创意网页：创意动态画布~缤纷移动涂鸦~图片彩色打码

✨博主&#xff1a;命运之光 &#x1f338;专栏&#xff1a;Python星辰秘典 &#x1f433;专栏&#xff1a;web开发&#xff08;简单好用又好看&#xff09; ❤️专栏&#xff1a;Java经典程序设计 ☀️博主的其他文章&#xff1a;点击进入博主的主页 前言&#xff1a;欢迎踏入…...

编程日记 2023/7/30 2:09:36

数值分析第六章节 用Python实现解线性方程组的迭代法

参考书籍&#xff1a;数值分析 第五版 李庆杨 王能超 易大义编 第5章 解线性方程组的迭代法 文章声明&#xff1a;如有发现错误&#xff0c;欢迎批评指正 文章目录 迭代法的基本概念雅可比迭代法与高斯-塞格尔迭代法雅可比迭代法高斯-塞格尔迭代法 迭代法的基本概念 6.1.1引言…...

编程日记 2023/7/30 2:08:35

【低代码专题方案】使用iPaaS平台下发数据，快捷集成MDM类型系统

01 场景背景 伴随着企业信息化建设日趋完善化、体系化&#xff0c;使用的应用系统越来越多&#xff0c;业务发展中沉淀了大量数据。主数据作为数据治理中枢&#xff0c;保存大量标准数据库&#xff0c;如何把庞大的数据下发到各个业务系统成了很棘手的问题。 传统的数据下发方…...

编程日记 2023/7/30 2:07:34

驱动开发 day3 (模块化驱动启动led,蜂鸣器,风扇,震动马达)

模块化驱动启动led,蜂鸣器,风扇,震动马达并加上Makefile 封装模块化驱动&#xff0c;可自由安装卸载驱动&#xff0c;便于驱动更新(附图) 1.安装模块驱动同时初始化各个设备并使能 2.该驱动会自动创建驱动节点. 3.通过c函数程序输入控制各个设备 4.卸载模块驱动 //编译驱动…...

编程日记 2023/7/30 2:06:32

数据结构与算法基础-学习-27-图之最短路径之Dijkstra（迪杰斯特拉）算法

一、最短路径应用案例 例如从北京到上海旅游&#xff0c;有多条路可以到目的地&#xff0c;哪条路线最短&#xff0c;哪条路线最省钱&#xff0c;就是典型的最短路径问题。 二、最短路径问题分类 最短路径问题可以分为两类&#xff0c;第一类为&#xff1a;两点间最短路径。第…...

编程日记 2023/7/30 2:05:31

Windows Server 2012 能使用的playwright版本

由于在harkua_bot里面使用到了playwright&#xff0c;我的服务器又是Windows Server 2012 R2&#xff0c;最新版playwright不支持Windows Server 2012 R2&#xff0c;支持Windows Server 2016以上&#xff0c;所以有了这个需求 https://cdn.npmmirror.com/binaries/playwright…...

编程日记 2023/7/30 2:04:30

css实现溢出变为省略号

单行文本溢出省略 text-overflow&#xff1a;规定当文本溢出时&#xff0c;显示省略符号来代表被修剪的文本 white-space&#xff1a;设置文字在一行显示&#xff0c;不能换行 overflow&#xff1a;文字长度超出限定宽度&#xff0c;则隐藏超出的内容overflow设为hidden&#…...

编程日记 2023/7/30 2:03:28

nginx如何配置两个服务器的连接

nginx 中通过server_name listen的方式配置多个服务器 nginx配置两个站点的windows操作方法&#xff0c;双域名双站点...

编程日记 2023/7/30 2:02:26

Linux环境Arduino IDE中配置ATOM S3

linux选择ubuntu发行版。 硬件设备有多小呢&#xff1a; 功能超级强大。 之前的ROS1和ROS2案例已经全部移植完成并测试结束&#xff08;三轮纯人力校验&#x1f60e;&#xff09;。 官网文档信息非常非常好&#xff1a; https://docs.m5stack.com/zh_CN/quick_start/atoms3…...

编程日记 2023/7/30 2:01:25

【C#】.Net Framework框架下的Authorize权限类

2023年&#xff0c;第31周&#xff0c;第3篇文章。给自己一个目标&#xff0c;然后坚持总会有收货&#xff0c;不信你试试&#xff01; 在C#的.NET Framework中&#xff0c;你可以使用Authorize类来处理权限认证。Authorize类位于System.Web.Mvc命名空间中&#xff0c;它提供了…...

编程日记 2023/7/30 2:00:24

C++ list底层实现原理

文章目录 一、list底层实现二、类构成三、构造函数四、迭代器五、获取第一个元素六、获取最后一个元素七、插入元素 一句话&#xff1a;list底层实现一个双向循环链表 一、list底层实现 一个双向循环链表 二、类构成 class list : protected_List_base_list_base.lsit_impl…...

编程日记 2023/7/30 1:59:23

C#实现数字验证码

开发环境&#xff1a;VS2019&#xff0c;.NET Core 3.1&#xff0c;ASP.NET Core API 1、建立一个验证码控制器 新建两个方法Create和Check&#xff0c;Create用于创建验证码&#xff0c;Check用于验证它是否有效。 声明一个静态类变量存放列表&#xff0c;列表中存放包含令…...

编程日记 2023/7/30 1:58:22

Git的常用命令以及使用场景

文章目录 1.前言2.工作区,暂存区,版本库简介3.Git的常用命令4.版本回退5.撤销修改6.删除文件7.总结 1.前言 在学习Git命令之前,需要先了解工作区,暂存区和版本库这三个概念 2.工作区,暂存区,版本库简介 在使用Git进行版本控制时&#xff0c;有三个重要的概念&#xff1a;工作…...

编程日记 2023/7/30 1:57:20

tcp keepalive

tcp keepalive用于检查两者之间的链路是否正常&#xff0c;或防止链路断开。 一旦建立了TCP连接&#xff0c;该连接被定义为有效&#xff0c;直到一方关闭它。一旦连接进入连接状态&#xff0c;它将无限期地保持连接状态。但实际上&#xff0c;这种联系不会无限期地持续下去。如…...

编程日记 2023/7/30 1:56:18

PP-Matting: AI高精度图像前景Matting，让抠图轻而易举

分割和Matting的一个重要区别是：分割返回的是像素分类标签，其结果是整型数据；而Matting返回的是属于前景或背景的概率P，从而在前景与背景交互区域产生渐变的效果，使得抠图更加自然。Matting分割模型训练完成后，对于原始图像每个位置上的像素，都将生成一个表示其前景透明…...

编程日记 2023/7/30 1:55:17

Python基础语法：访问器@property和修改器@xxx.setter

一、简介 访问器和修改器也是装饰器的一种。 property: 访问器&#xff0c;getter xxx.setter: 修改器&#xff0c;setter 访问器和修改器的根本目的是想将属性私有化&#xff0c;提供getter&setter去访问。 访问器和修改器能够做到访问属性其实在调用getter方法&#xff0…...

编程新知 2026/5/26 4:28:21

Veo 2提示词效能跃迁实战（工业级Prompt链构建全图谱）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Veo 2提示词编写的核心范式演进 Veo 2作为新一代视频生成模型&#xff0c;其提示词&#xff08;prompt&#xff09;工程已从早期的“关键词堆叠”转向结构化、语义分层与意图对齐的复合范式。这一演进并非简…...

编程新知 2026/5/26 3:44:10

UE4动画蓝图实战：用双骨骼IK节点搞定手部穿模，附完整蓝图节点截图

UE4动画蓝图实战&#xff1a;双骨骼IK节点解决手部穿模的完整指南在角色动画开发中&#xff0c;手部穿模问题堪称"视觉杀手"。想象一下精心设计的角色挥拳时&#xff0c;拳头直接穿过墙壁或敌人身体——这种违和感足以毁掉整个场景的沉浸感。本文将彻底解决这个痛点&…...

编程新知 2026/5/26 3:24:07

终极艾尔登法环帧率解锁指南：轻松突破60FPS限制

终极艾尔登法环帧率解锁指南&#xff1a;轻松突破60FPS限制 【免费下载链接】EldenRingFpsUnlockAndMore A small utility to remove frame rate limit, change FOV, add widescreen support and more for Elden Ring 项目地址: https://gitcode.com/gh_mirrors/el/EldenRing…...

编程新知 2026/5/26 0:50:40

LizzieYzy：你的智能围棋教练，让AI分析变得简单有趣 [特殊字符]

LizzieYzy&#xff1a;你的智能围棋教练&#xff0c;让AI分析变得简单有趣 &#x1f3af; 【免费下载链接】lizzieyzy LizzieYzy - GUI for Game of Go 项目地址: https://gitcode.com/gh_mirrors/li/lizzieyzy 还在为复盘找不到关键点而烦恼吗&#xff1f;想提升棋力却…...

编程新知 2026/5/25 22:42:37

ZMJS，把 JavaScript 解释器放进 SAP ABAP 应用服务器之后，很多扩展思路会变得不一样

我今天看这个 oisee/zmjs 仓库时，最吸引人的不是它把 JavaScript 语法做进了 ABAP，而是它选择了一条非常 SAP 的路线，纯 ABAP、无外部依赖、无 Kernel Module、以类和接口的形式运行在 SAP 应用服务器内部。仓库自己的定位很直接，ZMJS 是一个面向 SAP ABAP 的 Mini JavaScr…...

编程新知 2026/5/25 21:17:35

三步让小爱音箱秒变AI语音助手：MiGPT深度配置指南

三步让小爱音箱秒变AI语音助手&#xff1a;MiGPT深度配置指南 【免费下载链接】mi-gpt &#x1f3e0; 将小爱音箱接入 ChatGPT 和豆包&#xff0c;改造成你的专属语音助手。 项目地址: https://gitcode.com/GitHub_Trending/mi/mi-gpt 还在为小爱音箱的"人工智障&q…...

编程新知 2026/5/25 20:16:01

League Akari：如何通过LCU API实现英雄联盟游戏流程的智能化管理？

League Akari&#xff1a;如何通过LCU API实现英雄联盟游戏流程的智能化管理&#xff1f; 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit Leag…...

编程新知 2026/5/25 19:29:59

收藏｜2026年AI大模型就业爆发！岗位暴涨12倍、月薪6W+，小白零基础入门指南

2026年&#xff0c;AI已从“科技热点”彻底变为职场“刚需赛道”&#xff01;脉脉高聘人才智库最新发布的《2026年1-2月中高端人才求职招聘洞察》&#xff0c;用硬核数据揭示行业真相&#xff1a;AI人才成招聘市场顶流&#xff0c;岗位量、薪资双双爆发式增长。尤其对零基础小白…...

编程新知 2026/5/25 17:21:51

Sora 2原生MP4输出不兼容Premiere Pro？揭秘H.264/H.265封装层4大隐性缺陷（附MediaInfo诊断模板+自动修复脚本）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Sora 2原生MP4输出不兼容Premiere Pro的根源定位 Sora 2生成的原生MP4文件虽符合ISO/IEC 14496-14规范&#xff0c;但其底层封装结构与Adobe Premiere Pro对时间码、元数据及视频流编码参数的严格校验逻辑存在…...

编程新知 2026/5/25 16:21:57