Chrome扩展开发是目前比较火爆的领域，作为市场占有率第一的浏览器，有海量用户支撑。同时，Chrome扩展可以无缝对接Edge浏览器，不可不谓一箭双雕。 本文将介绍如何使用webpack构建一个支持Typescript的开发环境，在此基础上，实现一个可以修改网页背景的扩展应用。

公司产品有个埋点需求，当用户在点击日志记录时，上报日志列表中最新记录和当前记录的信息，由于组件间距离比较远，没办法直接拿到多层之外组件中的数据，因此用了hack的办法解决，记录在此，以飨读者。

写组件的能力是衡量前端工程师水平的重要指标，不管是基础组件还是业务组件。笔者在空闲时间也喜欢写组件，为了帮助初学者上手写React组件，同时为了分享我在写组件中的经验和想法，决定开设一个系列，即：动手撸组件系列，和大家分享一些公共组件和业务组件的实现方式和实现技巧。

最近在开发业务需求的时候，有一个场景是点击弹窗之外的区域后，执行某些操作。比如我们常用的github左上角的搜索框，当点击了搜索框之外的区域以后，搜索框就会自动取消搜索并收缩起来。

最近学了一个比较赞的电商项目，项目作者提供了完整的示例数据，包括商品信息及配图，但是这些配图是固定的URL，商品详情为html，html中有img标签，img标签中也有url。根据过往经验这种在线CDN很容易挂掉，因此产生了把商品数据中的商品图片提取出来，放在自己的腾讯云服务器中的想法，保证可访问性。

在前端开发中，经常会使用轮询（setInterval），比如后端异步数据处理，需要定时查询最新状态。但是在用React Hook进行轮询操作时，可能会发现setInterval没有那么轻松驾驭，今天笔者就来谈谈在项目开发中是如何解决setInterval调用问题的，以及如何更加优雅的使用setInterval。

在开发的项目中有很多分支的时候，我们总是需要频繁的切换分支来比对代码，bug定位……但是，每次checkout之前，git总是让我们做commit，这种打乱我们开发节奏的操作，我们是不会接受的，这里我来推荐一个超好用的命令 git stash

今天项目中遇到了身份证号识别的问题，需要识别15或18位的居民身份证，网上查了一下，感觉很有意思，这里跟大家分享下我的理解过程，希望能帮助大家更好的学习正则表达式。

昨天参加了某大厂前端工程师一面，整体面下来感觉偏简单。面试官一脸严肃，搞得我也有点紧张， 面试官，你不那么严肃能死啊！😒先从问答题开始1、 说一下const和let的区别声明方式变量提升作用域初始值重复定义const否块级作用域需要不允许let是块级作用域不需要允许var是函数级作用域不需要允许变量提升const和let不存在...

前一阵面试大厂的前端岗，让手撸数组的Flat方法,很遗憾当时太菜没有什么思路，面试后仔细分析了一下，发现这道算法题完全没有想象中的那么难，的确是一套纯基础题，使用数组的reduce结合递归可以很轻松的实现，这里简单介绍下实现思路，以飨读者！

在前端页面开发中，HTML元素水平垂直居中是需要经常处理的问题，今天我们就来系统的学习一下如何在HTML实现水平垂直居中，通过对主流水平垂直居中实现方式的实践，来找到适合特定情况下的布局实现方式，并逐步达到灵活运用的水平。

与传统的面向对象语言不同，JavaScript的继承主要是通过原型链和借用构造函数的方式实现。今天我们就来学习下在JavaScript中常见的四种继承实现方式，分别是：原型链继承、借用构造函数继承、组合继承以及Class类继承。

在前端面试中，BFC是一个很经常问到的概念。今天我们就来一起了解下什么是BFC，以及它的主要作用。在学习BFC之前，我们先来看看什么是高度塌陷：

HTML语义化就是用合理、正确的标签来展示内容。比如我们在指定一些标签的时候，如div、span，我们并不知道其定义的内容类型，但当我们用h1-h5标签，我们知道这是定义的一级标题，table我们知道定义的是表格，img我们知道定义的是图片。