3 天前 / 王键创生
通常我们会使用系统的截图工具或者浏览器扩展给网页截图，然而实际上 Chrome 和 Safari 都已经内置了网页截图功能，而且支持长图效果。 虽然这个方法也不是完美的，但也是一个触手可得的方案，让你不借助额外工具截图。 打开检查工具按下 F12 会弹出开发者工具。 选择命令然后按下快捷键Command + Shift + P(Windows 为 Ctrl + Shift + P)，在输入框输入 screenshot 即可看到以下几个选项： Capture area screenshot - 截取选择部分区域截图 Capture full size screenshot - 网页长截图 Capture node screenshot - 截取指定节点截图 Capture screenshot - ...
36 天前 / 冷星1024
性能优化的目的 我们每一次的 UI 的变化，都要经历以下步骤： 我们都知道像素管道有五步，JavaScript->样式计算 ->布局 ->绘制 ->合成。 人的眼睛大约每秒可以看到 60 帧，那么就代表我们每 16.7ms 就要看到 1 帧，一帧就要经历上图的 5 步，说明我们的每一个任务（task） 不宜过长，这样就会导致用户对于界面感知的不友好性 fps 是指页面每秒帧数 fps = 60 性能极佳 fps < 24 会让用户感觉到卡顿，因为人眼的识别主要是 24 帧根据谷歌统计的数据，用户在不同时间段内接收到的反馈，可能直接影响到对于网站的用户留存...
41 天前 / Dunizb
CSS 概览面板（CSS Overview Panel）提供了关于你的 CSS 的有趣信息。你可以查看高级别的 CSS 指标，这些指标在重构时特别有用。 如何使用此功能启用此功能：从“DevTools 实验（Experiments pane）”窗格中启用 CSS Overview（Cmd + Shift + P>Show Experiments）从“DevTools”Command Menu 中选择“Show CSS Overview”（Cmd + Shift + P）在 CSS Overview 面板中，您可以导航到不同的部分：概述摘要（Overview Summary）-CSS 上有趣的指标，例如元素数量，样式表，类 vs ID 选择器，复杂选择器等等。
41 天前 / 苏生不惑
苏生不惑第 201 篇原创文章，将本公众号设为星标，第一时间看最新文章。 之前分享过 那些有趣 / 实用的 Chrome 扩展神器，准备做成一个系列，这是第 2 篇，关于谷歌浏览器安装 Chrome 扩展参考我之前的文章 那些你可能不知道的谷歌浏览器实用技巧， 上不了谷歌如何安装 Chrome 扩展？。 正则搜索平常网页上最常用 ctrl+f 搜索关键词，不过功能单一，如果想更丰富的查找功能可以使用这个插件 https://chrome.google.com/webstore/detail/chrome-regex-search/bpelaihoicobbkgmhcbikncnpacdbknn 比如使用正则 [\u4e00-\u9fa5]可以高亮显示页面的中文...
77 天前 / 苏生不惑
苏生不惑第 186 篇原创文章，将本公众号设为星标，第一时间看最新文章。 谷歌浏览器一直是我推荐的浏览器，之前也写过几篇文章： 如何让你的搜索更高效 实用油猴脚本推荐，让你的谷歌浏览器更强大 谷歌浏览器安装的 Chrome 扩展越来越多，怎么管理？ Chrome 浏览器扩展神器油猴 请停用以开发者模式运行的扩展程序？搞定谷歌浏览器插件弹窗 上不了谷歌如何安装 Chrome 扩展？ Chrome 浏览器扩展神器暴力猴 那些你可能不知道的谷歌浏览器实用技巧 最近发现谷歌浏览器地址栏可以显示 https 前缀了，右键选择总是显示完整网址就行了。
93 天前 / 劉凯里
一个阳光明媚的周末，透光的窗帘把我从睡梦中叫醒，大脑说今天是周六，可以慵懒个一上午，于是开心地打开我的 Mac 准备看两集 Rick and Morty 再起床洗漱。 我迫不及待打开了对应的网站，发现浏览器提示Nointernet，这才发现因为我的动作太过于行云流水，电脑还没来得及连上 wifiFine，那就等 wifi 自己重连吧，等待的这段时间刚好回味一下 Chrome 自带的这款小恐龙游戏。科普：Chrome 浏览器是 Google 家的官方浏览器，使用体验全世界南波万。
113 天前 / xF0rk
一、起因 随着今年某大型实战攻防演习活动的结束，不仅攻击侧展现了各式各样的武器弹药，防守侧的防护方案和策略也让人拓展了思路。 万能防守技 由于防守侧对攻击行为的发现及溯源是加分的，所以蜜罐基本上成为了今年防守的必选项，我们在今年多次实战演习和红队评估项目中均有发现蜜罐的应用。 为了实现对攻击者进行溯源和追踪，发现的 WEB 蜜罐中普遍使用了 XSSI 和 Fingerprint 相关技术。利用国内互联网大厂普遍通过 JSONP 跨域传输用户信息（没错，就是国内，国外大厂基本不用 JSONP）的漏洞来实现对攻击者的身份截获。
163 天前 / 凯凯刘
在被 Chrome 商店拒绝不下十次之后，我做的 Chrome 扩展插件终于重新上架，我觉得有必要记录一下，纪念下这个心酸的历程。 突然有一天，收到 Chrome 插件的邮件，说我的应用涉及用户权限的问题，需要自检，并提交重新审核。在这之前，我的应用已经发布了很多版本，一直也没遇到过这个问题，今天突然说有问题，有点莫名其妙。而且它也并不会明确告知是什么地方的问题。 您的产品不符合我们的计划政策的以下部分：用户数据隐私您的产品违反了此政策的“权限使用”部分，该部分要求您： 必须请求获得为实现该产品的相关功能或服务而需具备的最基本权限。
167 天前 / Dunizb
来源|https://medium.com/better-programmin 作者|Sanjeet Chatterjee 翻译|Dunizb 如果你能神奇地将你的浏览器升级为普通 Chrome 用户不知道的功能，这不是很酷吗？ 以下是十个 Chrome 功能，可帮助你做到这一点。这些实验性功能，默认情况下尚未启用。 要启用这些功能，请查看 chrome://flags。以下标志可能会在不久的将来正式发布。但是，截至撰写本文时，它们仍在测试中。 亲测有效：Chrome 和新版 Microsoft Edge 均有效。 阅读器模式阅读器模式可以去除不必要的视觉混乱，使阅读不受干扰——当如此多的视觉元素争夺我们的注意力时，这一点非常重要。
173 天前 / facert
最近在做 Chrome 商店插件的数据分析，监控一段时间后，发现了一些特别有趣的数据。 这次分享其中一个案例：My Recipe Finder 从名字上可以看出，是个菜谱查找工具。安装人数 10w+，看更新时间是今年 2 月份，通过版本号估计创建时间也是 2 月份。 通过我开发的监控工具发现安装量基本集中在 4 月份的几天，每天 1w 左右的安装量。 难道 Recipe 在国外是个爆款关键词，因为疫情原因，大家都在家做饭，导致搜索量暴增？ 怀着这个疑问，我查看了下介绍，也试用了插件，发现跟想象中的有点差距。
180 天前 / facert
如果你已经在 Chrome 网上应用店上架了一个工具，突然间，这个工具吸引了几千个用户。 然后你遇到的一个问题是如何将这个工具变现。 如果你的工具是在安卓或者苹果系统上，那么变现之路就容易多了。但是，Chrome 扩展程序在用户心目中的重要性并不相同。他们更愿意为应用程序或持续服务付费，但 Chrome 扩展程序更多处于“免费” 的境地。 许多 chrome 扩展程序都是大型产品或全球产品本身的子产品，例如 Honey，the coupon finder 和 Grammerly 这样的案例都是超级巨头，它们并不是开发人员偶然开发的一个有价值的工具。
189 天前 / 静逸秋水
Chrome 最新的版本更新了媒体控制菜单的按钮 UI，也就是每次我们的网页产生声音或者视频时候，菜单栏头像附近，方便我们在多个 Tab 进行控制时候加的，方便我们操作这些网页 Tab 下面的音视频。 尤其最新的样式实现非常酷炫，加入对封面的支持，这样整体效果看着非常棒。 很早之前我们写过一篇关于 使用 mediaSession 实现媒体播放的通知栏控制这里介绍了我们如何在网页播放音频的时候锁屏控件如何显示当前播放音乐的封面和简介，或者控制上一曲下去。
203 天前 / 苏生不惑
苏生不惑第 147 篇原创文章，将本公众号设为星标，第一时间看最新文章。 关于备份网页之前写过了如何备份可能被删的公众号文章和网页，这里再细说下。 不知道为什么现在公众号文章底部我的印象笔记去掉了。现在只能手动给公众号我的印象笔记发文章链接来保存了。 为了防止文章被删后看不了，我又整理了几个实用的备份方案。 SingleFile 这是个 Chrome 扩展 https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle ，关于如何安装 Chrome 扩展参考之前文章上不了谷歌如何安装 Chrome 扩展？,它可以将一个完整的页面保存到单个 HTML...
204 天前 / facert
译自：https://developer.chrome.com/extensions/getstarted 入门教程 扩展由不同但相互联系的组件组成。组件可以包括后台脚本，内容脚本，选项页，交互页面 和各种逻辑文件。扩展组件是使用 Web 开发技术创建的：HTML，CSS 和 JavaScript。扩展的组件各有其功能，并且是可选的。 本教程将构建一个扩展，允许用户更改 developer.chrome.com 上任何页面的背景颜色。我们将使用许多核心组件来介绍它们之间的关系。 首先，创建一个新目录来保存扩展名的文件。 创建 Manifest 扩展始于 manifest ，我们先创建一个 manifest.json 文件，包含如下代码。
205 天前 / facert
今天带大家开发一个 Chrome 浏览器插件，主要功能是下载 P 站视频，如果还不知道 P 站是干嘛的，嗯......那还是不要往下看了，这趟车最好不要上。 P 站是个学习的好地方，比如看新闻联播什么的。 但他需要登录才能下载高清视频，有的视频还需要付费下载。但是这种怎么能阻挡我们学习的好奇心呢。 如何下载 P 站高清视频 打开 Devtools， 审查元素，找到 flashvars 变量，之前的版本是直接能在这个变量下看到视频地址。 现在前端做了混淆，不能直接看到，但是只要执行完 js，地址依然能轻松拿到。我们打印 flashvars_224154541 的值。