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

学会制作极简搜索浏览器 —— 并将 ChatGPT 接入浏览器

news 2025/11/5 8:39:13

前期回顾

Vue3 + Ts + Vite + pnpm 项目中集成 —— eslint 、prettier、stylelint、husky、commitizen_0.活在风浪里的博客-CSDN博客搭建VIte + Ts + Vue3项目并集成eslint 、prettier、stylelint、huskyhttps://blog.csdn.net/m0_57904695/article/details/129950163?spm=1001.2014.3001.5502

本次目标：✌

1：🚚 制作一个自己的极简浏览器，并尝试运行！

2：💎在浏览器合并几个或多个ChartGPT，加快搜索，直达答案！

3：💎🚧 做一个墓室跑酷游戏，并尝试玩一把！

🚕 佛伯乐：详细吗？能看懂吗？

🙉 小帅：必然详细，一遍过，一遍懂，极简！我说的是真的！🚀

👙👄 小美：那我想要参考下源码可以吗？你能把游戏源码放上面吗？我能不能线上预览一下？

🙉 小帅：Of course, my little baa north nose，源码在下面，可以线上运行，不过进入页面我设置了密码，你可以找我要，免费分享！！！

👄 小美：哦买噶！那太方便了，我现在能看吗？只是在PC可以运行吗？

🙉 小帅：有手机版！游戏兼容移动、PC！网络环境不受限、目前不支持水果机子😹

念及此！直接开始~

线上预览：主页

仓库地址源码在主页资源！

手机安装包在主页资源，目前不支持水果机子，哎，难办，难办我看就别办了！🔌哈哈

https://download.csdn.net/download/m0_57904695/87697108

index

图例：

index.css

index

