在日常浏览网页时，我们有时会遇到一些不太满意的网站界面交互设计。然而，作为普通用户，我们并没有网站的源码，如何在这种情况下进行界面改造呢？今天，我将向大家介绍两种强大的工具——油猴脚本和浏览器插件，通过它们，我们可以轻松地改造现有网站的界面和交互体验。
提起Chrome扩展插件(Chrome Extension)，每个人的浏览器中或多或少都安装了几个插件，像一键翻译、广告屏蔽、录屏等等，通过使用这些插件，可以有效的提高我们的工作效率；但有时候，我们想要的某个功能市面上没有现成的插件，作为开发者自然而然想到，自己是否可以动手开发一个定制化的插件？网上目前很多不错的关于Chrome插件的开发教程，可以帮助我们快速上手开发一个插件， 本文换个思路，从应用着手，通过讲解插件的特性来启发读者在工作中哪些场景可以通过插件来解决。
1、前言 现如今的时代，绝大多数人都要跟浏览器打交道的，说到浏览器那肯定是Chrome浏览器一家独大，具体数据请看👇 知名流量监测机构 Statcounter 公布了 7 月份全球桌面浏览器市场份额，主要数据如下： 浏览器 市场份额 月涨跌份额 Chrome 66.19% -0.74% Edge 10.84% +0.2% Safari 8.94% +0.01% Firefox 8.08% +0.28% Opera 3.06% +0.08% IE 0.75% 浏览器扩展插件的用途 生产力工具（和浏览器进
相比纯看代码来说，我更推荐结合 debugger 来看，它可以让我们看到代码实际的执行路线，每一个变量的变化。可以大段大段代码跳着看，也可以对某段逻辑一步步的执行来看。
前端爱好者的知识盛宴 Hello,各位前端ers，周末好！ 今天的供稿人是鹅厂的ChokCoco... 作为前端大神... 不可避免会接触Chrome... 这是一款好用的插件会帮你提升质感... 如果你有好的Idea... 想做好的插件并发布... ChokCoco会手把手教你... 并且征服各项难点... 欢迎转发和留言... 文末会有ChokCoco的博客... 欢迎有事没事上去逛一逛... 什么是 chrome 扩展程序 扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序。对于前
恐龙快跑(T-Rex Runner) 是Chrome浏览器在离线时出现的小游戏彩蛋
最近在公众号后台收到很多私信说，想学习js逆向分析，那么我就选了三个翻译网站案例，这些算是js破解里面的入门级的，不太难但是可以让你掌握方法，以后慢慢深入。
前段时间，我将精力专注在Web性能领域；在这个领域下有个重要的课题是如何让网页更丝滑（流畅）。
1. Vue.js devtools Chrome 开发者工具扩展，用于调试 Vue.js 应用。 2. React Developer Tools React Developer Tools，可以在
在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。 Developer Menu Android模拟器： 可以通过Command⌘ + M 快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。 iOS模拟器： 可以通过Command⌘ + D快捷键来快速打开Developer Menu。 在真机上开启Developer Menu： 在真机上你可以通过摇动手机来开启
了解浏览器器插件，这里专指 Chrome Extension（CE）的基本知识和运行原理
鉴于 Chrome 浏览器的强大，Chrome 网上应用商店很多强大的插件可以帮助我们快速高效地进行数据爬虫。
作为 Google Chrome 生态的一部分，Extension 是可以修改或增强 Chrome 浏览器功能的小程序，开发者可以利用各种Web技术，提供各种有趣的功能。截至目前为止（2018/08/10），Chrome 的全球下载安装量稳居第一，其 Chrome Web Store 中的 Extension 更是海量，这极大的稳固了 Chrome 在全球市场上的地位，平时我们会用到各式各样的 Extension ，如：纸壁（每天将 Chrome 启动界面换一张风景优美的图片），tabs管理器（将tab合并后管理），数字货币钱包（ETH钱包），这些 Extension 不仅扩充了 Chrome 本身的内涵，也极大的提高了用户（使用者）的某些效率，而这本小书，正是想将 Chrome Extension 的开发知识用文字的方式记录下来，提供给对此感兴趣的开发者。
在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。 Developer Menu Developer Menu是React Native给开发者定制的一个开发者菜单，来帮助开发者调试React Native应用。 提示：生产环境release (production) 下Developer Menu是不可用的。 如何开启Dev
对于python爬虫的相关知识之前分享了很多，这回来说说如何利用selenium自动化获取网页信息。通常对于异步加载的网页，我们需要查找网页的真正请求，并且去构造请求参数，最后才能得到真正的请求网址。而利用selenium通过模拟浏览器操作，则无需去考虑那么多，做到可见即可爬。当然带来便捷的同时，也有着不利，比如说时间上会有所增加，效率降低。可是对于业余爬虫而言，更快的爬取，并不是那么的重要。
越来越多的前端开发人员喜欢在Chrome里开发调试代码，Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率。尤其Chrome本身是可以登录的，登录后你所有的插件都会自动同步到每一个登录后的Chrome的，非常方便啊。
关于 chrome 扩展的文章，很久之前也写过一篇。清除页面广告？身为前端，自己做一款简易的chrome扩展吧。 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点。 什么是 chrome 扩展
简单的知识点搭配合适的业务场景，往往能起到意想不到的效果。这篇文章会用三个最基础人人都知道的前端知识来说明如何助力运营小姐姐、公司48+前端开发同学的日常工作，让他们的工作效率得到极大地提升。
【引子】前端可能是一个日新月异的领域，我们很难了解其中的方方面面。但是，前端系统一般都以浏览器作为运行环境， 对浏览器的进一步理解有助于我们更好地开发前端应用。这也是本文的由来之一，也作为对runtime的一次实例分析。
在前端开发的过程中会用到很多的浏览器插件，好用的插件，能帮助开发者在开发过程中减少很多工作量！
曾经想过制作自己的Chrome扩展，却因为觉得过程太复杂而打消了念头吗？ 好消息，事情并没有你想象的那么复杂！在接下来的几分钟里，我们不仅将为你详解Chrome扩展的基础知识，还将手把手教你如何用五个简单的步骤创建自己的扩展。
本文出自《React Native学习笔记》系列文章。 在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。 Developer Menu Developer Menu是React Native给开发者定制的一个开发者菜单，来帮助开发者调试React Native应用。 提示：生产环境release (production)
有时候，我们需要去研究人家网站的运行机制，这就免不了要在他们的前端脚本里插入一些调试代码看看运行效果。在chrome65以前，我们可以打开目标网页的开发者工具—source选项卡—目标JS/CSS文件，然后在相关位置写入代码保存后即可看到改动后的效果。chrome65之后需要进行本地代码替换，本文就介绍一下如何在chrome中用本地代码替换在线代码，以达到在线修改JS的效果。
一年一度的 JSConf 大会又召开，这是 2010 的官网：http://2010.jsconf.us/
不懂CHROME前端调试工具，遇到问题就叽叽喳喳问前端，显得很不专业。辉哥利用五一节日，补补功课，引用相关优质文章，把Chrome浏览器客户端调试的方法详细讲解一遍。
可能是全网最详细的谷歌插件开发小册👏🏻，之前写谷歌插件的时候绕了一圈网上的教程，没有发现比较好的文档教程，索性根据官方文档梳理一遍，避免后面学习的同学继续踩坑！！！
web开发需要使用到css和javascript文件,才能让网页展示比较好看。下面介绍在Django框架中引入这些静态文件，来实现一个bootstrap网页。
有没有好奇chrome[1]插件是用什么做的？像类似掘金插件又是怎么实现的，当我安装稀土掘金插件后，我的导航页都被改掉了，因此你也可以做一个类似的插件，来导航你公司的一些产品，方便快捷的实现你的内部导航
在电脑本地硬盘任意位置，右键新建一个文件夹day1，用vscode打开此文件夹，点击new file,内容如下:
经常会在一些爬虫群里面看到这样的提问，为什么用Python爬虫请求某个网页时，有时打印的数据不全或者什么数据都没有或者只有html骨架代码。这是因为涉及到了”动态网页数据“这个词了，简单而言，就是后台的数据不是请求网页链接时就已经将数据写入到相应的标签上了，而是利用ajax请求将后台的数据写入到相应的标签上。通常要得到这些数据，可以有两种方式，其一为找到这个ajax请求链接，然后访问这个链接，解析相应的json数据即可；另外一种是使用selenium访问这个网址，等待网页加载完之后，然后解析相应的html标签得到这些数据。
D3指的是Data-Driven Documents，js即Javascript，是后缀名。先看看官网上对D3.js库的定义：
爬虫通常是：①得到目标网页URL；②发起HTTP请求得到网页数据；③使用各种方式解析网页得到想要的数据；
这两段都是 JS 代码，但是以前的一看就很清晰明了，而现在的有一大堆的垃圾注释在里面。不用说，肯定是做了 JS 混淆。
谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序，可以为用户提供额外的功能和定制化的体验。谷歌浏览器插件通常由HTML、CSS和JavaScript组成，非常利于前端开发者。 开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。
虽然不知道这是不是真的，不过在中英混排时加上空格的话看起来确实要舒服不少，知乎（https://www.zhihu.com/question/19587406）上关于这个问题的讨论也不少。
小詹有个读者叫 zgao，他之前写过一篇博客，爬取了 PornHub（下面全部简称 P 站）上的视频，代码很简单，关键还好用！当时小詹就 P 站上爬取了一些考研数学视频，虽然我用不上，但是我热爱技术啊！
Stackoverflow是广大程序猿赖以生存的工具之一，在stackoverflow搜索技术问题得到答案的质量和正确率远远高于其他平台。但是这么一个好网站居然因为Google被墙而无法正常使用（无法登录，无法评论、回答问题等）着实让人不爽呀。以前还有VPN可以用的，现在大部分VPN都被查封了。。程序员的日子真的是越来越难过了呀。。所以我下决心想办法自己解决这个令人头疼问题。
在前天的公众号文章《别去送死了。Selenium 与 Puppeteer 能被网站探测的几十个特征》中，我们提到目前网上的反检测方法几乎都是掩耳盗铃，因为模拟浏览器有几十个特征可以被检测，仅仅隐藏 webdriver 这一个值是没有任何意义的。
上篇向大家介绍完了基础功能篇，这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首先就会打开Sources进行js断点调试，而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已，在没有js断点功能，只能在IE（万恶的IE）中靠alert弹出窗口调试js代码的时代（特别alert一个object根本不会理你），那样的开发环境对于前端程序员来说简直是一场噩梦。本篇文章讲会介绍Sources的具体用法，帮助各位在开发过程中够愉快地调试js代码，而不是因它而发疯。首先打开F12开发工具切换到Sources面板中:
Chrome Devtools 是我们整天用的工具，多学一些小技巧还是挺有意义的。
看到这个功能的时候， 你可能会好奇， Chrome Devtool 不是早就可以编辑css了吗？
在2019年初，微软正式选择了Chromium作为默认浏览器，并放弃edge的发展。并在19年4月8日，Edge正式放出了基于Chromium开发的Edge Dev浏览器，并提供了兼容Chrome Ext的配套插件管理。再加上国内的大小国产浏览器大多都是基于Chromium开发的，Chrome的插件体系越来越影响着广大的人群。
小詹有个读者叫zgao，他之前写过一篇博客，爬取了 Pornhub（下面全部简称P站）上的视频，代码很简单，关键还好用！当时小詹就 P 站上爬取了一些考研数学视频，虽然我用不上，但是我热爱技术啊！
你的网页性能优化的再好，如果网络不好那也会导致网页的体验差。 离线应用是指通过离线缓存技术，让资源在第一次被加载后缓存在本地，下次访问它时就直接返回本地的文件，就算没有网络连接。
在爬虫开发的过程中，想要修改网站的 JS 来规避网站的无限 Debugger ，或者想给线上的 JS 加点调试的语句，我们就需要把远程的 JS 映射到本地的文件上，这样就可以通过修改本地的文件进行线上的调试。
从 2008 年 Google 释放出第一版的 Chrome 后，整个 Web 开发领域仿佛被注入了一股新鲜血液，渐渐打破了 IE 一家独大的时代。Chrome 和 Firefox 是 W3C Web 标准的坚定支持者，随着这两款开源浏览器市场份额逐渐加大，迎来了开发者的春天。这就迎来了一个新的职业分工——前端工程师 frontend-engineer，前端工程师促进了 Web 应用的繁荣，功能强大的调试工具必不可少。Google 基于开源的基础上顺势推出了 DevTools，广受网页开发者的好评，随即也推动了 Chrome 的在商业的成功。
Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
