Chrome 114 带着侧边栏扩展来了

效果展示

manifest.json

{"manifest_version": 3,"name": "ChatGPT学习","version": "0.0.2","description": "ChatGPT,GPT-4,Claude3,Midjourney,Stable Diffusion,AI,人工智能,AI","icons": {"16": "./src/images/logo.png","48": "./src/images/logo.png","128": "./src/images/logo.png"},"side_panel": {"default_path": "./src/views/panel.html","openPanelOnActionClick": true},"permissions": ["sidePanel"],"action": {"default_title": "点击打开ChatGPT学习侧边栏"},"background": {"service_worker": "./src/scripts/service-worker.js"},"content_scripts": [{"matches": ["http://*/*", "https://*/*"],"exclude_matches": ["https://chat.xutongbao.top/*","http://localhost:*/*"],"css": ["./dist/lib/layui.css", "./dist/css/app.css"],"js": ["./dist/lib/layui.js", "./dist/js/app.js", "./index.js"]}],"content_security_policy": {"extension_pages": "script-src 'self'; object-src 'self';"}
}

目录结构

src/scripts/service-worker.js

chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch((error) => console.error(error))

 

panel.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ChatGPT学习</title><link rel="stylesheet" href="./index.css">
</head>
<body><iframe src="https://chat.xutongbao.top" class="m-side-panel-iframe"></iframe>
</body>
</html>

index.css

body{position: absolute;top: 0;left: 0;right: 0;bottom: 0; margin: 0;padding: 0;overflow: hidden;}
.m-side-panel-iframe{width: 100%;height: 100%;border: 0;}

官方文档:

https://developer.chrome.com/docs/extensions/reference/api/sidePanel?hl=zh-cn#description

人工智能学习网站:

https://chat.xutongbao.top

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/284628.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux系统------------Mysql数据库介绍、编译安装

目录 一、数据库基本概念 1.1数据(Data) 1.2表 1.3数据库 1.4数据库管理系统(DBMS) 数据库管理系统DBMS原理 1.5数据库系统&#xff08;DBS) 二、数据库发展史 1、第一代数据库 2、第二代数据库 3、第三代数据库 三、关系型数据库 3.1关系型数据库应用 3.2主流的…

Photoshop 工具使用详解(全集 · 2024版)

全面介绍 Photoshop 工具箱里的工具&#xff0c;点击下列表格中工具名称或图示&#xff0c;即可查阅工具的使用详解。 移动工具Move Tool移动选区、图层和参考线。画板工具Artboard Tool创建、移动多个画布或调整其大小。moVe快捷键&#xff1a;V 矩形选框工具 Rectangular Mar…

如何屏蔽来自一些可疑IP对网站的访问

前段时间我们的网站遭受到黑客的攻击&#xff0c;导致网站出现乱码以及丢失了一些网站文件。在我们将网站全部迁移至Hostease虚拟主机后&#xff0c;为了再次避免这种情况发生&#xff0c;我们对网站做了一些安全防护&#xff0c;除了安装一些安全插件之外&#xff0c;我们还屏…

QGIS编译(跨平台编译)056:PDAL编译(Windows、Linux、MacOS环境下编译)

点击查看专栏目录 文章目录 1、PDAL介绍2、PDAL下载3、Windows下编译4、linux下编译5、MacOS下编译1、PDAL介绍 PDAL(Point Data Abstraction Library)是一个开源的地理空间数据处理库,它专注于点云数据的获取、处理和分析。PDAL 提供了丰富的工具和库,用于处理激光扫描仪、…

C++ Primer Plus第十七章笔记

目录 1. C输入和输出概述 1.1 流、缓冲区和iostream 1.2 重定向 2. 使用cout进行输出 2.1 修改显示时使用的计数系统 2.2 调整字段宽度 2.3 填充字符 2.4 设置浮点数的显示精度 2.5 打印末尾的0或小数点 2.6 setf() 2.7 头文件iomanip 3. 使用cin进行输入 3.1 cin…

ubuntu18安装opensips3.4,开启ws/wss/http接口模块

、如果是centos 7安装则使用yum 命令。 添加库地址注意系统类型&#xff0c;选择对应的系统类型和版本 curl https://apt.opensips.org/opensips-org.gpg -o /usr/share/keyrings/opensips-org.gpg echo "deb [signed-by/usr/share/keyrings/opensips-org.gpg] https:/…

百度文心一言(ERNIE bot)API接入Android应用

百度文心一言&#xff08;ERNIE bot&#xff09;API接入Android应用实践 - 拾一贰叁 - 博客园 (cnblogs.com) Preface: 现在生成式AI越来越强大了&#xff0c;想在android上实现一个对话助手的功能&#xff0c;大概摸索了一下接入百度文心一言API的方法。 与AI助手交换信息的…

