- 博客(37)
- 收藏
- 关注
RSS订阅原创 浏览插件开发，浏览器插件开发相关api
这篇文章介绍了如何开发一个浏览器插件，实现鼠标移动和点击时的粒子动画效果。主要内容包括：插件安装方法（通过Chrome扩展程序管理页面加载未打包项目）、项目目录结构、核心manifest.json配置文件的编写、弹出控制面板(popup.html)的设计，以及通过content_scripts注入脚本实现页面交互效果。插件支持功能开关控制，并利用chrome.storage进行状态存储。该插件基于Canvas实现，性能较好，适用于Chrome及基于Chromium的浏览器。
2025-10-26 15:45:34
877
原创 插件开发常用api整理
本文整理了Chrome插件开发中的常用API，涵盖核心架构、用户界面、标签页管理、窗口管理、存储、网络请求、内容脚本、通知、上下文菜单、书签历史、下载管理以及权限隐私等12个方面。核心API包括chrome.runtime（生命周期管理）、chrome.tabs（标签页操作）、chrome.storage（数据存储）等；用户界面API涉及工具栏按钮和页面操作；网络请求部分介绍了拦截和声明式请求两种方式。文章还区分了Manifest V2和V3的API差异，并提供了各功能模块的基础方法调用示例，为插件开发者提
2025-10-26 15:27:00
597
原创 Node.js命令行工具开发
摘要：本文介绍了如何开发一个Node.js命令行工具，类似npm create或npx命令。通过实例演示了创建模板项目和使用模板（如uniapp）的方法。文章详细讲解了项目初始化、package.json配置、命令行入口文件编写以及核心逻辑实现，包括交互式选择模板、项目创建流程和文件操作等。项目已发布到npm，提供源码和博文链接供参考。
2025-09-29 13:55:22
783
原创 前端网页打印指定区域/将页面下载为pdf
前端网页打印指定区域实现方案 该代码实现了一个前端网页打印指定区域的功能模块。主要特点包括： 使用iframe方式隔离打印内容，避免影响原页面 支持丰富的打印选项：标题、纸张尺寸、打印方向、边框设置等 智能处理样式：可选择包含全局样式，并自动加载外部样式表 提供打印前后回调函数，支持自定义处理 特殊元素处理：保留表单元素值，防止表格/图片跨页分割 支持响应式打印，确保打印内容质量 实现原理是将目标元素克隆到隐藏的iframe中，应用必要样式后触发浏览器打印功能。
2025-09-23 14:07:50
297
原创 从0开始搭建一套工具函数库,发布npm,支持commonjs模块es模块和script引入使用
从0开始。搭建一套自己的工具函数库，工程打包后支持commonjs模块的引入，es模块的引入。还支持script的形式引入。还支持工程化项目的unplugin-auto-import插件。并将打包结果发布到npm。这套模板也可以用于封装一些个性化的js库，不单单限于工具函数库的一套工程化模板。
2025-04-20 16:34:36
2056
3原创 手搓图片懒加载-图片预加载
当一个站点中某些页面的图片比较大时，会出现图片短暂的不显示，或者一部分一部分的显示出来。* 这种方式在首屏时因为没有滚动触发不了事件，首屏的图片也不会加载，解决办法就是开局手动调用一次。// 如果只触发一次的话在触发完成后就取消当前的el监听，提高性能。* 方案一 用事件监听的方式（缺点，事件高频触发导致性能不好）* 还是先上代码在讲道理 用上面图片懒加载来做案例。（来咯，客观你要的函数，请慢用）封装为函数，(小二，上代码)。// 判断元素是否在可视区域，// 方法二 观察者模式。
2023-02-22 12:13:58
177
原创 替换this(3种)
文章目录先准备数据call替换apply替换bind替换先准备数据 const newobj={ uname:'小明', age:22, jub(a,b,c){ console.log(`I an ${this.uname} age ${this.age}`) console.log(a,b,c) } } const obj={ uname:'小红', age:120 }
2022-05-23 15:25:56
614
原创 纯前端导出excel表格，axios下载文件流导出 （vue）
废话就不多说了，直接上代码，写完文章还得继续上班撸代码首先安装好要用的插件，这里我使用的是 js-export-excel和jszip两个库，一个用来处理表格导出一个用来做压缩，如果你不需要做压缩可以不用安装jszip npm i js-export-excel npm i jszip接下来先封装几个工具函数，方便调用 关键在第三步的配置项，可以先看看第三步文件流导出都是大佬，这段代码我就不多逼逼了，有些是为了方便项目中用，你要是看它不爽就盘它，嘿嘿 export function
2022-05-09 15:14:26
612
原创 基于crypto-js的加解密
上码 let CryptoJS = require('crypto-js') export const aesUtil = { //获取key，如果在不需要解密的情况可以直接使用这个获取key genKey: function (length = 16) { let random = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; let str = ""; for (l
2022-04-17 21:37:51
447
原创 网页全屏显示以及退出全屏，包括单个元素全屏显示
在一些场景中我们希望网页能够全屏显示，这样可展示的区域更大，也就是隐藏浏览器的地址栏和页签栏，上代码为了方便调用直接进行了封装，同时也做了兼容性处理，（如果你觉得我代码写的垃圾让你不知道该怎么调，那你就看最后面有调用说明代码） // 判断是否处于全屏显示 export function isFullScreen() { if (document.fullscreen) { return true; } else if (document.mozFullScreen) {
2022-04-17 17:17:25
1619
原创 js对象深度克隆
js对象深度克隆为什么要深度克隆对象？嗯，我不晓得我不知道，不要问我，你居然问这种问题1. 上深度克隆之前先来研究研究其它的克隆方式，如果你急要直奔主题那就往下滑到最后去看深度克隆ES6语法糖的方式 var obj={ uname:'小明', jub:{ age:123, obj:{ uname:12 } } } var obj1={...obj} obj1.
2022-04-15 17:43:38
1553
原创 for循环中使用var和let的区别，以及加上定时器后执行出不同的效果
for循环中使用var和let的区别，以及加上定时器后执行出不同的效果？这道题面试的时候经常被问，太闹心了，社会我x哥，是人狠话不多，直接上代码 // 使用var定义循环条件变量, +定时器 输出 3个3 for (var i = 0; i < 3; i++) { setTimeout(() => { console.log(i) }, 0) } // 使用let定义循环条件变量, +定时器 输出
2022-04-15 16:58:17
1181
原创 H5高性能拖拽效果
有时候需要在网页做一个可拖拽的容器，比如消息窗口或者其它的内容，那这个时候该咋办，目前我好像没有发现有第三方的拖拽组件，于是我自己写了一个，上代码封装一下，直接调用addCommandCard() { // 这里也可以用元素获取的方式 let addCommandCard = this.$refs.mesgBox; let createtime = ""; addCommandCard.addEventListener("mousedown", (even
2022-04-15 16:36:15
459
原创 前端如何优雅的展示10万条数据？
假设现在后端给你 10 万条数据,你如何优雅的展示在页面?虽然现实中这种是不可能的,但是有些面试会问,这里个人总结了八种方法,但是我只写了五种准备工作,简单搞个架子<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <
2022-04-14 16:26:37
2807
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人