你只需要看完上面那篇文章和掌握一些前端开发基础，就足以自行编写一个 Chrome 插件。本文也是基于上面文章加上自己之前写的插件所记。
大家好，我是喵喵侠，是一名前端开发。在日常开发的过程中，我经常会遇到各种问题，以往最常见的解决方式是借助搜索引擎，来寻找问题的解决办法。这种方式虽然大部分情况下能解决问题，但搜索和筛选还是需要花费不少精力的，搜索关键词不对，还得反复尝试。现在有腾讯混元大模型就方便多了，你能够通过自然语言描述，向大模型表达你的问题和需求，随后等待片刻，就能得到你想要的答案，这样就节省了大量搜索的时间，十分方便。我会在本篇文章中，先为大家介绍腾讯混元大模型的能力，然后按照我的平日的使用习惯，分享我之前的提问案例，最后会带来一个完整的开发实战小项目，相信看完本文的你一定会有所收获。
严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。
注：content_scripts段中的代码会在页面加载对应阶段"document_start", “document_end”, or "document_idle"自动注入 但是脚本运行在与页面独立的上下文中，无法访问到原页面的脚本上下文资源 如需访问原页面脚本上下文，可在content_scripts脚本中将web_accessible_resources段中声明的脚本注入到document中 样例： js/content-script.js
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% 浏览器扩展插件的用途 生产力工具（和浏览器进
需要测试一个网站，刚开始看到网站时感觉希望不大，因为验证码是需要拖动的，这也就意味着很大可能没办法爆破，另一方面是都用这种验证码了，安全做的能很差劲吗？果然，试了admin、123456之类的都不行
Chrome的扩展程序很多，也很容易入门，可以来简单实现一下 看看 官方文档 或者翻译的文档：百度、360，慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含： 一个manifest清单文件 h
完成了若干个基于WEB的项目, 也了解了从前端的js,css,html到后端python/php等, 二者如何交互, 最终浏览器如何执行, 这些在心里也已经很明确了. 不过一个问题一直萦绕在心中,那就是:
两年前做的一个项目，当时客户的需求还没有完成，客户就提出了解决安全的问题，这是当时写的一个记录，分享到这里。
第三方的js文件，自己写的js文件，js越来越多了怎么办？ 提出问题： 1、js文件太多了，每个页面都写<script src="...">太麻烦。 2、如果路径变化了，或者js名称变化了怎么办？每个页面都改一遍吗？ 3、如何约束js文件的加载顺序？a.js定义了一个函数，b.js要调用，但是b.js先加载了，a.js还没加载完成，造成函数未定义，无法调用。 4、js文件的合并。开发阶段，js会分成多个文件，这样便于开发。但是成熟了之后会合并成一个文件。这样引用方式就会变化，原先引用一堆js，现在只需要引用
当我们使用 Selenium 开发爬虫的时候，使用 Jupyter 写代码会比用 PyCharm 写代码更方便。如果使用 PyCharm 写代码并直接运行，当某一行报错的时候，整个程序就挂了，改了代码以后必须完全从头开始，这样会非常浪费时间。但如果使用 Jupyter 写代码，那么我们只需要重试出问题的这一行代码就可以了，不需要把整个程序再重启一次。
我当时学习开发 Chrome 插件的时候，还不会 Vue，更别说 Webpack 了，所以使用的都是原生的 html 开发，效率就不提了，而这次就准备使用 vue-cli 来进行编写一个某 B 站获取视频信息,评论的功能（原本是打算做自动回复的），顺便巩固下 chrome 开发（快一年没碰脚本类相关技术了），顺便写套模板供自己后续编写 Chrome 插件做铺垫。
chrome浏览器深受广大用户的喜爱，其扩展性对于开发者来说更加是经常会接触到的，平时用到很多的插件，一方面帮助自己提高了工作的效率，本小节来学习一下chrome插件开发入门篇
我最近在学习做移动端页面，当做好一个移动端页面后想使用手机查看一下移动端页面在手机上的效果，找了很久才找到一个比较好的方法，特意写这篇文章记录下在手机上查看移动端页面的方法
数栈是云原生—站式数据中台PaaS，我们在github和gitee上有一个有趣的开源项目：FlinkX，记得给我们点个star！star！star！
直接将脚本注入到页面中，但是也可以包含CSS文件，但是在注入CSS文件时，要小心，否则会覆盖网页原本的样式。content-scripts中的JS程序和原始页面共享DOM，但是和原始页面的JS不是在同一个环境下运行的，所以我们是无法访问到原始页面中定义的变量的因为是是注入到页面中的，所以在安全策略上不能访问大部分的API，除了下面的四种：
最近在写公司内部的一个 node 应用的时候，发现自己在 node 调试这块还是比较薄弱的，特意恶补了一下，在这里也做一下分享。
技术在进步，如果半年不学习新技术，那么我就落后了。本教程将带你进入一个全新的技术世界，它叫做WebGL。
本文是基于Windows10的. Debugging javascript 打开wwwroot/js/site.js, 写一段简单的js代码: (function ($) { $(docume
第一部分: https://www.cnblogs.com/cgzl/p/8450179.html
当我们需要对一个网页上的某个按钮进行多次点击以求得某种“好处”的时候，例如天猫的抢红包活动，我们可能需要点击N次之后才有可能获得一个红包，但是这个N是一个未知数，有可能我们要不停地点击半个小时甚至一个小时都还无法获得，自己估计也会点鼠标点得醉了。因此，针对这种情况，我们希望自己写一个小工具来让计算机帮我们做这件事。
最近偶然间有看到某家的一个站点中的网站中的前端代码的“泄露”。此处的泄露为什么打引号，因为一般来说网站的前端代码都是暴露出来的，都是可以访问的。但是一般生产环境的 JavsScript 代码都是经过压缩和混淆的，所以可读性大大降低，这也提升了从前端的角度挖取更多信息的门槛。这里的泄露指的是在 Chrome 浏览器的 Sources 面板中可以看到完整的以及原始的前端代码。
大部分网站都会对关键参数进行加密，JS 逆向时，我们首要任务是定位参数具体的加密逻辑
源码：https://github.com/maqi1520/Clone-processon
简单的知识点搭配合适的业务场景，往往能起到意想不到的效果。这篇文章会用三个最基础人人都知道的前端知识来说明如何助力运营小姐姐、公司48+前端开发同学的日常工作，让他们的工作效率得到极大地提升。
https://segmentfault.com/a/1190000037673677
我们在代码中直接监听请求，在请求前看请求js的url是否以nodeModules_eeb5887.js结尾，如果是的话直接替换为vue_2.6.14.js。
由于公司的所有研发效能的数据都在云效平台(公司内部平台),某天我们想通过脚本拉取一下用户反馈数据,首先要通过chrome调试工具定位到了具体那个是网络请求.
我不甘心啊，马上升级了 Chrome 到最新的版本依然不行，仔细看了外媒以后发现，仅 Chrome Canary 版本支持这个功能，Chrome Canary 版是啥？开发者专用的每日构建版，所以还没有正式发布。
脱离浏览器环境也可以运行JavaScript，只要有JavaScript引擎就可以。
有人找你解决一个小问题,你可能花几分钟编程,完美解决,但对方的计算机却没有程序运行的环境,有些老旧windows系统,甚至不能安装环境... 最好的解决方式,就是用js编写程序,直接放到对方的浏览器里运行,毕竟也没有那个浏览器不支持js,如果对方安装了chrome内核的浏览器,你可以直接把程序改成chrome扩展,打包发给对方,问题也就很轻松的完美解决了. ---- 当然如果你的扩展足够好,你可以把扩展上传到google商店,让全世界的用户,都能使用你的程序. 想做到这些,你得先知道chrome的扩
我觉得学习 nodejs 除了要掌握基础的 api、常用的一些包外，最重要的能力是学会使用 debugger。因为当流程复杂的时候，断点调试能够帮你更好的理清逻辑，有 bug 的时候也能更快的定位问题。
Nightwatch js 是我之前写自动化测试用例使用了很长一段时间的测试框架，当时的使用 v0.9 版本并且对使用和 API 进行了翻译。作为一名前测试工程师，对于自动化测试领域也需要定期更新一下自己的知识库，一转眼 Nightwatch 1.3 版本已经发布了，可以看到它在 GitHub 上的使用和关注度还是很高的。
Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包
据我了解，很多前端从业者已经将 Google Chrome设置为他们电脑上默认的浏览器了。
前言 如果你想使用ES6模块语法管理代码，又不想使用webpack这个重型工具； 如果你只是想简简单单的写个js、html、css，不需要typescript、postcss等高级工具； 如果你想开发时所见到的错误就像使用script标签引入的脚本一样清晰； 如果你想上线代码只打包成一个或几个文件以减少文件体积和连接数； 那么，你可以继续往下读了。 特点 1、轻盈易用，几个文件，数百行代码，只需要开启其nodejs服务即可使用ES6模块语法编写代码，无需Babel转译； 2、方便排错，浏览器展示代码与本地j
0x00 插件背景 — User-Agent Swither 是一款Chrome插件，用户切换访问web时候的User-Agent的，这个插件有51万条安装量。大部分都是前端工作人员或者安全研究人员使
最简单的方式就是直接在Chrome Web Store搜索Tampermonkey，然后点击"添加至Chrome"。
学习时，为了搜集最全的中文资料，有时候不得不使用Baidu搜索引擎。在你还是个小菜鸡的时候你可能会花费大量时间在百度上！
文主要是介绍使用prerender-spa-plugin插件在针对前端代码进行预渲染。
由于业务需求, 笔者要为公司开发几款实用的浏览器插件,所以大致花了一天的时间,看完了谷歌浏览器插件开发文档,在这里特地总结一下经验, 并通过一个实际案例来复盘插件开发的流程和注意事项.
本文是作者ML95-GONG，参加了 「 30天AI训练营 」首期所写的学习总结。作者是MixLab社区成员，同时是MixLab共建者，具有工业设计/交互设计/人工智能背景。
大家肯定有这样的经历，浏览网页的时候，左右两端广告，诸如“屠龙宝刀，点击就送”，以及最近火的不行的林子聪37传奇霸业什么“霸业面具，霸业吊坠”的魔性广告总是充斥我们的眼球。 当然有现成的扩展程序或者插件（两者概念稍有不同）可以清除页面广告，但是既然身为一名程序猿，尤其是FEDer，为什么不尝试一下自己写一个清除广告的扩展程序呢。其实，编写一个浏览器扩展程序十分简单，尤其是chrome扩展，可以完全使用前端技术（HTML/CSS/JS）完成一个自己编写的扩展程序。让我们一步一步，学习一下如何编写一个简单的清除
版本v16之后，对其底层的核心算法进行了重构，引入了底层的新引擎React Fiber（16版本以后的react）
作为 Google Chrome 生态的一部分，Extension 是可以修改或增强 Chrome 浏览器功能的小程序，开发者可以利用各种Web技术，提供各种有趣的功能。截至目前为止（2018/08/10），Chrome 的全球下载安装量稳居第一，其 Chrome Web Store 中的 Extension 更是海量，这极大的稳固了 Chrome 在全球市场上的地位，平时我们会用到各式各样的 Extension ，如：纸壁（每天将 Chrome 启动界面换一张风景优美的图片），tabs管理器（将tab合并后管理），数字货币钱包（ETH钱包），这些 Extension 不仅扩充了 Chrome 本身的内涵，也极大的提高了用户（使用者）的某些效率，而这本小书，正是想将 Chrome Extension 的开发知识用文字的方式记录下来，提供给对此感兴趣的开发者。
最近在做一个英语听力的个人玩的项目，需要用js来播放mp3文件。从网络上搜到了好多种解决方案。
这几天运维组的小伙伴正在给新开发的一个商城录入一些数据。其中图片不是很好找，于是，在某个B2C网站下载图片。主要是要下载放大镜中的那几组图片。
对于Chrome 浏览器，除了占用内存的缺点，其他都很不错。对于Chrome 浏览器的开发者工具，Jeff 除了Elements、Resources、Network、Console这四个标签页用得比较多外，其他的都甚少理解。今天偶然看到一篇Chrome 浏览器开发者工具的使用教程，感觉不错，顺便转载在这里，感谢原作者的辛苦劳动。 作为一个Web开发人员，除了上面的原因以外，与我们开发相关的，就是Chrome的开发者工具。而本文，就是要详细说说Chrome的开发者工具，说说我为什么认为它比Firebug要好用
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
