文章索引 VSCode插件开发全攻略（一）概览VSCode插件开发全攻略（二）HelloWordVSCode插件开发全攻略（三）package.json详解VSCode插件开发全攻略（四）命令、菜单、快捷键VSCode插件开发全攻略（五）跳转到定义、自动补全、悬停提示VSCode插件开发全攻略（六）开发调试技巧VSCode插件开发全攻略（七）WebViewVSCode插件开发全攻略（八）代码片段... 阅读全文

前言关于HTTPS，基本上你想知道的都在这里了。本文原标题《HTTPS原理与实践》，下图是本文配套PPT的目录截图： 前言原理篇认识HTTPS什么是HTTPSSSL/TLSHTTPS的优点HTTPS的缺点HTTPS原理小明和小红的故事单向认证回到小明和小红的故事双向认证引申思考如何保证公钥不被篡改为何正式传输时使用对称加密CA何为CACA如果作恶怎么办顶级证书私钥泄露怎么办SSL证书证书的种... 阅读全文

写在前面我花了将近一个多月的时间断断续续写下这篇博文，并精心写下完整demo，所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面：https://github.com/sxei/chrome-plugin-demo ，大家可以直接下载下来运行。 另外，本文图片较多，请耐心等待加载完毕。 本文目录： demo部分截图： 鉴于有很多网友有交流学习Chrome插件的诉求... 阅读全文

