大家好，我是dom哥。今天给大家分享几个git的高级应用。 git是目前最流行的版本控制工具。git玩的6不6，轻则影响自己的开发幸福指数🥰，重则影响下班时间🕓。本文介绍一些日常开发中常遇到的场景以及相关的git命令。 接下来就以前端流行的mvvm框架vue项目为例进行演示📺。 查看gitlog统计信息📊 谁才是真正的卷王？这个命令给你答案！ gitshortlog-sn 左侧是commit数量，右侧是提交者name 自定义gitlog输出样式💄 这是素颜的gitlog样子。一个commit独占7行，一页也展示不了几个commit啊 而且家人们谁懂啊，它这个日期格式把我看裂开了...

大家好，我是dom哥。这是我关于Chrome扩展开发的系列文章，感兴趣的可以点个小星星。 一个复杂的Chrome扩展程序通常由content_scripts，background，actionpopup，sidepanel，optionspage，devtools等部分组成，这些部分所负责的功能各不相同，所处的运行环境各不相同，所能访问的chrome.API也各不相同，也因此经常需要通信告诉对方需要做什么。 下面是我画的一张图，简单说明各部分关系： 这些花花绿绿的部分各自运行在不同的环境中，往往需要相互通信，Chrome为我们提供了两种通信方式： 一种是一次性请求（one-timerequ...

大家好，我是dom哥。这是我关于Chrome扩展开发的系列文章，感兴趣的可以点个小星星。 浏览器现状🌍 研究机构Statcounter发布了2023年9月报告，揭示了有关浏览器的最新统计数据。 浏览器 市场份额 Chromium-based? Chrome 63.56% Yes Safari 19.85% No Edge 5.43% Yes Firefox 2.94% No Opera ... Yes 可以看到基于Chromium的浏览器占了全球市场的7成！ 对于前端开发来说，Chrome更是形影不离的饭碗级软件😁。既然Chrome这么重要，那么把它研究...

大家好，我是dom哥。这是我关于Chrome扩展开发的系列文章，感兴趣的可以点个小星星。 工欲善其事，必先利其器。Chrome可能是前端开发中使用最多的浏览器。在日常开发中，下列几款Chrome扩展也许能让你的开发工作事半功倍🚀 Vue.jsdevtools⚙️ vue官方专为vue应用开发的调试工具。 通过使用它，你可以快速查看组件的状态和属性，分析性能瓶颈，并进行性能优化。同时，它还提供了方便的Vuex状态管理和组件时间旅行功能。无论你是Vue.js初学者还是有经验的开发人员，Vue.jsDevtools都是一个值得掌握的工具。 ReactDeveloperTools⚙️ ReactD...

大家好，我是dom哥。这是我关于Chrome扩展开发的系列文章，感兴趣的可以点个小星星。 在上篇和中篇中已经完成了对manifest文件中以下字段的解释： "manifest_version" "name" "version" "description" "icons" "content_scripts" "background" "permissions" 本篇接着说剩下的manifest可选字段。 UI配置 "action" 定义Chrome右上角工具栏上扩展icon按钮的UI和行为。 "action":{ "default_popup":"popup/index.html",//op...

大家好，我是dom哥。这是我关于Chrome扩展开发的系列文章，感兴趣的可以点个小星星。 Chrome扩展能够提高浏览器的使用体验，通过自定义UI界面，监听浏览器事件，改变Web页面等操作来延展浏览器的功能。 Chrome扩展项目使用前端html，css，js基础技术开发，一大痛点就是改动代码后的扩展更新问题，先来看一看Chrome扩展的更新逻辑： 扩展各部分 是否需要更新扩展 manifest.json Yes backgroundserviceworker Yes contentscripts Yes(并且需要刷新Web页面) actionpopup No o...

大家好，我是dom哥。我正在写关于Chrome扩展开发的系列文章，感兴趣的可以点个小星星。 填表单是打工人经常面对的场景，作为一个前端，我经常开发一些PC端的页面，它们主要由表单和表格构成，而输入框又是表单里最常见的表单项。 接下来就试着做一个简单的小扩展，用于快速给表单里的输入框填充值。 Mock.js 开始前请先让我介绍一下Mock.js，这是一个模拟数据生成器，也正是这个库给了我灵感。 简而言之，Mock.js可以生成各种各样数据类型的假数据。Chrome扩展要做的事就是把生成的假数据插到输入框里。 新建项目 从零开始新建一个项目，暂且命名为mock-input-demo，在项目里新建...

大家好，我是dom哥。我正在写关于Chrome扩展开发的系列文章，感兴趣的可以点个小星星。 Chrome在全球浏览器市场份额独占6成，无论是对普通用户还是开发者，都是电脑里的必备利器。Chrome无论是在性能还是UI交互方面都非常出色，而Chrome扩展则为开发者提供了接口，让开发者有能力自己编写代码使自己的Chrome更强大，更加定制化。 每个Chrome扩展项目的根目录中都必须有一个manifest.json文件，即清单文件。manifest里会记录关于扩展的重要元数据、声明权限以及指定在网页和后台中运行的文件等等。 最简单的Chrome扩展项目 新建一个crx-demo目录，在里面新建一...

大家好，我是dom哥。我正在写关于Chrome扩展开发的系列文章，感兴趣的可以点个小星星。 在上一篇中已经完成了Chrome扩展的雏形，本篇接着介绍manifest中的可选字段，完善扩展的细节。 manifest中的可选字段 "content_scripts" 向web页面注入JavaScript和CSS。可以说这是Chrome扩展的灵魂。当指定content_scripts后，每当页面加载时，content_scripts也将随之加载。 "content_scripts":[ { "css":["content-style.css"], "js":["content-script.js"],...