数据库索引

目录 索引的概念 索引的作用 索引的副作用 创建索引的原则 适合建索引的场景 索引的创建方式 查看索引 索引的分类 1.普通索引 2.唯一索引 3.主键索引 4.组合索引 5.全文索引 删除索引 索引的概念 索引是一个排序的列表&#xff0c;在这个列表中存储着索引的值和…

【Codesys】DINT类型环形计数处理,计数到2的64次方

最近有遇到编码器计数的计数处理&#xff0c;抓取编码器锁存的数值只能在DINT类型范围内&#xff0c;是从-2147483648到2147483647数值&#xff0c;但是现场会有正向多圈的情况。此时需要记录这个数的位置值。就需要记录多圈计数下&#xff0c;圈数的处理。 PROGRAM FB_DintCir…

python闭包详解(实例)

“闭包”这个词语相信大多数学过编程的同学并不陌生&#xff0c;但是有时候理解起来还是有一定难度。 先看定义&#xff1a;闭包是由函数和与其相关的引用环境组合而成的实体。比如参考资源中就有这样的的定义&#xff1a;在实现深约束时&#xff0c;需要创建一个能显式表示引…

外包干了4年,技术退步明显.......

先说一下自己的情况&#xff0c;大专生&#xff0c;19年通过校招进入杭州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

抖音视频批量下载软件可导出视频分享链接|手机网页视频提取|视频爬虫采集工具

解锁抖音视频无水印批量下载新姿势&#xff01; 在快节奏的生活中&#xff0c;抖音作为时下最热门的短视频平台之一&#xff0c;吸引着广大用户的目光。而如何高效地获取喜欢的视频内容成为了许多人关注的焦点。Q:290615413现在&#xff0c;我们推出的抖音视频批量下载软件&…

c语言——通讯录(文件版)

大家好我是小锋&#xff0c;今天我们来实现一个通讯录 准备工作 为了让我们的代码具有条理我们要建立三个文件一个文件用来放头文件一个文件用来放函数的实现&#xff0c;一个文件用来实现通讯录的基本逻辑。 然后我们其他的.c文件要使用头文件时我们要用# include<tongxu…

【Linux】进程管理

目录 一、进程创建 二、进程等待 1. 阻塞等待 2. 非阻塞等待 3. status位图 三、进程替换 1. exec* 系列函数 2. 高级语言程序替换 一、进程创建 进程是操作系统进程资源分配的最小单位&#xff0c;每一个进程都有自己独立的PID&#xff0c;以及进程控制块PCB。 父进…

【SAP-ABAP】CO01保存时错误DBSQL_DUPLICATE_KEY_ERROR

找到该表的主键OBJNR&#xff0c;事务代码SM56中查看当前缓冲到该key的号码段&#xff0c;事务代码SNRO修改对象名称OBJNR编号范围状态。 事务代码SM13查看数据更新记录

数据可视化-ECharts Html项目实战(5)

在之前的文章中&#xff0c;我们学习了如何设置滚动图例&#xff0c;工具箱设置和插入图片。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢 数据可视化-ECharts…

nodejs社区垃圾分类管理平台的设计与实现python-flask-django-php

近些年来&#xff0c;随着科技的飞速发展&#xff0c;互联网的普及逐渐延伸到各行各业中&#xff0c;给人们生活带来了十分的便利&#xff0c;社区垃圾分类管理平台利用计算机网络实现信息化管理&#xff0c;使整个社区垃圾分类管理的发展和服务水平有显著提升。 语言&#xf…

qt 实现 轮播图效果,且还有 手动 上一页和下一页 已解决

QT中有 轮播图的需求&#xff0c;按照正常html版本 。只需要配置数组就能搞定&#xff0c;但是c qt版本 应该用什么了。 第一想到的是采用定时器。 // 定时器初始化{m_pTime new QTimer(this);m_pTime->start(4 * 1000);//启动定时器并设置播放时间间隔m_pAutoFlag true;/…

vs2019新建Qt工程中双击 .ui 文件无法打开

vs2019 中创建的 Qt 工程&#xff0c;在使用的过程中&#xff0c;经常会有&#xff1a;双击 .ui 文件&#xff0c;闪退的情况&#xff0c;也即 .ui 文件无法打开&#xff01; 针对该问题的详细解决步骤如下&#xff1a; 1、右击该 .ui 文件&#xff0c;选择“打开方式” 2、…

②零基础MySQL数据库-MySQL约束

作用 表在设计的时候加入约束的目的就是为了保证表中的记录完整性和有效性&#xff0c;比如用户表有些列的值&#xff08;手机号&#xff09;不能为空&#xff0c;有些列的值&#xff08;身份证号&#xff09;不能重复 分类 主键约束(primary key) PK 自增长约束(auto_increme…