谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序，可以为用户提供额外的功能和定制化的体验。 谷歌浏览器插件通常由HTML、CSS和JavaScript组成，非常利于前端开发者。 开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。 要开发谷歌浏览器插件，开发者通常需要创建一个包含 清单文件（manifest.json）、背景脚本（background script）、内容脚本（content script） 等文件的项目结构。清单文件是插件的配置文件，包含插件的名称、版本、描述、权限以及其他相关信息。背景脚本用于处理插件的后台逻辑，而内容脚本则用于在网页中执行JavaScript代码。 谷歌浏览器插件可以实现各种功能，例如添加新的工具栏按钮、修改网页内容、捕获用户输入、与后台服务器进行通信等。开发者可以通过谷歌浏览器插件API来访问浏览器的各种功能和数据，实现各种定制化的需求。 插件开发涉及的要点： ![图片](https://static.developers.pub/adcad461f2f64cf4bceb343b4fb118f...

一、忘了最基础的东西 前端开发的核心构建在三大基石技术上：HTML、CSS和JavaScript。回想起多年前，前端开发者常被戏称为“切图仔”，但就是这样的角色，通过精湛的CSS技巧，能够实现各种复杂的交互和特效，展现出前所未有的网页魔法。这是那些专注于服务端开发的工程师所难以企及的领域。 因此，前端工程师这一职业逐渐崭露头角，早期的培训班甚至设立了专门的课程来传授这些技能。然而，随着时间的推移，UI组件库和框架变得越来越普及，HTML和JavaScript的重要性依旧被人们所认可，但CSS技能却逐渐被边缘化，甚至有所忽视。 在一次 代码走查 中，发现一个拥有三四年前端开发经验的同事，连CSS最基本的类型选择器都掌握不熟练。这一现象令人感到忧虑。 二、令人无语的代码 在一次对 useState 的使用场景进行治理的过程中。发现了一段感觉很无语的代码。代码我简化一下如下所示： import React, { useState } from 'react'; import { Input } from 'antd'; import type { FC

前言 只有了解用户，我们才能服务好用户，而最接近用户的我们，自然要承担起更多的责任。 那么在一个企业中，我们要如何去了解用户呢？ 最直接有效的方式就是了解用户的行为，了解用户在网站中做了什么，呆了多久。 而如何去实现这一操作，这就涉及到我们前端的埋点了。 埋点方式 在聊如何进行埋点前，我们先介绍下什么是埋点？ 所谓'埋点'是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。. 比如用户某个icon点击次数、观看某个视频的时长等等。 我们可以知道埋点是实际上是对特定事件或者行为的数据监控和上报， 常见的埋点上报方式有ajax，img，navigator.sendBeacon下面介绍下这三种埋点上报方式 基于ajax的埋点上报 介绍 因为埋点实际上是对关键节点的数据进行上报是和服务端交互的一个过程，所以我们可以和后端约定一个接口通过ajax去进行数据上报。 代码实现 我们可以封装一个方法，代码如下： function buryingPointAja

前言 最近，我们部门在开发一个组件库时，我注意到一些团队成员对使用TypeScript表示出了抵触情绪，他们常常抱怨说：“TypeScript太麻烦了，我们不想用！”起初，我对此感到困惑：TypeScript真的有那么麻烦吗？然而，当我抽时间审查队伍的代码时，我终于发现了问题所在。在这篇文章中，我想和大家分享我的一些发现和解决方案。 一、类型复用不足 在代码审查过程中，我发现了大量的重复类型定义，这显著降低了代码的复用性。 进一步交流后，我了解到许多团队成员并不清楚如何在TypeScript中复用类型。TypeScript允许我们使用 type 和 interface 来定义类型。 当我询问他们 type 与 interface 之间的区别时，大多数人都表示不清楚，这也就难怪他们不知道如何有效地复用类型了。 type 定义的类型可以通过交叉类型（ & ）来进行复用，而 interface 定义的类型则可以通过继承（ extends ）来实现复用。值得注意的是， type 和 interface 定义的类型也可以互相复用。下面是一些简单的示例： ...

在上一篇文章全景预览中，我们通过 Threejs 使用多种方式实现了全景预览的效果，以及俯瞰效果的场景动画，但是这都是在单个场景中实现的；也有读者评论说讲一下多场景下的场景过渡效果是如何实现的，那么本文我们就来学习一下多场景的过渡效果。 在实现多场景前，我们先来了解three.js中一个重要的概念： 离屏渲染 ；只有理解了这个概念，我们才能够在后续实现多场景的过渡效果。 ❝本文的全景过渡效果可以点击https://gallery.xieyufei.com/case/panorama/multi查看 ❞ 离屏渲染 离屏渲染指的是将渲染结果暂时存在GPU内部的帧缓存中，而不是直接显示在画布上，这样做的好处是可以对渲染结果进行后期处理，如添加滤镜、反射折射、当成纹理应用在几何体等等。 在three.js中，一共有3种离屏渲染的类： WebGLMultisampleRenderTarget WebGLCubeRenderTarget WebGLRenderTarget 在普通的渲染中，我们把scene场景保存到canvas画布的默认帧缓冲区，也就...

分享一个 CSS 小技巧 在平时开发中，经常会遇到这样一种问题：当打开一个弹窗时，后面的页面是可以滚动的，演示如下 那么，该如何锁定页面的滚动呢？ 一、传统的实现方式 传统的方式其实也不复杂，就是在打开弹窗时阻止滚动就行了，通常是改变 overflow 属性 <pre data-line="21" <section <span </span <span </span <span </span </section <code data-line="21" <span <span const</span <span openModal</span <span =</span <span (</span <span )</span <span = </span <span {</span <br/ </span <span <span document</span <span .</span <span body<...

跨标签通信也有很多实际的应用场景，比如： 1. 共享登录状态：当用户在一个标签页中登录后，其他打开的标签页需要及时获取到登录状态，以保持一致的用户体验。在这种情况下，可以使用浏览器的localStorage或sessionStorage来存储登录状态，并通过监听storage事件来实现不同标签页之间的状态同步。 2. 实时通知和消息推送：如果用户在一个标签页上收到了新消息或通知，可以通过跨标签页通信将该消息或通知传递给其他标签页。一种常见的处理方式是使用浏览器的localStorage或IndexedDB来存储未读消息或通知，然后通过监听storage事件或定时轮询来检查新消息或通知的变化。 3. 跨标签页数据共享：有时候需要在不同的标签页之间共享一些数据，例如购物车数据、选项设置等。这可以通过在localStorage或IndexedDB中存储数据，并借助storage事件或定时轮询来实现数据的同步更新。 4. 标签页之间的导航同步：当用户在一个标签页中进行导航操作（例如点击链接或提交表单）时，其他标签页可能也需要跟随导航到相应的页面。这可以通过在标签页之间发送消息或共享状态来实...

Grid（网格）布局是最强大的 CSS 布局方案，用于构建二维布局。Grid 布局将页面划分成一个个网格，可以任意组合不同的网格，实现各种各样的布局。下面就来看看 CSS Grid 布局是如何使用的！ 1. Grid 布局概述 在解释 CSS Grid 布局之前，我们先来看看 Grid 布局中一些重要概念。 （1）网格容器 网格容器是所有网格项的父元素，网格容器会定义 display:grid 。下面例子中，类名为 container 的 div 元素就是网格容器： .container {  display: grid; } <div class="container"   <div class="item" 1</div   <div class="item" 2</div   <div class="item" 3</div   <div class="item" 4</div </div

写在前面 在编程世界中，代码不仅仅是让事情正常运转。 它就像一件讲述故事的艺术品。 当代码干净时，它就像一个美丽的、精心制作的雕塑，既美观又运行良好。 但在急于按期完成任务的过程中，有时团队不会太注意保持代码的整洁。 这可能会导致项目变得混乱、复杂，变得更加难以开展。 随着情况变得更糟，生产力也会下降。 然后，公司需要引进更多的人来提供帮助，这使得一切都变得更加昂贵。 那么，干净的代码是什么样的呢？ 它的代码易于理解，没有多余的部分，简单，并且可以通过测试。 换句话说，它是可读的、可重用的，并且在需要时易于更改。 为了帮助你编写出色的 JavaScript 代码，我将在今天的内容中与你分享 26 个写干净代码的技巧，这些技巧将指导你编写既优雅又高效的代码。 1. 变量 1.使用有意义且易于发音的变量名 // Bad const yyyymmdstr = moment().format("YYYY/MM/DD"); // Good const currentDate = moment().format("YYYY/MM/DD

一、背景 为什么会有这一篇文章？ 在日常/大促业务的“敏捷”开发过程中逐渐产生的几个疑惑，尝试地做出思考并想得到一些解决思路和方案。 总的来说，在前端开发和实践过程中，梳理了一些简单设计方案可以缓解当时让我 “头疼” 的几个敏捷迭代问题，并实践在项目迭代中。 因此个人对这篇文章有三个小目的： 1.梳理清楚个人真正疑惑开发迭代的问题在哪，解决的核心是什么，温故而知新。 2.提供前端架构设计的思考&方案，来缓解日常/大促敏捷迭代问题，希望可以得到一些拍砖～ 3.能让项目协同的同学能初步理解个人对于前端结构设计，方便他人理解这样搞的原因背景，快速磨平协同上的一些理解和开发成本 💰。 二、疑惑 先抛出主要的几点问题，在业务迭代过程中你为什么会疑惑（WHY），疑惑什么问题（WHAT），会以什么方式解决（HOW）？ 1.在业务需求的敏捷迭代中，单看逻辑和视觉的变更都不难，为何结合起来迭代如此花费成本？ 2.敏捷业务迭代中，我们能找出什么是 敏捷在变 ，什么是 敏捷不变 ？ 3.面向视图开发，还是面向数据开发？ 4.React ...

前言 threejs小练习，从头实现如何加载地理数据，并将其映射到三维场景中的对象上。 获取数据 在开始绘制图形前，需要一份包含地理信息数据，我们可以从阿里云提供的小工具获取：http://datav.aliyun.com/portal/school/atlas/area_selector 在范围选择器中，可以选择整个或者各个省份的地理信息数据。 生成图形 获取数据后，先分析一下JSON的结构 properties 中包含了名字、中心、质心等信息， geometry.coordinates 则是地理的坐标点，我们需要做的是将这些点连成线。 THREE.Shpae const createMap = (data) =  {   const map = new THREE.Object3D();    data.features.forEach((feature) =  {    const

背景 家里有一条狗🐶，很喜欢乘人不备睡沙发🛋️，恰好最近刚搬家 + 狗迎来了掉毛期 不想让沙发上很多毛。所以希望能识别到狗，然后播放“gun 下去”的音频📣。 需求分析 需要一个摄像头📷 利用 chrome 浏览器可以调用手机摄像头，获取权限，然后利用 video 将摄像头的内容绘制到 video 上。 通过摄像头实时识别画面中的狗🐶 利用 tensorflow 和预训练的 COCO-SSD MobileNet V2 模型进行对象检测。 将摄像头的视频流转化成视频帧图像传给模型进行识别 录制一个音频 识别到目标（狗）后播放音频📣 需要部署在一个设备上 找一个不用的旧手机📱， Android 系统 安装 termux 来实现开启本地 http 服务🌐 技术要点 1. 利用浏览器 API 调用手机摄像头，将视频流推给 video  const s

1. provide/inject provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。 使用 provide/inject 的好处是可以让我们在父组件和子孙组件之间传递数据，而无需手动进行繁琐的 props 传递。它可以让代码更加简洁和易于维护。 但需要注意的是，provide/inject 的数据是非响应式的，这是因为provide/inject是一种更加底层的 API，它是基于依赖注入的方式来传递数据，而不是通过响应式系统来实现数据的更新和同步。 具体来说，provide方法提供的数据会被注入到子组件中的inject属性中，但是这些数据不会自动触发子组件的重新渲染，如果provide提供的数据发生了变化，子组件不会自动感知到这些变化并更新。 如果需要在子组件中使用provide/inject提供的数据，并且希望这些数据能够响应式地更新，可以考虑使用V...

前言 随着 Web 技术的日新月异，JavaScript 也在不断地吸收新的特性和技术，以满足日益复杂和多样化的开发需求。在 2024 年，JavaScript 迎来了一系列令人瞩目的新功能，这些功能不仅提升了开发者的效率，也极大地丰富了 Web 应用的表现力和交互性。 在接下来的内容中，我们将逐一介绍这些新功能，并探讨它们如何在实际开发中发挥作用，以及它们如何继续引领前端开发的未来。 Object.groupBy ❝它是一个新的 JavaScript 方法，它可以根据提供的回调函数返回的字符串值对给定可迭代对象中的元素进行分组。返回的对象具有每个组的单独属性，其中包含组中的元素的数组。 当我们想要根据数组中对象的一个或多个属性的名称对数组元素进行分类时，此方法非常有用。 语法 Object.groupBy(items, callbackFn) 参数 items ：一个将进行元素分组的可迭代对象 callbackFn ：对可迭代对象中的每个元素执行的函数。它应该返回一个值，可以被强制转换成属性键（字符串或 s

前言 前段时间老板心血来潮，要我们前端组对整个的项目都做一下接口防止重复请求的处理（似乎是有用户通过一些快速点击薅到了一些优惠券啥的）。。。听到这个需求，第一反应就是，防止薅羊毛最保险的方案不还是在服务端加限制吗？前端加限制能够拦截的毕竟有限。可老板就是执意要前端搞一下子，行吧，搞就搞吧， you happy jiu ok 。 虽然大部分的接口处理我们都是加了 loading 的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做 全局处理 。下面就来总结一下这次的防重复请求的实现方案： 方案一 这个方案是最容易想到也是最 朴实无华 的一个方案：通过使用axios拦截器，在 请求拦截器 中开启全屏Loading，然后在 响应拦截器 中将Loading关闭。 这个方案固然已经可以满足...