<html><head></head><body><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><metaname="color-scheme"content="light dark"/><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/><title>主页</title><link rel="stylesheet" href="homepage.css" /><style></style><div class="frosted-glass" id="gesture-indicator"></div><div id="content"><div class="search_part"><a class="logo" href="" onclick="window.via.cmd(257);" title="书签"><img class="smaller" src="./logo.svg"/></a><form onsubmit="return search()" class="search_bar" title="搜索"><button onclick="search()" id="search_submit" value="" aria-label="搜索"><div class="search icon"></div></button><span><inputautofocus="autofocus"class="search"onfocus="showButton()"onblur="hideButton()"type="text"value=""autocomplete="off"id="search_input"title="搜索"placeholder="活在风浪里________请键入..."/></span></form></div><div id="bookmark_part"><div id="box_container"><div class="box"><p class="title" aria-hidden="true" style="background: #ff0000"></p><divclass="overlay"style="background: url('https://img.51miz.com/preview/element/00/01/04/46/E-1044648-0962B463.jpg')no-repeat;background-size: cover;background-position: center center;"></div><p class="url" aria-hidden="true">AI聊天</p><a href="./Ai/login.html" title="ChartGPT镜像集合"></a></div><div class="box"><p class="title" aria-hidden="true" style="background: hsla(0, 0%, 0%, 0)"></p><divclass="overlay"style="background: url('https://ts1.cn.mm.bing.net/th/id/R-C.1a5a53f1ea9569eb2426b65026110ac1?rik=260ASfM%2b4Stsrg&riu=http%3a%2f%2ficon.chrafz.com%2fuploads%2f151023%2f1-151023205A4619.png&ehk=kJwPRrb8Dsb5aTPUFYNzr4NfDM5%2byqIm7HiEvNaHY68%3d&risl=&pid=ImgRaw&r=0')no-repeat;background-size: cover;background-position: center center;"></div><p class="url" aria-hidden="true">游戏<a href="youxi/index.html" title="墓地逃亡"></a></p></div><div class="box"><p class="title" aria-hidden="true" style="background: hsla(0, 0%, 0%, 0)"></p><divclass="overlay"style="background: url('./img/author.jpg') no-repeat center center/ cover"></div><p class="url" aria-hidden="true">CSDN</p><ahref="https://blog.csdn.net/m0_57904695?spm=1000.2115.3001.5343"title="最新最全一手资讯--我的CSDN"></a></div><div class="box"><p class="title" aria-hidden="true" style="background: #1a729b"></p><divclass="overlay"style="background: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.DwpRopQ0mXFmzwabbrso5gHaHf?pid=ImgDet&rs=1')no-repeat;background-size: cover;background-position: center center;"></div><p class="url" aria-hidden="true">免费音乐</p><a href="https://tools.liumingye.cn/music/#/" title="Burger工具站"></a></div></div></div><script type="text/javascript">function showButton() {document.getElementById("search_submit").style.display = "block";}function hideButton() {"" == document.getElementById("search_input").value &&(document.getElementById("search_submit").style.display = "none");}function search() {var a = document.getElementById("search_input");if ("" != a.value) {try {searchText(a.value);} catch (b) {alert(b);}a.value = "";document.getElementById("search_submit").style.display = "none";document.activeElement.blur();}return !1;}function fadeIn(a) {if (a && a.style)var b = Math.max(0.05, parseFloat(a.style.opacity)),d = setInterval(function () {1 <= b && clearInterval(d);a.style.opacity = Math.min(1, b);b += 0.1 * b;}, 6);}function isGestureDisabled() {return (document.activeElement && "search_input" == document.activeElement.id) ||(window.via && !window.via.cmd(515))? !0: 0 != (document.documentElement.scrollTop || document.body.scrollTop);}function initGesture(d) {var b = document.getElementById("content"),e = 0,f = 1,g = !1,a = 0;d.addEventListener("touchstart",function (c) {g = isGestureDisabled();e = c.touches[0].pageY;a = 0;},!1);d.addEventListener("touchmove",function (c) {g ||(0 < a /*&&(document.body.style.position="fixed")*/,(a = c.touches[0].pageY - e),0 < a &&98 > a &&((f = Math.max(0.1, 1 - Math.min(1, a / 98))),(b.style.opacity = f),(b.style.transform = "translateY(" + a + "px)")));},!1);d.addEventListener("touchend",function (c) {/*document.body.style.position="static";*/if (0 != a) {if (88.2 < a) alert("不使用Via浏览此网页，你再下拉也打不开地址栏！");try {window.via.cmd(514);} catch (h) {}b.style.transform = "translateY(0px)";fadeIn(b);}},!1);}initGesture(document.getElementById("gesture-indicator"));initGesture(document.getElementById("content"));</script><script charset="gbk" src="opensug.js"></script><script type="text/javascript">function show(str) {var searchbox = document.getElementById("search_input");searchbox.innerHTML = str;searchbox.blur();search();}var params = {XOffset: 0,YOffset: 0,fontColor: "#666666",fontColorHI: "#FFF",fontSize: "14px",borderColor: "#eee",bgcolorHI: "#7B90E3",sugSubmit: false,};BaiduSuggestion.bind("search_input", params, show);</script><script>function searchText(text) {// 必应location.href = "https://cn.bing.com/search?q=" + text;// 百度//   location.href = "https://www.baidu.com/s?ie=UTF-8&wd==" + text;}</script></div></body>
</html>

目前调用的是必应：

图例：

index.css

* {padding: 0;margin: 0;box-sizing: border-box;
}
html {height: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);-webkit-focus-ring-color: rgba(0, 0, 0, 0);
}
body {min-height: 100%;max-width: 100%;width: 600px;background: translate;margin: auto;text-align: center;
}
#gesture-indicator {height: 100%;width: 100%;position: absolute;top: 0;bottom: 0;z-index: 0;overflow: hidden;word-break: break-all;
}
#content {position: absolute;max-width: 600px;width: 100%;
}
#content {top: 25%;transition: 0.14s;
}
@media only screen and (min-height: 250px) {#content {top: 62px;}
}
@media only screen and (min-height: 350px) {#content {top: 87px;}
}
@media only screen and (min-height: 450px) {#content {top: 135px;}
}
@media only screen and (min-height: 650px) {#content {top: 195px;}
}
@media only screen and (min-height: 850px) {#content {top: 255px;}
}
.logo {font-size: 28px;font-weight: bold;white-space: normal;word-wrap: break-word;overflow: auto;text-decoration: none;color: #1b1b1b;
}
img.smaller {height: 72px;border-radius: 18px;object-fit: cover;
}
span {display: block;overflow: hidden;padding-left: 5px;vertical-align: middle;
}
.search_part {margin-bottom: 20px;
}
.search.icon {color: #1b1b1b;width: 12px;height: 12px;border: solid 2px currentColor;border-radius: 100%;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);text-align: center;margin: auto;
}
.search.icon:before {content: "";position: absolute;top: 10px;left: 3px;height: 5px;width: 2px;background-color: currentColor;
}
.search_bar {display: table;vertical-align: middle;width: 90%;max-width: 600px;margin: 15px auto 0;
}
#search_input {height: 46px;padding: 0 12px;width: 100%;outline: none;border: none;font-size: 15px;background-color: transparent;
}
#search_submit {display: none;outline: none;height: 46px;width: 56px;float: right;font-size: 15px;font-weight: bold;border: none;background-color: transparent;padding: 0 10px;
}
.search_bar {border: 1px solid rgba(0, 0, 0, 0.24);border-radius: 24px;background: rgba(255, 255, 255, 0);
}
#search_input,
#search_submit {color: #1b1b1b;
}
.bdSug_wpr {overflow-y: scroll !important;max-height: 30% !important;background: rgba(255, 255, 255, 1) !important;border: 1px solid !important;border-color: rgba(0, 0, 0, 0.15) !important;border-radius: 0 0 24px 24px;
}
.bdSug_wpr table {background: none !important;
}
.bdSug_wpr td {margin: 4px !important;padding: 10px !important;color: #1b1b1b;background: none;
}
.bdSug_sd {height: 0px !important;
}
.bdSug_app {display: none !important;
}
#bookmark_part {text-align: center;max-width: 600px;background-color: transparent;margin: 0 auto;padding: 0;border-radius: 0px;
}
#box_container {text-align: left;margin: 0 auto;font-size: 0;
}
.box {margin: 4px 9px 4px;width: 46px;border: 0;position: relative;display: inline-block;text-align: center;
}
.box a {width: 100%;height: 100%;position: absolute;left: 0;top: 0;
}
.overlay {position: absolute;left: 0;top: 0;border-radius: 23px;width: 46px;height: 46px;
}
.title {border-radius: 23px;color: #ffffff;width: 46px;line-height: 46px;height: 46px;font-size: 15px;
}
.url {margin: 2px 0 0;width: 46px;height: 20px;line-height: 20px;white-space: normal;word-wrap: break-word;overflow: hidden;text-overflow: clip;-o-text-overflow: clip;ms-text-overflow: clip;color: #1b1b1b;font-size: 10px;
}
@media only screen and (min-width: 128px) {#box_container {width: 64px;}
}
@media only screen and (min-width: 192px) {#box_container {width: 128px;}
}
@media only screen and (min-width: 256px) {#box_container {width: 192px;}
}
@media only screen and (min-width: 320px) {#box_container {width: 256px;}
}
@media only screen and (min-width: 384px) {#box_container {width: 320px;}
}
@media only screen and (min-width: 448px) {#box_container {width: 384px;}
}
@media only screen and (min-width: 512px) {#box_container {width: 448px;}
}
@media only screen and (min-width: 576px) {#box_container {width: 512px;}
}
.sort-ghost {opacity: 0.3;
}

