一、前言 提起Chrome扩展插件(Chrome Extension)，每个人的浏览器中或多或少都安装了几个插件，像一键翻译、广告屏蔽、录屏等等，通过使用这些插件，可以有效的提高我们的工作效率；但有时候...我们看看官方解释： Chrome Extension是一个小的软件程序，它可以用来定义浏览器的浏览体验，让用户可以根据个人需求或者偏好定制Chrome浏览器的功能和行为，主要使用的技术栈是HTML、Javascript...一句话总结：Chrome扩展插件是用前端的技术栈，来定制浏览器的功能，改善用户体验。 可能大家还听过一个词：Chrome Plugin。...3.2 Chrome扩展插件的核心机制 Chrome扩展插件中比较核心的几个概念：Extension Page、background.js、Content_script.js ，它们在什么时机触发，扮演着什么角色...data: $("#hello") // 获取id是hello的元素发过去 }); } } ); 实例4：拦截请求或者反向代理 在在页面性能点检时，我们经常会检查页面图片资源是否存在尺寸过大
本文作者：国勇（信安之路特约作者） 原文地址：https://thehackerblog.com/video-download-uxss-exploit-detailed/ 注意：此帖与先前的 Chrome...当通过 tarnish 扫描大量 Chrome 扩展程序时，我发现了两款流行的 Chrome 扩展程序 Video Downloader for Chrome version 5.0.012 (820万用户...) 和 Video Downloader Plus(730 万用户) 在浏览器的操作页中存在 XSS 漏洞，而利用这些扩展程序只要让受害者导航到攻击者控制的页面。...Content Script 是 JavaScript 代码片段，运行在用户浏览器被访问过的页面上（在这种情况下，用户访问的每个页面）。 以下代码来自扩展程序的Content Script： ?...转到包含上面显示的核心易受攻击的函数 popup.js 脚本文件，我们看到以下内容： ? 单击扩展程序的浏览器图标(浏览器的右上键)时会触发上述代码。
之前已经写过 那些实用的 Chrome 扩展神器 ，如果你不能上谷歌没法直接安装Chrome扩展，可以使用https://crxdl.com/ 这个网站下载crx文件，然后手动安装。 ?...可以一键切换为手机、平板电脑、PC浏览器的UserAgent，方便开发者在PC上测试网站，解决网站的兼容性问题。 ?...有些网站限制了手机浏览模式，可以选择切换到 安卓，iOS，国产浏览器等浏览模式，这里切换到iPhone模式，效果： ?...统计网站浏览时间 统计所有网站的浏览时间，并提醒你逛「某些网站」超时了，通过扩展可以看到我经常上谷歌，微博，公众号。...OBS这类直播软件，就可以把浏览器任何页面直播到B站、斗鱼或者虎牙的直播间里去，假如你有自己的直播间并且也安装了Node.js的话，那么可以安装这个Chrome扩展玩下，适合做无人值守音乐轮播或者电影轮播什么的
近几年，随着 IE 浏览器的落幕，Chrome（包括使用Chrome内核的浏览器）其实质上已经垄断整个浏览器行业了，就连微软的 Edge 都用上了 Chrome 内核。...可以说，Chrome 的标准，事实上就可以看做是行业标准了。可以预见，Chrome 的发展前景将会非常广阔。...所以说，Chrome 扩展开发并不是什么新鲜玩意儿，只是一个挂载到 Chrome 浏览器上的一个“扩展”模块，比起微信小程序开发还简单。 这不就是网页应用吗？...其值也是一个 html 文件，可以看做是独立页面，html 文件内部同样可以引用 js/css 等资源，多用做扩展的用户自定义配置。 其中 js 资源也可调用浏览器原生 API。...自己开发的或者受信任的朋友给予的插件文件代码包，通常是一个包含js、html、css、json文件的文件夹。 非官方渠道或者未上架的插件需要自己能够判断其安全性，插件是否有违规行为。
前言 大家好，我是安果！...无论是 Chrome，还是 Firefox 浏览器，它们的强大性在很大程度上都是依赖于海量的插件，让我们能高效办公 那我们是否可以编写一个插件，让浏览器自动化完成一些日常工作，解放双手呢？...Chrome 插件 Chrome 扩展插件运行于基于 Chromium 内核的浏览器 包含：Chrome 浏览器、Microsoft Edge、360 浏览器等 一个 Chrome 扩展插件有 3 类文件组成...，包含： 配置文件 manifest.json js 脚本文件 图片、css 等资源文件 配置文件「 manifest.json 」用于配置扩展的名称、版本号、作者、图标 icon、弹出界面、权限、脚本路径等信息...最后 本例仅利用 content_scripts 注入一段脚本，通过操作 DOM 元素，将一个繁琐的登录操作做成自动化 实际上，复杂的 Chrome 插件会涉及到 background 配置、浮框布局
Chrome/Safari真机调试 移动端开发，当然是优先真机调试，真机调试更加顺畅，支持js断点调试以及绝大多数Chrome DevTools一样的调试功能（不支持Chrome扩展）。...2.1 Android + chrome 手机端安装Chrome浏览器，使用USB连接到PC，同时打开手机的USB调试模式。...注意： 部分安卓手机开发者模式的打开方式比较隐蔽：设置 > 关于手机 > 内部版本号，连续点击七次，退回上一级菜单，才能看到"开发者模式" 安卓手机还可以打开微信App的webview的debug模式，...高级 -> 勾选"在菜单栏中显示开发" iPhone 设置：设置 -> Safari -> 高级 -> 打开 Web 检查器 通过手机的 Safari 来打开 H5 页面，然后将Mac上的Safari浏览器打开...，选择开发 -> iPhone，就出现调试界面了，在iPhone上也能断点调试js了。
前言 相信很多人都在使用 Chrome 浏览器，其流畅的浏览体验得到了不少用户的偏爱，但流畅只是一方面， Chrome 最大的优势还是其支持众多强大好用的扩展程序（Extensions）。...8、下载+ Chrome的下载管理在二级菜单里，进去很不方便。装了这个插件就可以直接看和管理，很好用。 9、一键管理所有扩展 Chrome其实很占内存，尤其当插件装多了以后会卡顿。...15、Cloudbleed Bookmark Checker：检测书签是否有死链 对于书签收藏的狂魔同志，收藏夹里的网页肯定有很多都无法访问了吧！这款扩展就是来检测书签是否有死链的。...27、Trackr：追踪你的上网习惯 这个扩展程序做的事情就是记录你使用 Chrome 上网的习惯，包括上了哪些网站、每个网站呆多长时间，并且还用图表的形式反馈出来，总之装了这个扩展程序就不要上奇奇怪怪的网站了...语法检查、快速开发、卸载等功能。
Chrome/Safari真机调试 移动端开发，当然是优先真机调试，真机调试更加顺畅，支持js断点调试以及绝大多数Chrome DevTools一样的调试功能（不支持Chrome扩展）。...2.1 Android + chrome 手机端安装Chrome浏览器，使用USB连接到PC，同时打开手机的USB调试模式。...注意： 部分安卓手机开发者模式的打开方式比较隐蔽：设置 > 关于手机 > 内部版本号，连续点击七次，退回上一级菜单，才能看到"开发者模式" 安卓手机还可以打开微信App的webview的debug...高级 -> 勾选"在菜单栏中显示开发" iPhone 设置：设置 -> Safari -> 高级 -> 打开 Web 检查器 通过手机的 Safari 来打开 H5 页面，然后将Mac上的Safari浏览器打开...，选择开发 -> iPhone，就出现调试界面了，在iPhone上也能断点调试js了。
来源：http://tengj.top/2018/02/17/ggcj/ 前言 相信很多人都在使用 Chrome 浏览器，其流畅的浏览体验得到了不少用户的偏爱，但流畅只是一方面， Chrome...8、下载+ Chrome的下载管理在二级菜单里，进去很不方便。装了这个插件就可以直接看和管理，很好用。...15、Cloudbleed Bookmark Checker：检测书签是否有死链 对于书签收藏的狂魔同志，收藏夹里的网页肯定有很多都无法访问了吧！这款扩展就是来检测书签是否有死链的。...27、Trackr：追踪你的上网习惯 这个扩展程序做的事情就是记录你使用 Chrome 上网的习惯，包括上了哪些网站、每个网站呆多长时间，并且还用图表的形式反馈出来，总之装了这个扩展程序就不要上奇奇怪怪的网站了...JSHint 语法检查、快速开发、卸载等功能。
而今天我们要谈的MetaMask和Mist是两个Web3上的浏览器，这两个浏览器相互兼容。而与其把MetaMask成为浏览器，不如把他看成一个Chrome浏览器的插件。...正如前文所说，MetaMask是一款在Chrome上使用的插件类型的以太坊钱包。用户不需要下载，需要再Chrome浏览器上添加对应的扩展程序即可，非常轻量。...简单来说，MetaMask允许用户与在Chrome中与Dapps进行交互。 闲话少说，说干就干！ 接下来就跟着营长开发你的第一个Dapp吧！...由于NPM分部在Node.js之上，因此你需要先下载Node.js，当Node.js下载完成后，NPM就已经被自动安装了。这时你可以通过以下代码进行检验。...输入以下命令，检查Node.js是否被安装： 输入以下命令，检查NPM是否被安装： 关于NPM的安装，你还可以在以下地址查看详细的安装步骤： https://www.npmjs.com/get-npm
今天将谷歌浏览器升级到了最新版本，在安装扩展脚本的时候，却发现Chrome 21+系列增加了对扩展插件安装的限制, 用户只能安装谷歌浏览器（Chrome Store）内的扩展插件，很是郁闷。...将保存下来的*.crx文件或*.js文件直接拖拽到浏览器的“扩展程序”页面（即在谷歌浏览器地址栏输入：chrome://chrome/extensions/）。...二、安装谷歌应用商店（Chrome Store）内的扩展插件 因为谷歌退出中国事件的影响，导致了谷歌浏览器在国内的使用情况也不容乐观。...同时谷歌应用商店（Chrome Store）内的扩展插件也不时出现错误，无法进行安装了。下面是本站提供的无法在线安装谷歌应用商店（Chrome Store）内的扩展插件的解决方法，简单而快速有效。...提醒：Chrome 21+以上版本需要将保存下来的*.crx文件或*.js文件直接拖拽到浏览器的“扩展程序”页面（即在谷歌浏览器地址栏输入：chrome://chrome/extensions/）。
3.Tampermonkey 油猴脚本 Tampermonkey 是最受欢迎的浏览器扩展之一，其强大之处在于提供了脚本安装、自动更新检查、编辑脚本等插件管理功能。...9.Vue.js devtools Vue.js devtools是一款在Chrome商店和火狐商店里拥有上百万用户的人气插件，有“Vue调试神器”的称号。...Web Maker就是一款能快速在浏览器上编写网页代码的Chrome插件!...13.User-Agent Switcher for Chrome User-Agent Switcher for Chrome 是一款浏览器 User-Agent 修改插件，可以在访问网站时模拟成其他浏览器或其他操作系统的...14.Window Resizer Window Resizer 是一款可以设置浏览器窗口大小的 Chrome 扩展，用户安装了 window resizer 插件后可以快速调节 Chrome 的窗口大小
以后只要双击xpi文件就自动安装了 现有一个activeX控件，非常简单，只是访问本地DLL，并被页面的JS脚本调用。...现需要将功能迁移到webkit浏览器支持的插件形式，希望可以再chrome，搜狗，ff等浏览器上使用。火狐不支持ActiveX控件，需要使用标准的NPAPI插件。...,稍后就可以看到Firefox会询问你是否要安装这个插件,点击是,并重启Firefox浏览器 3,鼠标右键点xpi文件，选打开方式，在打开方式里选firefox，设置关联。...插件宿主（在这里就是浏览器...），会根据能力描述，动态加载插件，并负责插件调用的流程和生命周期管理。而插件中，负责真实逻辑的处理，并可以构造UI与用户交流。...不停的检查Plugin是否太繁忙，无法响应，一旦发现，立即杀死该Plugin及其所处的页面。
前言 相信很多人都在使用 Chrome 浏览器，其流畅的浏览体验得到了不少用户偏爱，但流畅只是一方面， Chrome 最大的优势还是其支持众多强大好用的扩展程序（Extensions）。...8、下载+ Chrome下载管理在二级菜单里面，进去很不方便。装了这个插件就可以直接查看和管理，很便捷。 ? 9、一键管理所有扩展 Chrome其实很占内存，尤其当插件装多了以后会卡顿。...15、Cloudbleed Bookmark Checker：检测书签是否有死链 对于书签收藏的狂魔童鞋，收藏夹里的网页肯定多到都无法访问了吧！这款扩展就是来检测书签是否有死链的。...27、Trackr：追踪你的上网习惯 这个扩展程序做的事情就是记录你使用 Chrome 上网的习惯，包括上了哪些网站、每个网站呆多长时间，并且还用图表的形式反馈出来，总之装了这个扩展程序就不要上奇奇怪怪的网站了...语法检查、快速开发、卸载等功能。
最近要分析web页面，在安卓和ios上的性能差异，除了操作系统本身不同之外，应该还多地方要探究的，第一步就是要在真机上分析。所以总结一下几个方法。...Mac+iPhone+Lightning+Safari 浏览器 步骤： 用：Lighting线将mac与iphone相连 iphone打开Web检查器（设置->Safari->高级->Web检查器） iphone...用safari打开要进行分析的页面 mac打开safari浏览器（菜单->开发->对应的手机名称->要调试的页面），点击即进入Safari Developer Tools，如图： ?...缺点：不能调试webView里面的页面 安卓手机+安卓数据线+电脑 步骤： 用数据线将手机与电脑相连 手机开启use调试（安卓不同机型开启的步骤不尽相同，不知道的百度一下） 打开chrome，输入chrome...value 中新建 vConsole.js，然后到 https://github.com/Tencent/vConsole/blob/dev/dist/vconsole.min.js 拷贝代码到 vConsole.js
在强大的硬件上，与浏览器进程相关联的服务在单独的进程中运行。在功能不太强大的硬件上，这些服务在相同的进程中运行，有效地减少了内存使用。 2....浏览器页面打开的背后 添加选项卡将启动基本进程的创建: 系统浏览器、渲染、 GPU 和网络进程。 用户输入触发浏览器进程来检查、组装协议并形成完整的 URL。...浏览器进程检查当前 URL 是否与现有呈现进程的根域匹配。如果不同，则启动新的渲染进程。 浏览器向渲染进程发出“提交文档”消息，与网络进程建立一个数据传输管道。...最后，在屏幕上绘制元素，在用户交互期间不断更新。 4 插件机制 当使用插件时，浏览器的操作比普通网页还要简单。...这些改变共同促进了 Chrome 浏览器更加流畅的体验，符合用户对提高浏览器效率的期望。
使用这些方便的工具，你可以快速检查元素并开始调试你的网站。这个插件最大的一大优点是你可以在所有流行的浏览器（Firefox、Opera 等）和你使用的任何操作系统上运行它。...采用鼠标悬浮特性，点击后就可以告诉你所指字体的属性，字体名称、字体大小、字体颜色等，非常方便，目前有 Chrome 和 Safari 扩展，Firefox 的用户可以使用书签栏工具。...你可以使用这个方便的小 Chrome 扩展程序。 使用它，你可以将鼠标悬停在网页上并识别特定颜色。如果你单击颜色，它将复制到剪贴板，以便你可以轻松访问它。.../ Window Resizer 是一款可以调整浏览器窗口大小的 Chrome 窗口缩放插件，特别适合 Web 前端开发，用户安装了 Window Resizer后，可以使用插件提供的选项来选择浏览器窗口大小...Vue.js Devtools Vue 开发者必备！ Svelte Devtools Svelte 开发者必备！
从0开始入门Chrome Ext安全（一） – 了解一个Chrome Ext 我们需要完成的这个功能，可以简单量化为下面的流程： 用户点击浏览器插件的功能 --> 浏览器插件读取当前Zoomeye页面的内容...用户点击浏览器插件的功能 当用户点击浏览器插件的图标时，将会展示popup.html中的功能，并执行页面中相应加的js代码。...插件检查数据之后确认未登录，返回需要登录 插件将获取储存在chrome.storage的zoomeye token，然后请求zoomeye.org/user判断登录凭据是否有效。...将部分数据反馈到页面中 当用户点击插件时，popup script会检查当前tab的url和后端全局变量中的数据是否一致，然后通过 bg = chrome.extension.getBackgroundPage...store 在chrome的某一个版本之后，chrome就不再允许自签名的插件安装了，如果想要在chrome上安装，那就必须花费5美金注册为chrome插件开发者。
从Chrome 68开始，更新service worker脚本时，HTTP缓存将被忽略，因此，68版本后的浏览器中可以看到Web应用对其service worker脚本的请求频率增加，但importScripts...这些值决定了对于检查 service worker 更新而发出HTTP请求，浏览器的HTTP缓存是否起作用以及如何发挥作用。...从Chrome 78开始，每次对service worker脚本执行更新检查时，都将同时检查导入脚本的内容是否已更改。...考虑到浏览器版本升级需要些时间，因此即使在较新的浏览器上可以忽略它们，但依然推荐在service worker脚本上设置Cache-Control: max-age=0HTTP头。...扩展阅读 对于Web开发者，建议阅读Jake Archibald的The Service Worker Lifecycle和Caching best practices & max-age gotchas
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
