- 博客(198)
- 收藏
- 关注
RSS订阅原创 Chrome插件开发【Tabs】
本文介绍了Chrome扩展开发中Tabs API的常用方法，包括查询、创建、更新、移动、刷新和关闭标签页。首先说明了使用Tabs API需要在manifest.json中声明"tabs"权限。详细讲解了各方法的参数和使用示例：query()查询条件组合、create()创建新标签页、update()修改标签属性、move()调整标签位置、reload()刷新页面、remove()关闭标签页。特别指出异步操作需用async/await确保执行顺序。文章提供了完整的代码示例，适合开发者快速掌
2025-08-15 11:23:41
953
原创 Chrome插件开发【消息通信】
本文详细介绍了Chrome插件内部通信的两种方式：短连接和长连接通信。短连接通信使用一次性消息API如chrome.runtime.sendMessage()和chrome.tabs.sendMessage()，适用于简单消息交互；长连接通信则通过chrome.runtime.connect()建立持久连接，使用Port对象进行持续通信。文章分别从内容脚本与其他脚本、其他脚本之间、其他脚本与内容脚本三种场景，结合具体代码示例（如content-script.js与background.js的交互）演示了通信
2025-08-13 11:06:35
805
原创 Chrome插件开发【manifest.json】
本文介绍了Chrome扩展的manifest.json文件结构，分为常用结构和完整结构两部分。常用结构包含必填项(manifest_version/name/version)和核心配置(action/content_scripts/permissions等)，详细说明了各字段的作用和用法。完整结构展示了更多可选配置项，包括side_panel/options_ui/content_security_policy等高级功能。特别解析了内容脚本(content-scripts)的半隔离特性，以及权限控制、资源访
2025-08-12 15:29:21
912
原创 Chrome插件开发【Service Worker练手小项目】
本文介绍了两个Chrome扩展开发项目：智能定时页面刷新器和跨标签通信中心。第一个项目通过Service Worker实现定时刷新功能，包含popup界面、定时逻辑和消息通信处理。第二个项目实现跨标签页通信，包括标签页管理、消息发送和群组功能，使用了content script与后台通信。两个项目都涉及manifest配置、popup界面开发、后台逻辑处理和Chrome API使用，展示了Chrome扩展开发的核心技术。文章还指出了在onAlarm事件中使用tabs.query时可能遇到的BUG问题。
2025-08-11 19:04:25
868
原创 Chrome插件开发【Service Worker】
本文介绍了Chrome扩展中ServiceWorker的核心概念和使用方法。ServiceWorker作为扩展的事件处理脚本，在V3版本中采用按需激活机制，可通过manifest.json配置并支持模块化。文章详细解析了ServiceWorker的生命周期（注册、激活、运行、终止、唤醒各阶段）及对应事件处理，包括onInstalled、onStartup等关键事件的监听方式和应用场景。同时提供了消息通信、异步响应处理、事件去抖等技术实现方案，以及使用chrome.storage和indexedDB进行状态持
2025-08-11 14:20:15
959
原创 一文搞懂git操作
本文介绍了Git的基本使用方法和核心概念。主要内容包括：Git的安装与初始配置（设置用户名和邮箱）、创建和管理Git仓库（init、add、commit等命令）、版本控制（reset回退版本）、远程仓库操作（remote、push、pull、clone等）。重点讲解了分支管理，包括创建分支（checkout/branch）、合并分支（merge）、推送分支（push）以及分支策略（--no-ff参数）。还介绍了撤销修改（checkout）、删除文件（rm）等常用操作，并比较了fetch和pull命令的区别。
2025-08-09 13:11:48
920
原创 Chrome插件快速上手
本文介绍了浏览器插件的基本结构和工作原理。插件主要功能包括修改网页内容、增强浏览器功能和与外部服务交互，其核心由manifest.json配置文件、后台脚本(content-script.js)、弹窗UI(popup)等组成。文章详细解析了manifest.json的配置项，包括版本号、名称、权限等关键参数，并通过一个"页面信息查看器"插件的完整示例，展示了插件从目录结构到代码实现的完整流程。该示例插件能够显示当前页面标题和URL，并具备随机修改页面背景色的功能，演示了插件各组件间的协同
2025-08-08 09:35:37
754
原创 http协议学习【持续更新】
HTTP是超文本传输协议，是WWW数据通信的基础，采用客户端-服务器模型。HTTP请求由请求行、请求头、空行和请求体组成，支持GET/POST/PUT/DELETE等方法。服务器响应包含状态行、响应头、空行和响应体，使用状态码指示处理结果(1XX-5XX)。HTTP通过TCP/IP传输数据，具有无连接、无状态和媒体独立特性。请求响应过程包括建立连接、发送请求、处理请求、返回响应和关闭连接五个步骤。Content-Type头定义多种数据格式，如text/html、application/json等。
2025-08-06 11:37:35
984
原创 一文讲懂Cookie、Session、Token【附实例】
本文介绍了Web开发中Cookie、Session和Token的使用方法及区别。Cookie是存储在浏览器的小型文本数据，服务端通过响应头设置，浏览器自动携带；Session存储在服务端，通过SessionID识别用户；Token是服务端生成的加密字符串，用于身份验证。文章详细演示了Flask框架中三者的实现方式：Cookie的创建与删除、Session的构建与存储、Token的生成与传输。同时比较了三者的特点：Cookie由浏览器自动管理，Session依赖服务端存储，Token由客户端自主管理。每种方式
2025-08-05 15:07:47
980
原创 文本换行问题
摘要：当前端使用textarea输入多行文本并渲染到div时，常遇到换行丢失问题。解决方案有两种：1）用JavaScript将换行符替换为<br>（需使用innerHTML，存在XSS风险）；2）推荐使用CSS属性white-space:pre-wrap（保留换行且安全）。对比pre和pre-wrap：前者保留格式但不自动换行，后者既保留格式又自动换行，适用于不同场景。CSS方案无需修改文本内容，能有效避免安全隐患。
2025-08-03 22:01:18
405
原创 面试笔记【16:9区域问题】
摘要：本文介绍了两种用纯CSS实现16:9固定区域的方法。方法一使用padding技巧：通过设置父容器高度为0，padding-bottom为56.25%（9/16比例），配合绝对定位子容器实现。建议使用标准盒模型(content-box)以保证精确比例。方法二使用CSS新属性aspect-ratio:16/9，直接控制宽高比，代码更简洁。两种方法都能实现响应式的16:9比例，其中padding方法兼容性更好，aspect-ratio则是更现代的解决方案。（149字）
2025-07-31 18:11:23
279
原创 Vue中nextTick()的理解
本文深入解析了JavaScript事件循环机制和Vue的异步更新策略。第一部分详细介绍了执行栈、任务队列（宏任务与微任务）以及事件循环的工作原理，并通过示例展示了代码执行顺序。第二部分阐述了Vue采用异步更新的原因及实现方式，重点讲解了nextTick的原理和使用场景，指出其本质是将回调放入微任务队列。文章特别强调nextTick的正确使用时机，并分析了在微任务队列中不同任务顺序对结果的影响，为开发者在数据变更后获取最新DOM状态提供了实用指南。
2025-05-29 11:00:37
1520
原创 使用Vue3制作一款个性化上传组件
本文介绍如何基于Vue3开发个性化文件上传组件。通过隐藏原生input标签，使用FileReader API实现图片预览，并配置验证函数检查文件类型和大小。重点讲解了头像上传组件的实现，包括文件选择器配置、图片预览和样式定制。同时对比了FileReader的readAsDataURL方法和URL.createObjectURL的特性，前者适合小型文件预览，后者更高效但需手动释放内存。该方案解决了UI库定制困难的问题，提供了灵活的文件上传解决方案。
2025-05-25 10:53:34
1130
原创 HTTP相关
首先，并不是一种约束，仅仅是一种风格，它基于HTTP协议，利用HTTP的各种方法和URL来实现资源的创建、读取、更新、删除等操作：GET请求被用于获取资源，相当于数据库的SELECT：POST请求用于增加资源，相当于数据库的INSERT：PUT请求用于修改资源，相当于数据库的UPDATE：DELETE请求用于删除资源，相当于数据库的DELETE。
2025-04-23 15:23:35
986
原创 JavaScript---原型和原型链
对象有__proto__属性(Object.create(null)除外)，函数有__proto__属性，数组也有__proto__属性，只要是引用类型，就有__proto__属性，指向其原型只有函数有prototype属性，指向new操作符加调用该函数创建的对象实例的原型对象。
2025-04-10 14:12:57
1079
原创 JavaScript---变量作用域
也就是在函数内部声明的变量，在函数外部无法访问，在函数内部，该变量都可以被访问。类似，在块级作用域内声明的常量，仅在该块级作用域内可访问。如果内联 JavaScript 代码创建了新的变量，这些变量会成为。在同一函数内部的顶部声明，那么三者具备相同的作用域”循环等）内声明的变量，仅在该块级作用域内可访问。”，它允许在变量声明之前就使用该变量。，这意味着在块级作用域（如。具备不同的作用域，但它们都。甚至在声明之前也可访问(声明常量，就必须同时进行。
2025-04-08 10:00:06
951
原创 JavaScript---HTML标签的修改
<body><div id="myDiv" data-color-custom="red" data-size="large">带有自定义数据属性的元素</div><button onclick="changeDataAttributes()">修改自定义数据属性</button><script></script></body>
2025-04-07 09:41:51
1357
原创 JavaScript---event事件处理对象
event对象是在事件触发时由浏览器自动创建的一个对象，它封装了与该事件相关的所有信息当为元素绑定事件处理函数后，一旦相相应的事件触发，浏览器就会自动将这个event对象作为默认参数传递给事件处理函数。
2025-04-07 08:47:21
1214
原创 【一】Vue组件开发教程
子组件主动的向父组件传递消息：使用子组件被动的接收父组件传递消息：使用子组件初始化的接收父组件传递消息：使用和只能在中使用，不需要被导入和可以对传入值进行类型约束test:{default: '测试',else {})type：指定prop的类型，例如String、Number、Boolean、Object、Array、Funcdefault：指定prop默认值required：表明该prop是否为必需项validator。
2025-03-21 20:55:52
644
原创 【二】JavaScript能力提升---this对象
对于对于第一点，不管在什么地方使用，它必然会指向某个对象。由于在中，一切皆对象，运行环境也是对象，所以函数都是在某个对象下运行，而就是“但因为，很难确定this到底指向哪个对象，这是最让我们感到困惑的地方。
2025-03-09 22:42:38
1021
原创 【一】JavaScript能力提升---类对象、call()、apply()、bind()
使用class关键字定义类对象，它使用方法用于初始化实例对象的属性，还可以包含其他方法来定义对象的行为。三者都可以改变函数的this指向三者都可以传入参数，apply是数组call是参数列表。apply和call是一次传入，而bind可以分为多次传入bind是返回绑定this之后的函数，applycall是立即执行。
2025-03-04 22:34:43
1182
原创 JavaScript---数组内置方法与日期内置方法汇总
返回值为True，表示a与b交换位置。返回值为False，表示a与b不交换位置。”对象，该对象包含数组中每个索引的。此方法更改数组长度(修改原数组)
2025-02-28 19:58:08
653
原创 前端浏览器开发中的浏览器兼容问题【持续更新】
浏览器兼容问题指：“不同浏览器(IE、Chrome、FireFox、Safari、Edge)对同一种CSS样式或同一段JS代码的解析和渲染会有所不同”，从而用户在不同浏览器环境下的访问呈现的页面效果不一致。浏览器兼容问题分为：“CSS兼容问题”、“JavaScript兼容问题造成浏览器兼容问题的根本原因是：“不同浏览器使用的内核不同”，不过随着时代的发展Webkit内核逐渐统一市场，浏览器兼容问题也越来越少。浏览器内核IETridentChromeBlinkFirefoxGecko。
2025-02-25 22:23:51
1783
原创 Vue+ElementPlus的一些问题汇总
在使用中的组件做侧边栏时，鼠标点击某个选项后，跳转到新的页面，同时对应的侧边栏应该高亮显示，如下图所示：点击“”后，“”高亮变蓝色，同时控制跳转新的页面，具体区域由下图所示：但是由于依靠来确定当前选定的标签，因此当我们“”时，会出现变成你所设置的标签这个时候我们需要根据的变化，来重置选中标签使用存储，可以完美解决上述缺点。
2025-02-25 13:21:02
931
原创 Javascript异步编程【大白话理解】
Promise是一种处理异步操作的对象，它支持“链式调用”和“操作处理PromisePending等待中初始状态，既不是成功，也不是失败Resolved已完成)：表示操作成功完成(未出错)Rejected已拒绝)：表示操作失败Promise状态一旦改变，就不会再变。
2025-02-16 14:51:28
1122
原创 一位前端小白的2024总结
2024年总的来说，作者的2024目标实现90%以上，还算可以，而在2025年，希望小伙伴们也可以和作者一样，给自己确定一些目标，尽可能的去实现它，如此一年又一年的实现目标，最终你会得到你想要的！
2025-01-23 16:38:47
1238
1
原创 计算机网络第五章-【新】
用户数据报协议UDP只在IP的数据报服务之上增加了很少一点的功能，这就是“复用”和“分组”的功能以及“差错检测”的功能，UDP的主要特点UDP是无连接的，即发送数据之前不需要建立连接，减少了开销和发送数据之前的时延UDP使用尽最大努力交付，即不保证可靠交付，因此主机不需要维持复杂的连接状态表UDP是面向报文的，发送方的UDP对应用程序交下来的报文，在添加首部后就向下交付IP层UDP没有拥塞控制，因此网络出现的拥塞不会使源主机的发送速率降低UDP支持一对一一对多多对一多对多的交互通信UDP。
2024-12-07 17:40:06
1217
原创 Vue中使用＜Transition＞与＜TransitionGroup＞
传统HTML中，我们可以使用CSS属性：“animation”与“transform”进行动画处理，而Vue为我们提供了两种内置组件：“”与“在Vue文件中可以直接使用与使用Vue为静态页面增强时，请使用“
2024-11-28 21:08:29
1915
原创 Flask+Vue3+宝塔面板部署前后端【全网独家！！！】
最近博主刚学完，迫不及待的需要敲一个项目，前端使用开发，后端由于博主没有学过，于是想到使用“”作为后端，关于搭建在全网搜索也没有见一个讲明白的，为此博主再成功搭建完成后，特地记录此博客，方便大家学习在这里我们分两块讲解：“”与“”，道理基本一致，但些许细节不同。
2024-11-20 20:02:16
1964
8
原创 计算机网络-第四章【新】
互联网的设计思路：“”(IP数据报和IP分组是网络在发送分组时不需要先建立连接，每一个分组(IP数据报)独立发送，因此不提供的承诺”提供可靠的服务，但是不适合互联网，适合电信网。
2024-11-19 21:22:03
692
原创 ES6标准-Promise对象
随后，我们调用promise.thn()回调函数，这是一个。构造函数接受一个函数作为参数，该函数的两个参数分别是。可以接收两个回调函数作为参数，第一个回调函数是。是异步编程的一种解决方案，比传统解决方案(这时，前一个回调函数，有可能返回的还是一个。函数，那么它们的参数会被传递给回调函数。，可以指定一组按照次序调用的回调函数。”的消息，用来演示异步操作的滞后性。，并不一定要提供，两个函数都接收。对象的状态发生变化，才会被调用。状态的回调函数，第二个参数是。状态后，再抛出错误，也不会被。
2024-11-08 21:12:18
1578
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人