更新中...

学会制作极简搜索浏览器 —— 并将 ChatGPT 接入浏览器

前期回顾 Vue3 Ts Vite pnpm 项目中集成 —— eslint 、prettier、stylelint、husky、commitizen_0.活在风浪里的博客-CSDN博客搭建VIte Ts Vue3项目并集成eslint 、prettier、stylelint、huskyhttps://blog.csdn.net/m0_57904695/article/details/129950163?spm1001.2…...

编程日记 2023/4/17 16:48:45

NumPy 秘籍中文第二版：六、特殊数组和通用函数

原文：NumPy Cookbook - Second Edition 协议：CC BY-NC-SA 4.0 译者：飞龙在本章中，我们将介绍以下秘籍： 创建通用函数查找勾股三元组用chararray执行字符串操作创建一个遮罩数组忽略负值和极值使用recarray函数创建一…...

编程日记 2023/4/17 16:43:43

各种交叉编译工具链的区别

目录 1 命名规则 2 实例 2.1 arm-none-eabi-gcc 2.2 arm-none-linux-gnueabi-gcc 2.3 arm-eabi-gcc 2.4 armcc 2.5 arm-none-uclinuxeabi-gcc 和 arm-none-symbianelf-gcc 3 gnueabi和gnueabihf的区别(硬浮点、软浮点) 4 Linaro公司出品的交叉编译工具链 5 ARM公司出…...

