在2019年初，微软正式选择了Chromium作为默认浏览器，并放弃edge的发展。并在19年4月8日，Edge正式放出了基于Chromium开发的Edge Dev浏览器，并提供了兼容Chrome Ext的配套插件管理。再加上国内的大小国产浏览器大多都是基于Chromium开发的，Chrome的插件体系越来越影响着广大的人群。
严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。
Chrome 插件是我们经常用到的，比如广告屏蔽，浏览器美化，访问国外网站等。但是你有想过 Chrome 插件是如何开发的吗？出于好奇，今天我们一起从 0 到 1 开发一个超级无敌简单的 Chrome 插件，目的只为入门 Chrome 插件基础开发。
你只需要看完上面那篇文章和掌握一些前端开发基础，就足以自行编写一个 Chrome 插件。本文也是基于上面文章加上自己之前写的插件所记。
简单来说浏览器插件，是浏览器上的一种工具，可以提供一些浏览器没有的功能，帮你做一些有趣的事情。开发者可以根据自己的喜欢，去实现一些功能。插件基于Web技术（html、css、js）构建。
Chrome的扩展程序很多，也很容易入门，可以来简单实现一下 看看 官方文档 或者翻译的文档：百度、360，慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含： 一个manifest清单文件 h
注：content_scripts段中的代码会在页面加载对应阶段"document_start", “document_end”, or "document_idle"自动注入 但是脚本运行在与页面独立的上下文中，无法访问到原页面的脚本上下文资源 如需访问原页面脚本上下文，可在content_scripts脚本中将web_accessible_resources段中声明的脚本注入到document中 样例： js/content-script.js
Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包
在日常浏览网页时，我们有时会遇到一些不太满意的网站界面交互设计。然而，作为普通用户，我们并没有网站的源码，如何在这种情况下进行界面改造呢？今天，我将向大家介绍两种强大的工具——油猴脚本和浏览器插件，通过它们，我们可以轻松地改造现有网站的界面和交互体验。
前段时间在利用工作之余开发了tomato timer这个蕃茄钟，然后部署到github.io上，由于greatway太厉害，偶尔会有打不开的情况。上周末对比做了扩展和改进，使其成为chrom
我们经常会遇到https无法访问的问题，大部分时候根据浏览器的提示可以看出错误的原因，但是也有很多时候需要做进一步的排查。
本文通过对chrome插件的各个部分进行快速的介绍，从而让大家了解插件各个部分的关系，并且知道如何将其进行组装成一个完整的chrome插件。
直接将脚本注入到页面中，但是也可以包含CSS文件，但是在注入CSS文件时，要小心，否则会覆盖网页原本的样式。content-scripts中的JS程序和原始页面共享DOM，但是和原始页面的JS不是在同一个环境下运行的，所以我们是无法访问到原始页面中定义的变量的因为是是注入到页面中的，所以在安全策略上不能访问大部分的API，除了下面的四种：
了解浏览器器插件，这里专指 Chrome Extension（CE）的基本知识和运行原理
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% 浏览器扩展插件的用途 生产力工具（和浏览器进
在爬虫开发的过程中，想要修改网站的 JS 来规避网站的无限 Debugger ，或者想给线上的 JS 加点调试的语句，我们就需要把远程的 JS 映射到本地的文件上，这样就可以通过修改本地的文件进行线上的调试。
本地html文件中的script标签引入ES6的模块，直接在浏览器中打开该html文件，发现报错了：Uncaught SyntaxError: Cannot use import statement outside a module
很多时候，我苦恼于 Node.js 的调试，只会使用 console.log 这种带有侵入性的方法，但是其实 Node.js 也可以做到跟浏览器调试一样的方便。
Chrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。那么有没有想自己开发一款自己的谷歌浏览器插件呢？本文将介绍大家手动开发一个谷歌浏览器插件获取cookies.
大家肯定有这样的经历，浏览网页的时候，左右两端广告，诸如“屠龙宝刀，点击就送”，以及最近火的不行的林子聪37传奇霸业什么“霸业面具，霸业吊坠”的魔性广告总是充斥我们的眼球。 当然有现成的扩展程序或者插件（两者概念稍有不同）可以清除页面广告，但是既然身为一名程序猿，尤其是FEDer，为什么不尝试一下自己写一个清除广告的扩展程序呢。其实，编写一个浏览器扩展程序十分简单，尤其是chrome扩展，可以完全使用前端技术（HTML/CSS/JS）完成一个自己编写的扩展程序。让我们一步一步，学习一下如何编写一个简单的清除
部署前端之前，开发者通常会对代码进行打包压缩，这样可以减少代码大小，从而有效提高访问速度。然而，压缩代码的报错信息是很难Debug的，因为它的行号和列号已经失真。这时就需要Source Map来还原真实的出错位置了。
在本文中，我们将重点分析如何绕过Firefox内容安全策略中的“Strict-Dynamic”限制。该漏洞详情请参考： https://www.mozilla.org/en-US/security/advisories/mfsa2018-11/#CVE-2018-5175 。该漏洞将绕过内容安全策略（CSP）的保护机制，而在该机制中包含一个“严格动态限制”的Script-src策略。如果目标网站中存在HTTP注入漏洞，攻击者可以将一个引用注入到require.js库的一个副本中，这个库位于Firefox开发人员工具之中，攻击者随后便可以使用已知技术，利用该库绕过CSP限制，从而执行注入脚本。
前言 本文将介绍如何在主页侧边栏添加当前访客信息，具体效果如下： 教程链接：Hexo博客搭建 与 美化教程 | 卓越科技的Blog (zykj.js.org) 操作 注意：必须确保使用了Hexo tag 外挂标签的span的样式（👈点击跳转），否则显示的内容没有彩色样式。 1.在 themes\Butterfly\layout\includes\widget\ 下创建 card_ip.pug 文件，并写入以下内容： .card-widget.card-ip .card-content
2、除了在插件内部contenscript background 和 popup之间传递消息以外，其他网站也可以给插件发送消息。方法如下 首先，需要增加配置 externally_connectable:{matches:[“https://*.xxx.com/”]}指定允许哪些网站可以给当前插件发送消息，相当于白名单，只有在白名单中的站点发送的消息，扩展才会监听
"content_security_policy": "script-src 'self' https://*.xxx.com; object-src 'self'"
文主要是介绍使用prerender-spa-plugin插件在针对前端代码进行预渲染。
一、如何查看dom元素的事件 某种情况我们在页面交互上发现一个问题，肯定是非常想知道这个交互触发执行的入口，这会使我们更直接、快速的进行代码的跟踪、调试和分析。其实在chrome浏览器这很简单就实现了
在之前一段时间，我需要借助Chrome扩展来完成一个需求，当时还在使用油猴脚本与浏览器扩展之间调研了一波，而此时恰好我又有一些做的还可以的油猴脚本 TKScript (点个star吧 😁)，相对会比较熟悉脚本管理器的能力，预估是不太能完成需求的，所以趁着这个机会，我又学习了一波浏览器扩展的能力。那么在后来需求的开发过程中，因为有些能力是类似于脚本管理器提供的基础环境，致使我越来越好奇脚本管理器是怎么实现的，而实际上脚本管理器实际上还是一个浏览器扩展，浏览器也并没有给脚本管理器开后门来实现相关能力，而让我疑惑的三个问题是:
Chrome DevTools 可以说是前端开发最常用的工具，无论是普通页面、移动端 webview、小程序、甚至 node 应用，都可以用它来调试。
Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为的软件程序，例如我们常用的TamperMonkey、Proxy SwitchyOmega、AdGuard等等，这些拓展都是可以通过WebExtensions API来修改、增强浏览器的能力，用来提供一些浏览器本体没有的功能，从而实现一些有趣的事情。
在我们的工作过程中，每当需要排查问题、跑冒烟用例、看测试环境的效果时，经常需要在浏览器环境中切换登录账号，另外，在开发的过程中，也需要在编辑器 VS Code 里切换代理登录的账号。
【引子】前端可能是一个日新月异的领域，我们很难了解其中的方方面面。但是，前端系统一般都以浏览器作为运行环境， 对浏览器的进一步理解有助于我们更好地开发前端应用。这也是本文的由来之一，也作为对runtime的一次实例分析。
刚才简单介绍了一下node读取同级页面的html文件,没有类似于Apache的服务,让访问变得复杂,因为这样正是成就了node的优点!优良的路由处理,通过路由访问不同内容!
8 月 9 日的时候 WPS 官方发布了一条代码执行漏洞的安全通告, 另外根据收到的样本和各类通告，发现在今年的攻防演练期间先后三次发生了不同的针对 WPS 利用链的代码执行攻击。通过我们的研究分析发现，该系列的漏洞都因为在 docx 文档中插入了一个浏览器对象 WebShape，由于 WPS 使用了 Chrome 嵌入式框架（CEF），该对象可以直接调用 Chrome 渲染 Html 网页，这三次都是因为 WPS WebShape 漏洞造成的攻击事件，分别为：
1.问题由来：由于公司新项目需求，需要从不同平台爬取大量与项目相关的数据，大多数平台没有反爬机制，只有一个站点布置了反爬。虽然可以爬取的平台很多，可以选择爬取其他平台的数据来代替，但是考虑到该平台的可用数据量很大，值得花时间做这个爬虫，同时也是受到好奇心的驱使，于是研究了该平台的反爬机制。以下将该站点称为h网站。
谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序，可以为用户提供额外的功能和定制化的体验。谷歌浏览器插件通常由HTML、CSS和JavaScript组成，非常利于前端开发者。 开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。
恐龙快跑(T-Rex Runner) 是Chrome浏览器在离线时出现的小游戏彩蛋
概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件，本地Iframe没有自适应高度，而服务器端的Ifrane自适应了高度。 1.问题重现： Chrome 版本 41.0.2272.10
本文为 Google Chrome 团队的开发项目工程师 Addy Osmani 在PerfMatters 2019 网页性能大会发表的“JavaScript性能优化”（https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4）的演讲，其分享了处理 JavaScript 的脚本优化建议，大幅地减少了下载时间和执行时间。
看起来是跨域问题，也就是只支持 http，https 等这种类型的跨域请求，不支持 file 协议类型的（直接本地打开文件）。解决方案如下：
友人 A: 通过后端服务或者 python 脚本通信 chrome 插件能够操作浏览器
随着开发过程中自动 UI 测试的兴起，无头浏览器已变得非常流行。网站爬虫和基于 HTML 的内容分析也有无数的用例。
Stackoverflow是广大程序猿赖以生存的工具之一，在stackoverflow搜索技术问题得到答案的质量和正确率远远高于其他平台。但是这么一个好网站居然因为Google被墙而无法正常使用（无法登录，无法评论、回答问题等）着实让人不爽呀。以前还有VPN可以用的，现在大部分VPN都被查封了。。程序员的日子真的是越来越难过了呀。。所以我下决心想办法自己解决这个令人头疼问题。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