仅仅是通过判断userAgent中是否存在weixin或者wechat还不够，今天突然发现ios的微信这2个都没有，正确的判断方法是判断是否有MicroMessenger，为了稳妥起见3个都一起判断： /** * 获取当前APP名称 */getCurrentAppName() { const ua = navigator.userAgent.toLowerCase(); if (ua... 阅读全文

导语：任何新技术、新产品都是有一定适用场景的，它可能在当下很流行，但它不一定在任何时候都是最优解。 前言最近几年微前端很火，火到有时候项目里面用到了iframe还要偷偷摸摸地藏起来生怕被别人知道了，因为担心被人质疑：你为什么不用微前端方案？直到最近笔者接手一个项目，需要将现有的一个系统整体嵌入到另外一个系统（一共20多个页面），在被微前端坑了几次之后，回过头发现，iframe真香！ q... 阅读全文

前言之前一直用的是腾讯云免费SSL证书，但是只有1年有效期，而且不支持通配符证书（Wildcard Certificates，类似*.haoji.me），所以使用上非常不方便，甚至最近证书过期几个月了都懒得去更换。最近实在是被逼的没办法了，研究一下永久有效证书。 基本原理市面上的免费证书一般都只有3个月有效期，一般都是通过一些自动重新申请的脚本来实现“永久”有效。其中最出名的应该是Let's E... 阅读全文

本文作废，推荐阅读另外写的一篇10分钟搞定支持通配符的永久有效免费HTTPS证书。 安装snapd添加EPEL简单理解EPEL是一个软件库的扩展，官方软件源有限，安装snapd一定要先添加EPEL。 sudo dnf install epel-releasesudo dnf upgrade # 这一步将比较耗时 通过yum安装snapd通过snap安装certbot通过certbot安装证书... 阅读全文

一直非常不喜欢类似clipboardjs的使用方式（至于依赖flash的ZeroClipboard.js那就更不推荐了），和DOM耦合太重，使用起来非常不方便： <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> Copy t... 阅读全文

回顾特殊地方... 阅读全文

背景浏览器层面的esModule在设计的时候不太完美，只能import外部JS，如果某个<script type="module">是通过内联代码直接写在HTML里面的反而没法导入： <script type="module">export default 123;</script><script type="module">// 无法导入上面的模... 阅读全文

怀念啊我们的青春啊不知从何时开始，脚手架和构建似乎成了前端绕不过去的一个步骤，本来HTML+JS+CSS组合只需一个带文本高亮的简易编辑器就可以直接开始写代码了，现在却要天天和node、python、npm、webpack(vite)、babel、sass(less)等一堆的玩意儿打交道，有点情怀的“老程序员”可能都会怀念那个没有构建、一个Ctrl+S就可以直接保存生效甚至直接去发布的感觉。越来越... 阅读全文

方法首先，找到你想批量添加的图片地址，比如 https://www.iconfont.cn/collections/detail?cid=22664 ： 打开控制台，粘贴如下代码执行，稍等几秒钟，不出意外的话180个图片已经全部添加到购物车了 [...document.querySelectorAll('.block-icon-list li span[title="添加入库"]')].f... 阅读全文

如题Chrome不知道从哪个版本开始，更改了一个非常傻逼的默认设置，默认隐身窗口禁用第三方cookie，这给各大网站带来非常大的不便。 什么是禁用第三方cookie，比如我在www.baidu.com 跨域调用 www.qq.com 的接口，即便我非常信任这个接口，明确这个接口是可信任的，且添加了SameSite=None、credentials: 'include'等设置，任然无法把 www.... 阅读全文

强制下载通过给某个URL设置Content-Disposition头部，可以强制浏览器把它当成一个附件去下载，而不是在浏览器中打开，甚至还可以指定下载保存的文件名，其优先级高于有类似作用的download属性： Content-Disposition: inlineContent-Disposition: attachmentContent-Disposition: attachment; fi... 阅读全文

网上几乎所有文章都是错的网上有2类文章： 一类是toFixed科普文章，像W3CSchool直接说toFixed是按照四舍五入，这属于完全错误的，甚至MDN都完全没有提到如何舍入；还有一类是介绍toFixed的坑的文章，这类文章一般都有部分错误，网上绝大部分文章都指出，toFixed是按照银行家舍入法来执行的，实际测试并非如此。 所谓银行家舍入法：四舍六入五看情况，五后非零直接入，五后为零... 阅读全文

写在前面无意中发现从百度搜索打开的页面可以通过document.referrer拿到上一个页面的完整URL（地址格式一般类似https://www.baidu.com/link?url=xxxxxxxx），而通过谷歌搜索打开的新页面只能拿到上一个页面的域名、不包括path部分（形如https://www.google.com/），猜测一定是百度做了什么特殊处理，测试了一下： 测试代码： fet... 阅读全文

如上图：已知config是从接口读取的，由于历史原因前端把图片宽度写死了，现在需要替换图片，但是宽度变了，问：如何在不改前端代码只改接口的情况下将图片宽度修改成指定宽度。 答案： 一开始想到的方法绕了一个大弯： var config = { src: 'xxx.png', tip: '这是提示<script>setTimeout(function(){var a ... 阅读全文

误区一：是否区分协议和端口受阮一峰某篇博客里面错误描述影响： 网上大把的文章都说Cookie作用域由protocol、domain、和port决定，实际上这是大错特错的，比如下面这位同学，有人在网上问“cookie作用域区分协议和端口吗”，然后他像贴圣旨一样把阮一峰博客的截图贴一下： 这篇博客是它16年写的，尽管评论里面有很多人指出来这个地方写错了，但他时至今日仍没有更正过来。 ... 阅读全文

2行代码生成指定长度字符串/** * 生成长度为len的包含a-z、A-Z、0-9的随机字符串 */function generateStr(len = 18) { // 一行代码生成0-9、A-Z、a-z、总长度为62的字符数组 var arr = [...new Array(62)].map((item, i) => String.fromCharCode(i + (i ... 阅读全文

本以为下面这行代码就可以实现： (new Array(5)).map((item, idx) => idx) 但是： 至于为什么会是这样，我没有仔细追究，如果有知道的朋友欢迎指出。 正确方法： // 第一种方法Array.apply(null, {length: 10}).map((item, idx) => idx)// 第二种方法[...new Array(10)].... 阅读全文