编程日记 2023/4/17 16:38:42

密度聚类算法（DBSCAN）实验案例

密度聚类算法（DBSCAN）实验案例描述 DBSCAN是一种强大的基于密度的聚类算法，从直观效果上看，DBSCAN算法可以找到样本点的全部密集区域，并把这些密集区域当做一个一个的聚类簇。DBSCAN的一个巨大优势是可以对任意形状…...

编程日记 2023/5/31 14:17:39

第07章_面向对象编程(进阶)

第07章_面向对象编程(进阶) 讲师：尚硅谷-宋红康（江湖人称：康师傅） 官网：http://www.atguigu.com 本章专题与脉络 1. 关键字：this 1.1 this是什么？ 在Java中，this关键字不算难理解…...

编程日记 2023/4/17 16:28:39

异常的讲解（2）

目录 throws异常处理基本介绍 throws异常处理注意事项和使用细节自定义异常基本概念自定义异常的步骤 throw 和throws的区别本章作业第一题第二题第三题第四题 throws异常处理基本介绍 1)如果一个方法(中的语句执行时)可能生成某种异常，但是…...

编程日记 2023/4/17 16:23:38

jvm内存结构

1. 栈程序计数器 2. 虚拟机栈 3. 本地方法栈 4. 堆 5. 方法区 1.2栈内存溢出栈帧过多导致栈内存溢出 /*** 演示栈内存溢出 java.lang.StackOverflowError* -Xss256k*/ public class Demo1_2 {private static int count;public static void main(String[] args) {try {meth…...

编程日记 2023/4/17 16:18:37

要刹车？生成式AI迎新规、行业连发ChatGPT“警报”、多国考虑严监管

4月13日消息，据中国移动通信联合会元宇宙产业工作委员会网站，中国移动通信联合会元宇宙产业工作委员会、中国通信工业协会区块链专业委员会等，共同发布“关于元宇宙生成式人工智能（类 ChatGPT）应用的行业提示”。提示内…...

编程日记 2023/4/17 16:13:35

轻松掌握Qt FTP 机制：实现高效文件传输

轻松掌握Qt FTP：实现高效文件传输一、简介（Introduction）1.1 文件传输协议（FTP）Qt及其网络模块（Qt and its Network Module）QNetwork:二、QNetworkAccessManager上传实例（Qt FTP Upl…...

编程日记 2023/4/17 16:08:34

用AI帮我写一篇关于FPGA的文章，并推荐最热门的FPGA开源项目

FPGA定义 FPGA（Field Programmable Gate Array）是一种可编程逻辑器件，可以在硬件电路中实现各种不同的逻辑功能。与ASIC（Application Specific Integrated Circuit，特定应用集成电路）相比，FPGA…...

编程日记 2023/4/17 16:03:33

从兴趣或问题出发

当我们还沉寂在移动互联网给生活带来众多便利中，以 ChartGPT 为代表的 AI 时代已彻底到来。科技的发展，时刻在改变着我们的生活，我们需要不断地学习新知识和掌握新技能才能享受变化带来的便利，以及自身不被社会淘汰。因此&#…...

编程日记 2023/4/17 15:58:31

C++ | 探究拷贝对象时的一些编译器优化

👑作者主页：烽起黎明 🏠学习社区：烈火神盾 🔗专栏链接：C 文章目录前言一、传值传参二、传引用传参三、传值返回拷贝构造和赋值重载的辨析四、传引用返回【❌】五、传匿名对象返回六、总计与提炼前言在传参…...

编程日记 2023/4/17 15:53:31

linux工具gcc/g++/gdb/git的使用

目录 gcc/g 基本概念指令集函数库 （重要） gdb使用基本概念指令集项目自动化构建工具make/makefile 进度条小程序编辑 git三板斧创建仓库 git add git commit git push git status git log gcc/g 基本概念 gcc/g称为编译器…...

编程日记 2023/4/17 15:48:29

Direct3D 12——纹理——纹理

纹理不同于缓冲区资源，因为缓冲区资源仅存储数据数组，而纹理却可以具有多个mipmap层级(后文有介绍)，GPU会基于这个层级进行相应的特殊操作，例如运用过滤器以及多重采样。支持这些特殊的操作纹理资源都被限定为一些特定的数据格式…...

编程日记 2023/4/17 15:43:28

产品经理必读 | 俞军产品经理十二条军规

最近在学习《俞军产品方法论》，觉得俞军总结的十二条产品经理原则非常受用，分享给大家。 01. 产品经理首先是产品的深度用户自己设计的产品都没使用过的产品经理，如何明白用户使用的问题，如何解决问题，所以产品经理肯…...

编程日记 2023/4/17 15:38:27

【机器视觉1】光源介绍与选择

文章目录一、常见照明光源类型二、照明光源对比三、照明技术3.1 亮视野与暗视野3.2 低角度照明3.3 前向光直射照明3.4 前向光漫射照明3.5 背光照明-测量系统的最佳选择3.6 颜色与补色示例3.7 偏光技术应用四、镜头4.1 镜头的几个概念4.2 影响图像质量的关键因素4.3 成像尺寸4.4…...

编程日记 2023/4/17 15:33:26

【三十天精通Vue 3】第十一天 Vue 3 过渡和动画详解

✅创作者：陈书予 🎉个人主页：陈书予的个人主页 🍁陈书予的个人社区，欢迎你的加入: 陈书予的社区 🌟专栏地址: 三十天精通 Vue 3 文章目录引言一、Vue 3 过度和动画概述1.1过度和动画的简介二、Vue 3 过度2…...

编程日记 2023/4/17 15:28:22

基于多种流量检测引擎识别pcap数据包中的威胁

在很多的场景下，会需要根据数据包判断数据包中存在的威胁。针对已有的数据包，如何判断数据包是何种攻击呢？ 方法一可以根据经验，对于常见的WEB类型的攻击，比如SQL注入，命令执行等攻击，是比较容…...

编程日记 2023/4/17 15:23:21

第02章_变量与运算符

第02章_变量与运算符讲师：尚硅谷-宋红康（江湖人称：康师傅） 官网：http://www.atguigu.com 本章专题与脉络 1. 关键字（keyword） 定义：被Java语言赋予了特殊含义，用做专门…...

编程日记 2023/4/17 15:18:20

仅三行就能学会数据分析——Sweetviz详解

文章目录前言一、准备二、sweetviz 基本用法1.引入库2.读入数据3.调整报告布局总结前言 Sweetviz是一个开源Python库，它只需三行代码就可以生成漂亮的高精度可视化效果来启动EDA(探索性数据分析)。输出一个HTML。如上图所示，它不仅能根据性别、年龄等…...

编程日记 2023/4/17 15:13:17

synchronized 学习

学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...

编程新知 2025/10/23 14:31:06

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...

编程新知 2025/10/6 4:03:40

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/10/29 10:05:16

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录问题现象问题原因解决办法问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。问题原因很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/9/24 19:23:45

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程新知 2025/11/1 0:56:40

Linux云原生安全：零信任架构与机密计算

Linux云原生安全：零信任架构与机密计算构建坚不可摧的云原生防御体系引言：云原生安全的范式革命随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

Matlab | matlab常用命令总结

常用命令一、基础操作与环境二、矩阵与数组操作（核心）三、绘图与可视化四、编程与控制流五、符号计算 (Symbolic Math Toolbox)六、文件与数据 I/O七、常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

k8s业务程序联调工具-KtConnect

概述原理工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...

编程新知 2025/10/30 5:58:19

安卓基础（aar）

重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...

编程新知 2025/10/2 5:21:30

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...

编程新知 2025/8/16 15:34:02

index

图例：

index.css

相关文章：