chrome插件网页抓取
chrome插件网页抓取(管理你的扩展程序、Context–分组管理(组图))
网站优化 • 优采云 发表了文章 • 0 个评论 • 62 次浏览 • 2022-01-10 07:05
chrome插件网页抓取(管理你的扩展程序、Context–分组管理(组图))
“一键管理扩展”界面令人耳目一新。直接列出你安装的所有扩展，上面的是启用的扩展，下面黑色的是未启用的扩展。如果要停止启用扩展程序，只需找到扩展程序并单击它即可。同样，您可以在它停止运行后单击以恢复它。如果要卸载扩展程序，请右键单击该图标。操作简单，简单实用
类似插件推荐：
1.Extensions Manager : 管理你的扩展，上下文 - 分组管理 Chrome 扩展
2.Chromarks：一个支持书签搜索和管理的chrome插件【强烈推荐，这个编辑器正在使用】
2、抓图 - 一个超级方便的网页截图插件
安装插件后，浏览器地址栏后面会出现一个小S形图标。对于一些需要分享给朋友的网页，但是截图比较麻烦，或者一屏多截图，这个用起来超级方便。
这个插件功能丰富，抓取整个页面，抓取当前可见部分，抓取选中区域等等。保存时可以自由选择保存为PDF，或者图片，还可以将图片分享给朋友。我个人最喜欢的是截取整个网页直接保存为PDF，超级方便！
注意：小编在chrome插件网站上没有找到这个插件，作者的图片上也看不到这个插件的logo。所以不能给你下载链接。
类似插件推荐：
1、WinSnap——小而强大的截图软件，截图快手——截图、评论、分享
2、Awesome Screenshot：一个带有屏幕截图的chrome插件，包括全屏截图、注释和放大镜；编辑图片，保存和分享。
3、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。【我自己用】
3、汇汇购物助手-购物比价实用延伸
为“剁手党”，宇宙不爆，网购不停！每天最重要的就是买买买！而充分利用惠惠购物助手，可以帮助“手选人”在购物时不至于遭受大的损失。
汇汇助手主要有三个功能：1、全网比价，找到最低价。2、显示价格趋势，查询历史价格，避免被不良商家欺骗。3、提供海外产品一键购买服务，轻松完成海外购物。
注：小编也用过这个插件，很方便。但它只是临时使用，因为它会时不时推送广告。我不喜欢它。
类似插件推荐：
1、MySmartPrice 2.0--智能比价插件Chrome插件
2、如意涛：同款比价、价格曲线、降价提醒
4、Square 采集 - 采集一个灵感只需要0.13秒
在信息爆炸的时代，人们接收到的信息越来越碎片化。大多数人无法处理如此复杂的信息。如果他们遇到真正有用的信息，如果不采集和整理，只会让自己更加困惑。Square Piece 采集是一款扩展应用，可以快速采集电脑上的图片、视频和文字，可以帮助你快速采集想法，避免信息丢失。
安装方形采集插件后，只需将内容拖到浏览器侧边栏即可轻松完成采集。在采集后的数据管理方面，方形采集采用分类管理，支持私人采集，但暂时不支持标签。
注：小编还没用过这个方子采集插件，我会及时更新的
类似插件推荐：
1、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。采集拍照也很方便。【我自己用】
2、Evernote Web Clipper：印象笔记推出的剪贴插件，可以一键保存各类网页图片和文字，并永久保存在印象笔记中。同时，您还可以选择保存网页正文、隐藏广告、整页、网页截图等，以便您根据不同需求选择保存内容。告别复制粘贴，高效采集数据！
5、两个盒子——多引擎图片搜索+截图搜索+图片提取
图像识别是一个非常实用的功能。这个功能可以用来达到找一张图片的来源，从一张小图找一张大图的目的。目前，大部分搜索引擎都推出了逐图识别词条。第二个框是多引擎图片搜索插件，集成了谷歌、百度、必应、天眼等主流搜索引擎，同时显示各个引擎的搜索结果，方便你查找您想要的图像更快。第二个框除了可以按图搜索，还可以提取出现在所有页面的图片，包括隐藏在CSS中的图片，方便保存或按图搜索。此外，它还支持提取图片和截图搜索功能。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、Search by Image – 按图快速查找图片的 chrome 插件；
2、百度图像识别——基于百度搜索图像识别插件
6、Copyfish – OCR 扫描网页图像并识别文本
在线浏览PDF，或者边看视频边看字幕，却总是担心无法转成文字？不用担心，Copyfish 可以帮你做到这一点，Copyfish 是一款 Chrome 应用，支持网页 OCR 扫描，识别文字，并能自动翻译，支持中文。Copyfish支持图片、视频、PDF等，点击Chrome扩展栏中的Copyfish按钮后，会出现一个类似截图的箭头，然后选择要扫描的区域，OCR会识别。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、在线 OCR – 在线将 PDF/图像转换为 Word 文档，
2、文通TH-OCR——支持简繁英文的OCR工具
7、Local CDN – 替代加速，让原本的龟速网站飞起来
本地CDN是一个非常好用的Chrome扩展，可以将网页中的第三方js文件劫持到本地，让那些有访问障碍的网站重生，不慢的网站@ > 更快。
基本上现在的网站会加载各种js文件，为了访问更快，网站一起使用同一个js文件会变相减少加载次数，提高速度。本地 CDN 可以找到这些 JS 文件并下载到本地。由于它们是本地文件，因此速度非常快。即使是国内的 网站 JS 文件在本地也不会那么快。
备注：我用了一段时间，后来没再用，具体原因记不清了。
类似插件推荐：
1、gooreplacer - 替换开源库以加速网页浏览，
2、YSlow – 分析和优化您的 网站 性能
8、LastPass – 您的网络密码管理器
出于安全考虑，很多朋友喜欢在不同的网站中注册不同的密码，但这样做会给自己的记忆带来巨大的挑战，而且极易忘记密码。最好将记住密码的任务留给 LastPass。
LastPass 是一个著名的密码存储应用程序。它可以保存网站的登录页面和您的帐户密码。当用户打开对应的网站时，会自动填写账号和密码，甚至实现自动登录。您只需要记住LastPass主密码即可。
备注：一直用着真的很方便。特别适合记不住密码的人。
类似插件推荐：
1、Huami – 易于记忆且安全的密码管理器；
2、1Password – 跨平台密码管理器
写在最后，文章的大部分内容来自作者：秦风0804（简书），小编只是稍作调整和改编。
您可能对以下主题感兴趣： 查看全部
“一键管理扩展”界面令人耳目一新。直接列出你安装的所有扩展，上面的是启用的扩展，下面黑色的是未启用的扩展。如果要停止启用扩展程序，只需找到扩展程序并单击它即可。同样，您可以在它停止运行后单击以恢复它。如果要卸载扩展程序，请右键单击该图标。操作简单，简单实用
类似插件推荐：
1.Extensions Manager : 管理你的扩展，上下文 - 分组管理 Chrome 扩展
2.Chromarks：一个支持书签搜索和管理的chrome插件【强烈推荐，这个编辑器正在使用】
2、抓图 - 一个超级方便的网页截图插件
安装插件后，浏览器地址栏后面会出现一个小S形图标。对于一些需要分享给朋友的网页，但是截图比较麻烦，或者一屏多截图，这个用起来超级方便。
这个插件功能丰富，抓取整个页面，抓取当前可见部分，抓取选中区域等等。保存时可以自由选择保存为PDF，或者图片，还可以将图片分享给朋友。我个人最喜欢的是截取整个网页直接保存为PDF，超级方便！
注意：小编在chrome插件网站上没有找到这个插件，作者的图片上也看不到这个插件的logo。所以不能给你下载链接。
类似插件推荐：
1、WinSnap——小而强大的截图软件，截图快手——截图、评论、分享
2、Awesome Screenshot：一个带有屏幕截图的chrome插件，包括全屏截图、注释和放大镜；编辑图片，保存和分享。
3、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。【我自己用】
3、汇汇购物助手-购物比价实用延伸
为“剁手党”，宇宙不爆，网购不停！每天最重要的就是买买买！而充分利用惠惠购物助手，可以帮助“手选人”在购物时不至于遭受大的损失。
汇汇助手主要有三个功能：1、全网比价，找到最低价。2、显示价格趋势，查询历史价格，避免被不良商家欺骗。3、提供海外产品一键购买服务，轻松完成海外购物。
注：小编也用过这个插件，很方便。但它只是临时使用，因为它会时不时推送广告。我不喜欢它。
类似插件推荐：
1、MySmartPrice 2.0--智能比价插件Chrome插件
2、如意涛：同款比价、价格曲线、降价提醒
4、Square 采集 - 采集一个灵感只需要0.13秒
在信息爆炸的时代，人们接收到的信息越来越碎片化。大多数人无法处理如此复杂的信息。如果他们遇到真正有用的信息，如果不采集和整理，只会让自己更加困惑。Square Piece 采集是一款扩展应用，可以快速采集电脑上的图片、视频和文字，可以帮助你快速采集想法，避免信息丢失。
安装方形采集插件后，只需将内容拖到浏览器侧边栏即可轻松完成采集。在采集后的数据管理方面，方形采集采用分类管理，支持私人采集，但暂时不支持标签。
注：小编还没用过这个方子采集插件，我会及时更新的
类似插件推荐：
1、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。采集拍照也很方便。【我自己用】
2、Evernote Web Clipper：印象笔记推出的剪贴插件，可以一键保存各类网页图片和文字，并永久保存在印象笔记中。同时，您还可以选择保存网页正文、隐藏广告、整页、网页截图等，以便您根据不同需求选择保存内容。告别复制粘贴，高效采集数据！
5、两个盒子——多引擎图片搜索+截图搜索+图片提取
图像识别是一个非常实用的功能。这个功能可以用来达到找一张图片的来源，从一张小图找一张大图的目的。目前，大部分搜索引擎都推出了逐图识别词条。第二个框是多引擎图片搜索插件，集成了谷歌、百度、必应、天眼等主流搜索引擎，同时显示各个引擎的搜索结果，方便你查找您想要的图像更快。第二个框除了可以按图搜索，还可以提取出现在所有页面的图片，包括隐藏在CSS中的图片，方便保存或按图搜索。此外，它还支持提取图片和截图搜索功能。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、Search by Image – 按图快速查找图片的 chrome 插件；
2、百度图像识别——基于百度搜索图像识别插件
6、Copyfish – OCR 扫描网页图像并识别文本
在线浏览PDF，或者边看视频边看字幕，却总是担心无法转成文字？不用担心，Copyfish 可以帮你做到这一点，Copyfish 是一款 Chrome 应用，支持网页 OCR 扫描，识别文字，并能自动翻译，支持中文。Copyfish支持图片、视频、PDF等，点击Chrome扩展栏中的Copyfish按钮后，会出现一个类似截图的箭头，然后选择要扫描的区域，OCR会识别。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、在线 OCR – 在线将 PDF/图像转换为 Word 文档，
2、文通TH-OCR——支持简繁英文的OCR工具
7、Local CDN – 替代加速，让原本的龟速网站飞起来
本地CDN是一个非常好用的Chrome扩展，可以将网页中的第三方js文件劫持到本地，让那些有访问障碍的网站重生，不慢的网站@ > 更快。
基本上现在的网站会加载各种js文件，为了访问更快，网站一起使用同一个js文件会变相减少加载次数，提高速度。本地 CDN 可以找到这些 JS 文件并下载到本地。由于它们是本地文件，因此速度非常快。即使是国内的 网站 JS 文件在本地也不会那么快。
备注：我用了一段时间，后来没再用，具体原因记不清了。
类似插件推荐：
1、gooreplacer - 替换开源库以加速网页浏览，
2、YSlow – 分析和优化您的 网站 性能
8、LastPass – 您的网络密码管理器
出于安全考虑，很多朋友喜欢在不同的网站中注册不同的密码，但这样做会给自己的记忆带来巨大的挑战，而且极易忘记密码。最好将记住密码的任务留给 LastPass。
LastPass 是一个著名的密码存储应用程序。它可以保存网站的登录页面和您的帐户密码。当用户打开对应的网站时，会自动填写账号和密码，甚至实现自动登录。您只需要记住LastPass主密码即可。
备注：一直用着真的很方便。特别适合记不住密码的人。
类似插件推荐：
1、Huami – 易于记忆且安全的密码管理器；
2、1Password – 跨平台密码管理器
写在最后，文章的大部分内容来自作者：秦风0804（简书），小编只是稍作调整和改编。
您可能对以下主题感兴趣： 查看全部
chrome插件网页抓取(管理你的扩展程序、Context–分组管理(组图))
“一键管理扩展”界面令人耳目一新。直接列出你安装的所有扩展，上面的是启用的扩展，下面黑色的是未启用的扩展。如果要停止启用扩展程序，只需找到扩展程序并单击它即可。同样，您可以在它停止运行后单击以恢复它。如果要卸载扩展程序，请右键单击该图标。操作简单，简单实用
类似插件推荐：
1.Extensions Manager : 管理你的扩展，上下文 - 分组管理 Chrome 扩展
2.Chromarks：一个支持书签搜索和管理的chrome插件【强烈推荐，这个编辑器正在使用】
2、抓图 - 一个超级方便的网页截图插件
安装插件后，浏览器地址栏后面会出现一个小S形图标。对于一些需要分享给朋友的网页，但是截图比较麻烦，或者一屏多截图，这个用起来超级方便。
这个插件功能丰富，抓取整个页面，抓取当前可见部分，抓取选中区域等等。保存时可以自由选择保存为PDF，或者图片，还可以将图片分享给朋友。我个人最喜欢的是截取整个网页直接保存为PDF，超级方便！
注意：小编在chrome插件网站上没有找到这个插件，作者的图片上也看不到这个插件的logo。所以不能给你下载链接。
类似插件推荐：
1、WinSnap——小而强大的截图软件，截图快手——截图、评论、分享
2、Awesome Screenshot：一个带有屏幕截图的chrome插件，包括全屏截图、注释和放大镜；编辑图片，保存和分享。
3、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。【我自己用】
3、汇汇购物助手-购物比价实用延伸
为“剁手党”，宇宙不爆，网购不停！每天最重要的就是买买买！而充分利用惠惠购物助手，可以帮助“手选人”在购物时不至于遭受大的损失。
汇汇助手主要有三个功能：1、全网比价，找到最低价。2、显示价格趋势，查询历史价格，避免被不良商家欺骗。3、提供海外产品一键购买服务，轻松完成海外购物。
注：小编也用过这个插件，很方便。但它只是临时使用，因为它会时不时推送广告。我不喜欢它。
类似插件推荐：
1、MySmartPrice 2.0--智能比价插件Chrome插件
2、如意涛：同款比价、价格曲线、降价提醒
4、Square 采集 - 采集一个灵感只需要0.13秒
在信息爆炸的时代，人们接收到的信息越来越碎片化。大多数人无法处理如此复杂的信息。如果他们遇到真正有用的信息，如果不采集和整理，只会让自己更加困惑。Square Piece 采集是一款扩展应用，可以快速采集电脑上的图片、视频和文字，可以帮助你快速采集想法，避免信息丢失。
安装方形采集插件后，只需将内容拖到浏览器侧边栏即可轻松完成采集。在采集后的数据管理方面，方形采集采用分类管理，支持私人采集，但暂时不支持标签。
注：小编还没用过这个方子采集插件，我会及时更新的
类似插件推荐：
1、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。采集拍照也很方便。【我自己用】
2、Evernote Web Clipper：印象笔记推出的剪贴插件，可以一键保存各类网页图片和文字，并永久保存在印象笔记中。同时，您还可以选择保存网页正文、隐藏广告、整页、网页截图等，以便您根据不同需求选择保存内容。告别复制粘贴，高效采集数据！
5、两个盒子——多引擎图片搜索+截图搜索+图片提取
图像识别是一个非常实用的功能。这个功能可以用来达到找一张图片的来源，从一张小图找一张大图的目的。目前，大部分搜索引擎都推出了逐图识别词条。第二个框是多引擎图片搜索插件，集成了谷歌、百度、必应、天眼等主流搜索引擎，同时显示各个引擎的搜索结果，方便你查找您想要的图像更快。第二个框除了可以按图搜索，还可以提取出现在所有页面的图片，包括隐藏在CSS中的图片，方便保存或按图搜索。此外，它还支持提取图片和截图搜索功能。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、Search by Image – 按图快速查找图片的 chrome 插件；
2、百度图像识别——基于百度搜索图像识别插件
6、Copyfish – OCR 扫描网页图像并识别文本
在线浏览PDF，或者边看视频边看字幕，却总是担心无法转成文字？不用担心，Copyfish 可以帮你做到这一点，Copyfish 是一款 Chrome 应用，支持网页 OCR 扫描，识别文字，并能自动翻译，支持中文。Copyfish支持图片、视频、PDF等，点击Chrome扩展栏中的Copyfish按钮后，会出现一个类似截图的箭头，然后选择要扫描的区域，OCR会识别。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、在线 OCR – 在线将 PDF/图像转换为 Word 文档，
2、文通TH-OCR——支持简繁英文的OCR工具
7、Local CDN – 替代加速，让原本的龟速网站飞起来
本地CDN是一个非常好用的Chrome扩展，可以将网页中的第三方js文件劫持到本地，让那些有访问障碍的网站重生，不慢的网站@ > 更快。
基本上现在的网站会加载各种js文件，为了访问更快，网站一起使用同一个js文件会变相减少加载次数，提高速度。本地 CDN 可以找到这些 JS 文件并下载到本地。由于它们是本地文件，因此速度非常快。即使是国内的 网站 JS 文件在本地也不会那么快。
备注：我用了一段时间，后来没再用，具体原因记不清了。
类似插件推荐：
1、gooreplacer - 替换开源库以加速网页浏览，
2、YSlow – 分析和优化您的 网站 性能
8、LastPass – 您的网络密码管理器
出于安全考虑，很多朋友喜欢在不同的网站中注册不同的密码，但这样做会给自己的记忆带来巨大的挑战，而且极易忘记密码。最好将记住密码的任务留给 LastPass。
LastPass 是一个著名的密码存储应用程序。它可以保存网站的登录页面和您的帐户密码。当用户打开对应的网站时，会自动填写账号和密码，甚至实现自动登录。您只需要记住LastPass主密码即可。
备注：一直用着真的很方便。特别适合记不住密码的人。
类似插件推荐：
1、Huami – 易于记忆且安全的密码管理器；
2、1Password – 跨平台密码管理器
写在最后，文章的大部分内容来自作者：秦风0804（简书），小编只是稍作调整和改编。
您可能对以下主题感兴趣：
chrome插件网页抓取(如何快速入门HeadlessChrome生态系统，展示从已经数百万网页中学到的经验)
网站优化 • 优采云 发表了文章 • 0 个评论 • 62 次浏览 • 2022-01-06 16:05
chrome插件网页抓取(如何快速入门HeadlessChrome生态系统，展示从已经数百万网页中学到的经验)
翻译：没有两个
Headless Chrome 是 Chrome 浏览器的一种非界面形式。它可以使用Chrome支持的所有功能，无需打开浏览器即可运行程序。与现代浏览器相比，Headless Chrome 可以更方便地测试web应用、获取网站的截图、做爬虫抓取信息等，更贴近浏览器环境。一起来看看作者分享的使用Headless Chrome的网页爬虫体验吧。
PhantomJS 的发展已经停止，Headless Chrome 成为热点关注的焦点。每个人都喜欢它，包括我们。现在，网络爬虫是我们工作的很大一部分，现在我们广泛使用 Headless Chrome。
本文 文章 将告诉您如何快速开始使用 Headless Chrome 生态系统，并展示从抓取数百万个网页中学到的经验。
文章总结：
1. 控制Chrome的库有很多，大家可以根据自己的喜好选择。
2. 使用 Headless Chrome 进行网页抓取非常简单，尤其是在掌握了以下技巧之后。
3. 可以检测到无头浏览器访问者，但没有人可以检测到。
无头镀铬简介
Headless Chrome 基于 Google Chrome 团队开发的 PhantomJS（QtWebKit 核心）。团队表示将专注于该项目的研发，未来将继续维护。
这意味着对于网页抓取和自动化需求，您现在可以体验到 Chrome 的速度和功能，因为它具有世界上最常用的浏览器的特性：支持所有 网站，支持 JS 引擎，以及伟大的开发者工具 API。它是可怕的！
我应该使用哪个工具来控制 Headless Chrome？
市面上确实有很多NodeJS库支持Chrome新的headless模式，每个库都有自己的特点。我们自己的一个是 NickJS。如果你没有自己的爬虫库，你怎么敢说你是网络爬虫专家。
还有一套与社区一起发布的其他语言的库，比如基于GO语言的。我们推荐使用 NodeJS 工具，因为它与 Web 解析语言相同（您将在下面看到它是多么方便）。
网络爬虫？不违法吗？
我们无意挑起无休止的争议，但不到两周前，一位美国地区法官命令第三方抓取 LinkedIn 的公开文件。到目前为止，这只是一项初步法律，诉讼还将继续。LinkedIn肯定会反对，不过放心，我们会密切关注情况，因为这个文章讲了很多关于LinkedIn的内容。
无论如何，作为技术文章，我们不会深入研究具体爬虫操作的合法性。我们应该始终努力尊重目标 网站 的 ToS。并且不会对您在此文章 中了解到的任何损害负责。
到目前为止学到的很酷的东西
下面列出的一些技术，我们几乎每天都在使用。代码示例使用 NickJS 爬网库，但它们可以很容易地被其他 Headless Chrome 工具重写。重要的是分享这个概念。
将饼干放回饼干罐中
使用全功能的浏览器进行爬取，让人安心，不用担心CORS、session、cookies、CSRF等web问题。
但是有时候登录表单会变得很棘手，唯一的解决办法就是恢复之前保存的会话cookie。当检测到故障时，一些网站会发送电子邮件或短信。我们没有时间这样做，我们只是使用已经设置的会话cookie来打开页面。
LinkedIn有一个很好的例子，设置li_atcookie可以保证爬虫访问他们的社交网络（记住：注意尊重目标网站Tos）。
await nick.setCookie({ name: "li_at", value: "a session cookie value copied from your DevTools", domain: "www.linkedin.com" })
我相信像LinkedIn这样的网站不会使用有效的会话cookie来阻止真正的浏览器访问。这是相当危险的，因为错误的信息会触发愤怒用户的大量支持请求。
jQuery 不会让你失望
我们学到的一件重要事情是，通过 jQuery 从网页中提取数据非常容易。回想起来，这是显而易见的。网站 提供了一个高度结构化、可查询的收录数据元素的树（称为 DOM），而 jQuery 是一个非常高效的 DOM 查询库。那么为什么不使用它进行爬行呢？这种技术将被一次又一次地尝试。
很多网站已经用过jQuery了，所以在页面中添加几行就可以获取数据了。
await tab.open("news.ycombinator.com") await tab.untilVisible("#hnmain") // Make sure we have loaded the page await tab.inject("https://code.jquery.com/jquery-3.2.1.min.js") // We're going to use jQuery to scrape const hackerNewsLinks = await tab.evaluate((arg, callback) => { // Here we're in the page context. It's like being in your browser's inspector tool const data = [] $(".athing").each((index, element) => { data.push({ title: $(element).find(".storylink").text(), url: $(element).find(".storylink").attr("href") }) }) callback(null, data) })
印度、俄罗斯和巴基斯坦与屏蔽机器人的做法有什么共同点？
答案是使用验证码来解决服务器验证。几块钱就可以买到上千个验证码，生成一个验证码通常需要不到30秒的时间。但是到了晚上，因为没有人，一般都比较贵。
一个简单的谷歌搜索将提供多个 API 来解决任何类型的验证码问题，包括获取谷歌最新的 recaptcha 验证码（21,000 美元）。
将爬虫机连接到这些服务就像发出一个 HTTP 请求一样简单，现在机器人是一个人。
在我们的平台上，用户可以轻松解决他们需要的验证码问题。我们的 Buster 库可以：
if (await tab.isVisible(".captchaImage")) { // Get the URL of the generated CAPTCHA image // Note that we could also get its -encoded value and solve it too const captchaImageLink = await tab.evaluate((arg, callback) => { callback(null, $(".captchaImage").attr("src")) }) // Make a call to a CAPTCHA solving service const captchaAnswer = await buster.solveCaptchaImage(captchaImageLink) // Fill the form with our solution await tab.fill(".captchaForm", { "captcha-answer": captchaAnswer }, { submit: true }) }
等待DOM元素，不是固定时间
经常看到爬行初学者要求他们的机器人在打开页面或点击按钮后等待 5 到 10 秒——他们想确保他们所做的动作有时间产生效果。
但这不是应该做的。我们的 3 步理论适用于任何爬行场景：您应该等待的是您要操作的特定 DOM 元素。它更快更清晰，如果出现问题，您将获得更准确的错误提示。
await tab.open("https://www.facebook.com/phbus ... 6quot;) // await Promise.delay(5000) // DON'T DO THIS! await tab.waitUntilVisible(".permalinkPost .UFILikeLink") // You can now safely click the "Like" button... await tab.click(".permalinkPost .UFILikeLink")
在某些情况下，可能确实有必要伪造人为延误。可以使用
await Promise.delay(2000 + Math.random() * 3000)
糊弄过去。
MongoDB
我们发现MongoDB非常适合大部分的爬虫工作，它有一套优秀的JS API和Mongoose ORM。考虑到你在使用 Headless Chrome 时已经在 NodeJS 环境中了，为什么不采用呢？
JSON-LD 和微数据开发
有时网络爬虫不需要了解DOM，而是要找到正确的“导出”按钮。记住这一点可以节省很多时间。
严格来说，有些网站会比其他网站容易。例如，他们所有的产品页面都以 JSON-LD 产品数据的形式显示在 DOM 中。您可以与他们的任何产品页面交谈，然后运行
JSON.parse(document . queryselector(" # productSEOData "). innertext)
你会得到一个非常好的数据对象，可以插入到MongoDB中，不需要真正的爬取！
网络请求拦截
因为使用的是DevTools API，所以编写的代码具有使用Chrome的DevTools的等效功能。这意味着生成的机器人可以拦截、检查甚至修改或中止任何网络请求。
通过从LinkedIn下载PDF格式的简历来测试网络请求拦截。点击配置文件中的“Save to PDF”按钮，触发XHR，响应内容为PDF文件，是一种截取文件写入磁盘的方法。
let cvRequestId = null tab.driver.client.Network.responseReceived((e) => { if (e.type === "XHR" && e.response.url.indexOf("profile-profilePdf/") > 0) { cvRequestId = e.requestId } }) tab.driver.client.Network.loadingFinished((e) => { if (e.requestId === cvRequestId) { tab.driver.client.Network.getResponseBody({ requestId: cvRequestId }, (err, cv) => { require("fs").writeFileSync("linkedin-cv.pdf", Buffer.from(cv.body, (cv.Encoded ? '' : 'utf8'))) }) } })
值得一提的是，DevTools 协议发展很快，现在有一种方法可以使用 Page.setDownloadBehavior() 来设置下载传入文件的方法和路径。我们还没有测试它，但它看起来很有希望！
广告拦截
const nick = new Nick({ loadImages: false, whitelist: [ /.*\.aspx/, /.*axd.*/, /.*\.html.*/, /.*\.js.*/ ], blacklist: [ /.*fsispin360\.js/, /.*fsitouchzoom\.js/, /.*\.ashx.*/, /.*google.*/ ] })
还可以通过阻止不必要的请求来加速爬行。分析、广告和图像是典型的阻塞目标。但是，请记住，这会使机器人变得不那么像人（例如，如果所有图片都被屏蔽了，LinkedIn 将无法正确响应页面请求——不确定这是不是故意的）。
在 NickJS 中，用户可以指定收录正则表达式或字符串的白名单和黑名单。白名单特别强大，但是一不小心，很容易让目标网站崩溃。
DevTools 协议还有 Network.setBlockedURLs()，它使用带有通配符的字符串数组作为输入。
更重要的是，新版Chrome会自带谷歌自己的“广告拦截器”——它更像是一个广告“过滤器”。该协议已经有一个名为 Page.setAdBlockingEnabled() 的端点。
这就是我们正在谈论的技术！
无头 Chrome 检测
最近发表的一篇文章文章列举了多种检测Headless Chrome访问者的方法，也可以检测PhantomJS。这些方法描述了基本的 User-Agent 字符串与更复杂的技术（例如触发错误和检查堆栈跟踪）的比较。
在愤怒的管理员和聪明的机器人制造者之间，这基本上是猫捉老鼠游戏的放大版。但我从未见过这些方法正式实施。检测自动访问者在技术上是可能的，但谁愿意面对潜在的错误消息？这对于大型 网站 来说尤其危险。
如果你知道那些网站有这些检测功能，请告诉我们！
结束语
爬行从未如此简单。借助我们最新的工具和技术，它甚至可以成为我们开发人员的一项愉快而有趣的活动。
顺便说一句，我们受到了 Franciskim.co “我不需要一个臭 API”的启发 文章，非常感谢！此外，有关如何开始使用 Puppets 的详细说明，请单击此处。
在下一篇文章中，我会写一些“bot缓解”工具，比如Distill Networks，聊聊HTTP代理和IP地址分配的奇妙世界。
网络上有一个我们的抓取和自动化平台库。如果你有兴趣，还可以了解一下我们3个爬行步骤的理论信息。 查看全部
翻译：没有两个
Headless Chrome 是 Chrome 浏览器的一种非界面形式。它可以使用Chrome支持的所有功能，无需打开浏览器即可运行程序。与现代浏览器相比，Headless Chrome 可以更方便地测试web应用、获取网站的截图、做爬虫抓取信息等，更贴近浏览器环境。一起来看看作者分享的使用Headless Chrome的网页爬虫体验吧。
PhantomJS 的发展已经停止，Headless Chrome 成为热点关注的焦点。每个人都喜欢它，包括我们。现在，网络爬虫是我们工作的很大一部分，现在我们广泛使用 Headless Chrome。
本文 文章 将告诉您如何快速开始使用 Headless Chrome 生态系统，并展示从抓取数百万个网页中学到的经验。
文章总结：
1. 控制Chrome的库有很多，大家可以根据自己的喜好选择。
2. 使用 Headless Chrome 进行网页抓取非常简单，尤其是在掌握了以下技巧之后。
3. 可以检测到无头浏览器访问者，但没有人可以检测到。
无头镀铬简介
Headless Chrome 基于 Google Chrome 团队开发的 PhantomJS（QtWebKit 核心）。团队表示将专注于该项目的研发，未来将继续维护。
这意味着对于网页抓取和自动化需求，您现在可以体验到 Chrome 的速度和功能，因为它具有世界上最常用的浏览器的特性：支持所有 网站，支持 JS 引擎，以及伟大的开发者工具 API。它是可怕的！
我应该使用哪个工具来控制 Headless Chrome？
市面上确实有很多NodeJS库支持Chrome新的headless模式，每个库都有自己的特点。我们自己的一个是 NickJS。如果你没有自己的爬虫库，你怎么敢说你是网络爬虫专家。
还有一套与社区一起发布的其他语言的库，比如基于GO语言的。我们推荐使用 NodeJS 工具，因为它与 Web 解析语言相同（您将在下面看到它是多么方便）。
网络爬虫？不违法吗？
我们无意挑起无休止的争议，但不到两周前，一位美国地区法官命令第三方抓取 LinkedIn 的公开文件。到目前为止，这只是一项初步法律，诉讼还将继续。LinkedIn肯定会反对，不过放心，我们会密切关注情况，因为这个文章讲了很多关于LinkedIn的内容。
无论如何，作为技术文章，我们不会深入研究具体爬虫操作的合法性。我们应该始终努力尊重目标 网站 的 ToS。并且不会对您在此文章 中了解到的任何损害负责。
到目前为止学到的很酷的东西
下面列出的一些技术，我们几乎每天都在使用。代码示例使用 NickJS 爬网库，但它们可以很容易地被其他 Headless Chrome 工具重写。重要的是分享这个概念。
将饼干放回饼干罐中
使用全功能的浏览器进行爬取，让人安心，不用担心CORS、session、cookies、CSRF等web问题。
但是有时候登录表单会变得很棘手，唯一的解决办法就是恢复之前保存的会话cookie。当检测到故障时，一些网站会发送电子邮件或短信。我们没有时间这样做，我们只是使用已经设置的会话cookie来打开页面。
LinkedIn有一个很好的例子，设置li_atcookie可以保证爬虫访问他们的社交网络（记住：注意尊重目标网站Tos）。
await nick.setCookie({ name: "li_at", value: "a session cookie value copied from your DevTools", domain: "www.linkedin.com" })
我相信像LinkedIn这样的网站不会使用有效的会话cookie来阻止真正的浏览器访问。这是相当危险的，因为错误的信息会触发愤怒用户的大量支持请求。
jQuery 不会让你失望
我们学到的一件重要事情是，通过 jQuery 从网页中提取数据非常容易。回想起来，这是显而易见的。网站 提供了一个高度结构化、可查询的收录数据元素的树（称为 DOM），而 jQuery 是一个非常高效的 DOM 查询库。那么为什么不使用它进行爬行呢？这种技术将被一次又一次地尝试。
很多网站已经用过jQuery了，所以在页面中添加几行就可以获取数据了。
await tab.open("news.ycombinator.com") await tab.untilVisible("#hnmain") // Make sure we have loaded the page await tab.inject("https://code.jquery.com/jquery-3.2.1.min.js") // We're going to use jQuery to scrape const hackerNewsLinks = await tab.evaluate((arg, callback) => { // Here we're in the page context. It's like being in your browser's inspector tool const data = [] $(".athing").each((index, element) => { data.push({ title: $(element).find(".storylink").text(), url: $(element).find(".storylink").attr("href") }) }) callback(null, data) })
印度、俄罗斯和巴基斯坦与屏蔽机器人的做法有什么共同点？
答案是使用验证码来解决服务器验证。几块钱就可以买到上千个验证码，生成一个验证码通常需要不到30秒的时间。但是到了晚上，因为没有人，一般都比较贵。
一个简单的谷歌搜索将提供多个 API 来解决任何类型的验证码问题，包括获取谷歌最新的 recaptcha 验证码（21,000 美元）。
将爬虫机连接到这些服务就像发出一个 HTTP 请求一样简单，现在机器人是一个人。
在我们的平台上，用户可以轻松解决他们需要的验证码问题。我们的 Buster 库可以：
if (await tab.isVisible(".captchaImage")) { // Get the URL of the generated CAPTCHA image // Note that we could also get its -encoded value and solve it too const captchaImageLink = await tab.evaluate((arg, callback) => { callback(null, $(".captchaImage").attr("src")) }) // Make a call to a CAPTCHA solving service const captchaAnswer = await buster.solveCaptchaImage(captchaImageLink) // Fill the form with our solution await tab.fill(".captchaForm", { "captcha-answer": captchaAnswer }, { submit: true }) }
等待DOM元素，不是固定时间
经常看到爬行初学者要求他们的机器人在打开页面或点击按钮后等待 5 到 10 秒——他们想确保他们所做的动作有时间产生效果。
但这不是应该做的。我们的 3 步理论适用于任何爬行场景：您应该等待的是您要操作的特定 DOM 元素。它更快更清晰，如果出现问题，您将获得更准确的错误提示。
await tab.open("https://www.facebook.com/phbus ... 6quot;) // await Promise.delay(5000) // DON'T DO THIS! await tab.waitUntilVisible(".permalinkPost .UFILikeLink") // You can now safely click the "Like" button... await tab.click(".permalinkPost .UFILikeLink")
在某些情况下，可能确实有必要伪造人为延误。可以使用
await Promise.delay(2000 + Math.random() * 3000)
糊弄过去。
MongoDB
我们发现MongoDB非常适合大部分的爬虫工作，它有一套优秀的JS API和Mongoose ORM。考虑到你在使用 Headless Chrome 时已经在 NodeJS 环境中了，为什么不采用呢？
JSON-LD 和微数据开发
有时网络爬虫不需要了解DOM，而是要找到正确的“导出”按钮。记住这一点可以节省很多时间。
严格来说，有些网站会比其他网站容易。例如，他们所有的产品页面都以 JSON-LD 产品数据的形式显示在 DOM 中。您可以与他们的任何产品页面交谈，然后运行
JSON.parse(document . queryselector(" # productSEOData "). innertext)
你会得到一个非常好的数据对象，可以插入到MongoDB中，不需要真正的爬取！
网络请求拦截
因为使用的是DevTools API，所以编写的代码具有使用Chrome的DevTools的等效功能。这意味着生成的机器人可以拦截、检查甚至修改或中止任何网络请求。
通过从LinkedIn下载PDF格式的简历来测试网络请求拦截。点击配置文件中的“Save to PDF”按钮，触发XHR，响应内容为PDF文件，是一种截取文件写入磁盘的方法。
let cvRequestId = null tab.driver.client.Network.responseReceived((e) => { if (e.type === "XHR" && e.response.url.indexOf("profile-profilePdf/") > 0) { cvRequestId = e.requestId } }) tab.driver.client.Network.loadingFinished((e) => { if (e.requestId === cvRequestId) { tab.driver.client.Network.getResponseBody({ requestId: cvRequestId }, (err, cv) => { require("fs").writeFileSync("linkedin-cv.pdf", Buffer.from(cv.body, (cv.Encoded ? '' : 'utf8'))) }) } })
值得一提的是，DevTools 协议发展很快，现在有一种方法可以使用 Page.setDownloadBehavior() 来设置下载传入文件的方法和路径。我们还没有测试它，但它看起来很有希望！
广告拦截
const nick = new Nick({ loadImages: false, whitelist: [ /.*\.aspx/, /.*axd.*/, /.*\.html.*/, /.*\.js.*/ ], blacklist: [ /.*fsispin360\.js/, /.*fsitouchzoom\.js/, /.*\.ashx.*/, /.*google.*/ ] })
还可以通过阻止不必要的请求来加速爬行。分析、广告和图像是典型的阻塞目标。但是，请记住，这会使机器人变得不那么像人（例如，如果所有图片都被屏蔽了，LinkedIn 将无法正确响应页面请求——不确定这是不是故意的）。
在 NickJS 中，用户可以指定收录正则表达式或字符串的白名单和黑名单。白名单特别强大，但是一不小心，很容易让目标网站崩溃。
DevTools 协议还有 Network.setBlockedURLs()，它使用带有通配符的字符串数组作为输入。
更重要的是，新版Chrome会自带谷歌自己的“广告拦截器”——它更像是一个广告“过滤器”。该协议已经有一个名为 Page.setAdBlockingEnabled() 的端点。
这就是我们正在谈论的技术！
无头 Chrome 检测
最近发表的一篇文章文章列举了多种检测Headless Chrome访问者的方法，也可以检测PhantomJS。这些方法描述了基本的 User-Agent 字符串与更复杂的技术（例如触发错误和检查堆栈跟踪）的比较。
在愤怒的管理员和聪明的机器人制造者之间，这基本上是猫捉老鼠游戏的放大版。但我从未见过这些方法正式实施。检测自动访问者在技术上是可能的，但谁愿意面对潜在的错误消息？这对于大型 网站 来说尤其危险。
如果你知道那些网站有这些检测功能，请告诉我们！
结束语
爬行从未如此简单。借助我们最新的工具和技术，它甚至可以成为我们开发人员的一项愉快而有趣的活动。
顺便说一句，我们受到了 Franciskim.co “我不需要一个臭 API”的启发 文章，非常感谢！此外，有关如何开始使用 Puppets 的详细说明，请单击此处。
在下一篇文章中，我会写一些“bot缓解”工具，比如Distill Networks，聊聊HTTP代理和IP地址分配的奇妙世界。
网络上有一个我们的抓取和自动化平台库。如果你有兴趣，还可以了解一下我们3个爬行步骤的理论信息。 查看全部
chrome插件网页抓取(如何快速入门HeadlessChrome生态系统，展示从已经数百万网页中学到的经验)
翻译：没有两个
Headless Chrome 是 Chrome 浏览器的一种非界面形式。它可以使用Chrome支持的所有功能，无需打开浏览器即可运行程序。与现代浏览器相比，Headless Chrome 可以更方便地测试web应用、获取网站的截图、做爬虫抓取信息等，更贴近浏览器环境。一起来看看作者分享的使用Headless Chrome的网页爬虫体验吧。
PhantomJS 的发展已经停止，Headless Chrome 成为热点关注的焦点。每个人都喜欢它，包括我们。现在，网络爬虫是我们工作的很大一部分，现在我们广泛使用 Headless Chrome。
本文 文章 将告诉您如何快速开始使用 Headless Chrome 生态系统，并展示从抓取数百万个网页中学到的经验。
文章总结：
1. 控制Chrome的库有很多，大家可以根据自己的喜好选择。
2. 使用 Headless Chrome 进行网页抓取非常简单，尤其是在掌握了以下技巧之后。
3. 可以检测到无头浏览器访问者，但没有人可以检测到。
无头镀铬简介
Headless Chrome 基于 Google Chrome 团队开发的 PhantomJS（QtWebKit 核心）。团队表示将专注于该项目的研发，未来将继续维护。
这意味着对于网页抓取和自动化需求，您现在可以体验到 Chrome 的速度和功能，因为它具有世界上最常用的浏览器的特性：支持所有 网站，支持 JS 引擎，以及伟大的开发者工具 API。它是可怕的！
我应该使用哪个工具来控制 Headless Chrome？
市面上确实有很多NodeJS库支持Chrome新的headless模式，每个库都有自己的特点。我们自己的一个是 NickJS。如果你没有自己的爬虫库，你怎么敢说你是网络爬虫专家。
还有一套与社区一起发布的其他语言的库，比如基于GO语言的。我们推荐使用 NodeJS 工具，因为它与 Web 解析语言相同（您将在下面看到它是多么方便）。
网络爬虫？不违法吗？
我们无意挑起无休止的争议，但不到两周前，一位美国地区法官命令第三方抓取 LinkedIn 的公开文件。到目前为止，这只是一项初步法律，诉讼还将继续。LinkedIn肯定会反对，不过放心，我们会密切关注情况，因为这个文章讲了很多关于LinkedIn的内容。
无论如何，作为技术文章，我们不会深入研究具体爬虫操作的合法性。我们应该始终努力尊重目标 网站 的 ToS。并且不会对您在此文章 中了解到的任何损害负责。
到目前为止学到的很酷的东西
下面列出的一些技术，我们几乎每天都在使用。代码示例使用 NickJS 爬网库，但它们可以很容易地被其他 Headless Chrome 工具重写。重要的是分享这个概念。
将饼干放回饼干罐中
使用全功能的浏览器进行爬取，让人安心，不用担心CORS、session、cookies、CSRF等web问题。
但是有时候登录表单会变得很棘手，唯一的解决办法就是恢复之前保存的会话cookie。当检测到故障时，一些网站会发送电子邮件或短信。我们没有时间这样做，我们只是使用已经设置的会话cookie来打开页面。
LinkedIn有一个很好的例子，设置li_atcookie可以保证爬虫访问他们的社交网络（记住：注意尊重目标网站Tos）。
await nick.setCookie({ name: "li_at", value: "a session cookie value copied from your DevTools", domain: "www.linkedin.com" })
我相信像LinkedIn这样的网站不会使用有效的会话cookie来阻止真正的浏览器访问。这是相当危险的，因为错误的信息会触发愤怒用户的大量支持请求。
jQuery 不会让你失望
我们学到的一件重要事情是，通过 jQuery 从网页中提取数据非常容易。回想起来，这是显而易见的。网站 提供了一个高度结构化、可查询的收录数据元素的树（称为 DOM），而 jQuery 是一个非常高效的 DOM 查询库。那么为什么不使用它进行爬行呢？这种技术将被一次又一次地尝试。
很多网站已经用过jQuery了，所以在页面中添加几行就可以获取数据了。
await tab.open("news.ycombinator.com") await tab.untilVisible("#hnmain") // Make sure we have loaded the page await tab.inject("https://code.jquery.com/jquery-3.2.1.min.js";) // We're going to use jQuery to scrape const hackerNewsLinks = await tab.evaluate((arg, callback) => { // Here we're in the page context. It's like being in your browser's inspector tool const data = [] $(".athing").each((index, element) => { data.push({ title: $(element).find(".storylink").text(), url: $(element).find(".storylink").attr("href") }) }) callback(null, data) })
印度、俄罗斯和巴基斯坦与屏蔽机器人的做法有什么共同点？
答案是使用验证码来解决服务器验证。几块钱就可以买到上千个验证码，生成一个验证码通常需要不到30秒的时间。但是到了晚上，因为没有人，一般都比较贵。
一个简单的谷歌搜索将提供多个 API 来解决任何类型的验证码问题，包括获取谷歌最新的 recaptcha 验证码（21,000 美元）。
将爬虫机连接到这些服务就像发出一个 HTTP 请求一样简单，现在机器人是一个人。
在我们的平台上，用户可以轻松解决他们需要的验证码问题。我们的 Buster 库可以：
if (await tab.isVisible(".captchaImage")) { // Get the URL of the generated CAPTCHA image // Note that we could also get its -encoded value and solve it too const captchaImageLink = await tab.evaluate((arg, callback) => { callback(null, $(".captchaImage").attr("src")) }) // Make a call to a CAPTCHA solving service const captchaAnswer = await buster.solveCaptchaImage(captchaImageLink) // Fill the form with our solution await tab.fill(".captchaForm", { "captcha-answer": captchaAnswer }, { submit: true }) }
等待DOM元素，不是固定时间
经常看到爬行初学者要求他们的机器人在打开页面或点击按钮后等待 5 到 10 秒——他们想确保他们所做的动作有时间产生效果。
但这不是应该做的。我们的 3 步理论适用于任何爬行场景：您应该等待的是您要操作的特定 DOM 元素。它更快更清晰，如果出现问题，您将获得更准确的错误提示。
await tab.open("https://www.facebook.com/phbus ... 6quot;) // await Promise.delay(5000) // DON'T DO THIS! await tab.waitUntilVisible(".permalinkPost .UFILikeLink") // You can now safely click the "Like" button... await tab.click(".permalinkPost .UFILikeLink")
在某些情况下，可能确实有必要伪造人为延误。可以使用
await Promise.delay(2000 + Math.random() * 3000)
糊弄过去。
MongoDB
我们发现MongoDB非常适合大部分的爬虫工作，它有一套优秀的JS API和Mongoose ORM。考虑到你在使用 Headless Chrome 时已经在 NodeJS 环境中了，为什么不采用呢？
JSON-LD 和微数据开发
有时网络爬虫不需要了解DOM，而是要找到正确的“导出”按钮。记住这一点可以节省很多时间。
严格来说，有些网站会比其他网站容易。例如，他们所有的产品页面都以 JSON-LD 产品数据的形式显示在 DOM 中。您可以与他们的任何产品页面交谈，然后运行
JSON.parse(document . queryselector(" # productSEOData "). innertext)
你会得到一个非常好的数据对象，可以插入到MongoDB中，不需要真正的爬取！
网络请求拦截
因为使用的是DevTools API，所以编写的代码具有使用Chrome的DevTools的等效功能。这意味着生成的机器人可以拦截、检查甚至修改或中止任何网络请求。
通过从LinkedIn下载PDF格式的简历来测试网络请求拦截。点击配置文件中的“Save to PDF”按钮，触发XHR，响应内容为PDF文件，是一种截取文件写入磁盘的方法。
let cvRequestId = null tab.driver.client.Network.responseReceived((e) => { if (e.type === "XHR" && e.response.url.indexOf("profile-profilePdf/") > 0) { cvRequestId = e.requestId } }) tab.driver.client.Network.loadingFinished((e) => { if (e.requestId === cvRequestId) { tab.driver.client.Network.getResponseBody({ requestId: cvRequestId }, (err, cv) => { require("fs").writeFileSync("linkedin-cv.pdf", Buffer.from(cv.body, (cv.Encoded ? '' : 'utf8'))) }) } })
值得一提的是，DevTools 协议发展很快，现在有一种方法可以使用 Page.setDownloadBehavior() 来设置下载传入文件的方法和路径。我们还没有测试它，但它看起来很有希望！
广告拦截
const nick = new Nick({ loadImages: false, whitelist: [ /.*\.aspx/, /.*axd.*/, /.*\.html.*/, /.*\.js.*/ ], blacklist: [ /.*fsispin360\.js/, /.*fsitouchzoom\.js/, /.*\.ashx.*/, /.*google.*/ ] })
还可以通过阻止不必要的请求来加速爬行。分析、广告和图像是典型的阻塞目标。但是，请记住，这会使机器人变得不那么像人（例如，如果所有图片都被屏蔽了，LinkedIn 将无法正确响应页面请求——不确定这是不是故意的）。
在 NickJS 中，用户可以指定收录正则表达式或字符串的白名单和黑名单。白名单特别强大，但是一不小心，很容易让目标网站崩溃。
DevTools 协议还有 Network.setBlockedURLs()，它使用带有通配符的字符串数组作为输入。
更重要的是，新版Chrome会自带谷歌自己的“广告拦截器”——它更像是一个广告“过滤器”。该协议已经有一个名为 Page.setAdBlockingEnabled() 的端点。
这就是我们正在谈论的技术！
无头 Chrome 检测
最近发表的一篇文章文章列举了多种检测Headless Chrome访问者的方法，也可以检测PhantomJS。这些方法描述了基本的 User-Agent 字符串与更复杂的技术（例如触发错误和检查堆栈跟踪）的比较。
在愤怒的管理员和聪明的机器人制造者之间，这基本上是猫捉老鼠游戏的放大版。但我从未见过这些方法正式实施。检测自动访问者在技术上是可能的，但谁愿意面对潜在的错误消息？这对于大型 网站 来说尤其危险。
如果你知道那些网站有这些检测功能，请告诉我们！
结束语
爬行从未如此简单。借助我们最新的工具和技术，它甚至可以成为我们开发人员的一项愉快而有趣的活动。
顺便说一句，我们受到了 Franciskim.co “我不需要一个臭 API”的启发 文章，非常感谢！此外，有关如何开始使用 Puppets 的详细说明，请单击此处。
在下一篇文章中，我会写一些“bot缓解”工具，比如Distill Networks，聊聊HTTP代理和IP地址分配的奇妙世界。
网络上有一个我们的抓取和自动化平台库。如果你有兴趣，还可以了解一下我们3个爬行步骤的理论信息。
chrome插件网页抓取(想从Facebook获取电子邮件地址就需要一些工具和技巧？)
网站优化 • 优采云 发表了文章 • 0 个评论 • 53 次浏览 • 2022-01-06 11:14
chrome插件网页抓取(想从Facebook获取电子邮件地址就需要一些工具和技巧？)
要从 Facebook 获取电子邮件地址，需要一些工具和技能。这里有几个选项供大家选择：
选项 1：电子邮件提取器
Email Extractor 是 Google Chrome 浏览器的插件。它可以帮助您在打开的任何网页上找到您的邮箱。
首先，将其添加到 Google Chrome 浏览器。然后访问您想要抓取的任何 Facebook 页面或 Facebook 群组。Facebook 不会一次加载大量内容，您需要向下滚动。这样，Email Extractor 可以识别和提取更多邮箱。以 Facebook 群组为例：
提示：帖子未展开的部分将无法识别。
您也可以在公共主页和个人联系信息页面上抓取邮箱（如果显示）。
选项 2：电子邮件导出器
要引入的第二个选项是电子邮件导出器。这是另一个以相同方式执行基本相同操作的 Chrome 扩展程序。安装后，访问目标页面并滚动浏览您要抓取的任何组或页面，直到您觉得采集了足够的信息。
电子邮件提取器和电子邮件导出器之间没有太大区别。主要区别在于Exporter可以获取电话号码，也更方便您导出和保存。
选项 3：电子邮件猎人
第三个 Chrome 扩展。就像上面两个一样，当一个收录公共数据的页面被打开时，该数据将被抓取。它与上面两个非常相似。说实话，这三个插件没有明显区别，大家可以根据使用效果来选择。它们都是免费的且使用起来非常方便，这就是我们建议您使用 Google 扩展程序的原因。
提示：所有电子邮件标签通常可以帮助您找到更多邮箱。
值得一提的是，使用所有这些插件，您只能找到页面上可见的电子邮件地址。许多人的电子邮件地址与 Facebook 页面相关联，但隐私设置被关闭，在这种情况下，无法抓取它们。
除了我们介绍的三个之外，至少还有十几种适合Chrome的爬虫。您也可以自己尝试其他选项。
选项 4：原子公园
Atom Park Atomic Email Hunter 是另一种电子邮件抓取工具。它不是 Chrome 扩展程序，而是一个独立的软件。
它相对容易使用。启动程序并转到“搜索”菜单。从那里，它会询问您要搜索的位置，输入要抓取的组或页面的 URL，进行一些必要的设置，然后就可以运行了！
与之前的工具不同，Atom Park 会在可能的情况下将电子邮件地址、地址来源和用户名相互关联。这样，您就可以知道自己的电子邮件地址是从哪里获得的，而不仅仅是一个没有名称或标签的列表。
这个软件不是免费的。Atomic Email Hunter 是一款售价 80 美元的软件。您可以在他们的 网站 上免费下载，但试用版的功能有限。
你会发现Facebook上的群组是一个收获邮箱的好地方，所以我们应该尽量加入尽可能多的行业相关群组。此外，这些工具不仅适用于 Facebook、LinkedIn 和任何网页。
选项 5：Gmail 电子邮件提取器（非 Facebook 提取工具）
Gmail Email Extractor 是一个 Google 电子表格插件，用于 Google Sheets。此扩展程序允许您从 G Suite 和 Gmail 帐户中检索电子邮件地址。它将提取的信息保存在 Google 电子表格中。
该工具还允许您选择提取邮箱的条件，例如“发件人”、“抄送”、“密件抄送”和“回复”部分，并且可以将邮件列表导出为 TXT 或 CSV。
如果您的 Gmail 联系人列表很大，这个工具会非常有用。它可以帮助您从帐户中提取电子邮件地址并节省大量时间。
提示：虽然本文将介绍直接获取邮件的方法，但我强烈建议大家不要抓取大量陌生邮件，然后发送未经授权的开发信。这几乎是垃圾邮件的定义。我们应该尽量在发送邮件之前获得用户的许可，否则很容易被黑客入侵。或者您可以使用这些工具作为辅助 查看全部
要从 Facebook 获取电子邮件地址，需要一些工具和技能。这里有几个选项供大家选择：
选项 1：电子邮件提取器
Email Extractor 是 Google Chrome 浏览器的插件。它可以帮助您在打开的任何网页上找到您的邮箱。
首先，将其添加到 Google Chrome 浏览器。然后访问您想要抓取的任何 Facebook 页面或 Facebook 群组。Facebook 不会一次加载大量内容，您需要向下滚动。这样，Email Extractor 可以识别和提取更多邮箱。以 Facebook 群组为例：
提示：帖子未展开的部分将无法识别。
您也可以在公共主页和个人联系信息页面上抓取邮箱（如果显示）。
选项 2：电子邮件导出器
要引入的第二个选项是电子邮件导出器。这是另一个以相同方式执行基本相同操作的 Chrome 扩展程序。安装后，访问目标页面并滚动浏览您要抓取的任何组或页面，直到您觉得采集了足够的信息。
电子邮件提取器和电子邮件导出器之间没有太大区别。主要区别在于Exporter可以获取电话号码，也更方便您导出和保存。
选项 3：电子邮件猎人
第三个 Chrome 扩展。就像上面两个一样，当一个收录公共数据的页面被打开时，该数据将被抓取。它与上面两个非常相似。说实话，这三个插件没有明显区别，大家可以根据使用效果来选择。它们都是免费的且使用起来非常方便，这就是我们建议您使用 Google 扩展程序的原因。
提示：所有电子邮件标签通常可以帮助您找到更多邮箱。
值得一提的是，使用所有这些插件，您只能找到页面上可见的电子邮件地址。许多人的电子邮件地址与 Facebook 页面相关联，但隐私设置被关闭，在这种情况下，无法抓取它们。
除了我们介绍的三个之外，至少还有十几种适合Chrome的爬虫。您也可以自己尝试其他选项。
选项 4：原子公园
Atom Park Atomic Email Hunter 是另一种电子邮件抓取工具。它不是 Chrome 扩展程序，而是一个独立的软件。
它相对容易使用。启动程序并转到“搜索”菜单。从那里，它会询问您要搜索的位置，输入要抓取的组或页面的 URL，进行一些必要的设置，然后就可以运行了！
与之前的工具不同，Atom Park 会在可能的情况下将电子邮件地址、地址来源和用户名相互关联。这样，您就可以知道自己的电子邮件地址是从哪里获得的，而不仅仅是一个没有名称或标签的列表。
这个软件不是免费的。Atomic Email Hunter 是一款售价 80 美元的软件。您可以在他们的 网站 上免费下载，但试用版的功能有限。
你会发现Facebook上的群组是一个收获邮箱的好地方，所以我们应该尽量加入尽可能多的行业相关群组。此外，这些工具不仅适用于 Facebook、LinkedIn 和任何网页。
选项 5：Gmail 电子邮件提取器（非 Facebook 提取工具）
Gmail Email Extractor 是一个 Google 电子表格插件，用于 Google Sheets。此扩展程序允许您从 G Suite 和 Gmail 帐户中检索电子邮件地址。它将提取的信息保存在 Google 电子表格中。
该工具还允许您选择提取邮箱的条件，例如“发件人”、“抄送”、“密件抄送”和“回复”部分，并且可以将邮件列表导出为 TXT 或 CSV。
如果您的 Gmail 联系人列表很大，这个工具会非常有用。它可以帮助您从帐户中提取电子邮件地址并节省大量时间。
提示：虽然本文将介绍直接获取邮件的方法，但我强烈建议大家不要抓取大量陌生邮件，然后发送未经授权的开发信。这几乎是垃圾邮件的定义。我们应该尽量在发送邮件之前获得用户的许可，否则很容易被黑客入侵。或者您可以使用这些工具作为辅助 查看全部
chrome插件网页抓取(想从Facebook获取电子邮件地址就需要一些工具和技巧？)
要从 Facebook 获取电子邮件地址，需要一些工具和技能。这里有几个选项供大家选择：
选项 1：电子邮件提取器
Email Extractor 是 Google Chrome 浏览器的插件。它可以帮助您在打开的任何网页上找到您的邮箱。
首先，将其添加到 Google Chrome 浏览器。然后访问您想要抓取的任何 Facebook 页面或 Facebook 群组。Facebook 不会一次加载大量内容，您需要向下滚动。这样，Email Extractor 可以识别和提取更多邮箱。以 Facebook 群组为例：
提示：帖子未展开的部分将无法识别。
您也可以在公共主页和个人联系信息页面上抓取邮箱（如果显示）。
选项 2：电子邮件导出器
要引入的第二个选项是电子邮件导出器。这是另一个以相同方式执行基本相同操作的 Chrome 扩展程序。安装后，访问目标页面并滚动浏览您要抓取的任何组或页面，直到您觉得采集了足够的信息。
电子邮件提取器和电子邮件导出器之间没有太大区别。主要区别在于Exporter可以获取电话号码，也更方便您导出和保存。
选项 3：电子邮件猎人
第三个 Chrome 扩展。就像上面两个一样，当一个收录公共数据的页面被打开时，该数据将被抓取。它与上面两个非常相似。说实话，这三个插件没有明显区别，大家可以根据使用效果来选择。它们都是免费的且使用起来非常方便，这就是我们建议您使用 Google 扩展程序的原因。
提示：所有电子邮件标签通常可以帮助您找到更多邮箱。
值得一提的是，使用所有这些插件，您只能找到页面上可见的电子邮件地址。许多人的电子邮件地址与 Facebook 页面相关联，但隐私设置被关闭，在这种情况下，无法抓取它们。
除了我们介绍的三个之外，至少还有十几种适合Chrome的爬虫。您也可以自己尝试其他选项。
选项 4：原子公园
Atom Park Atomic Email Hunter 是另一种电子邮件抓取工具。它不是 Chrome 扩展程序，而是一个独立的软件。
它相对容易使用。启动程序并转到“搜索”菜单。从那里，它会询问您要搜索的位置，输入要抓取的组或页面的 URL，进行一些必要的设置，然后就可以运行了！
与之前的工具不同，Atom Park 会在可能的情况下将电子邮件地址、地址来源和用户名相互关联。这样，您就可以知道自己的电子邮件地址是从哪里获得的，而不仅仅是一个没有名称或标签的列表。
这个软件不是免费的。Atomic Email Hunter 是一款售价 80 美元的软件。您可以在他们的 网站 上免费下载，但试用版的功能有限。
你会发现Facebook上的群组是一个收获邮箱的好地方，所以我们应该尽量加入尽可能多的行业相关群组。此外，这些工具不仅适用于 Facebook、LinkedIn 和任何网页。
选项 5：Gmail 电子邮件提取器（非 Facebook 提取工具）
Gmail Email Extractor 是一个 Google 电子表格插件，用于 Google Sheets。此扩展程序允许您从 G Suite 和 Gmail 帐户中检索电子邮件地址。它将提取的信息保存在 Google 电子表格中。
该工具还允许您选择提取邮箱的条件，例如“发件人”、“抄送”、“密件抄送”和“回复”部分，并且可以将邮件列表导出为 TXT 或 CSV。
如果您的 Gmail 联系人列表很大，这个工具会非常有用。它可以帮助您从帐户中提取电子邮件地址并节省大量时间。
提示：虽然本文将介绍直接获取邮件的方法，但我强烈建议大家不要抓取大量陌生邮件，然后发送未经授权的开发信。这几乎是垃圾邮件的定义。我们应该尽量在发送邮件之前获得用户的许可，否则很容易被黑客入侵。或者您可以使用这些工具作为辅助
chrome插件网页抓取(5款超好用的设计师必备chrome插件，全部免费下载！)
网站优化 • 优采云 发表了文章 • 0 个评论 • 60 次浏览 • 2022-01-05 21:11
chrome插件网页抓取(5款超好用的设计师必备chrome插件，全部免费下载！)
今天为设计师推荐5款超级好用的必备chrome插件。
无需注册和附加网页，亲测即刻提高工作效率两倍以上
重要的是全部免费下载！！！
还想提高工作效率的同学们一定要关注我，持续更新实用的设计工具！
插件一，【Muzli 2】
第一个插件是我最喜欢的，设计师的秘密资源，一般人不告诉他。国外版Petal+Station Cool，每天整理更新最优质的设计案例、趋势、模板等。从在几个网站之间来回跳转，到一劳永逸的一个插件，这种效率提升可想而知！
从那以后，每天上班第一件事就是打开浏览器钓鱼采集灵感。其内容来自国外各大主流灵感合集网站，如dribbble、behance、abdz、Pinterest······
内容更新之丰富，出乎意料，兼具质量与时效性。
配色模板必不可少
无需花时间访问behance，打开浏览器即可看到最新的优质设计案例！
behance 上的精选设计案例
复制链接到谷歌浏览器下载：/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc
插件2、【滴眼液】
实时摄取颜色。当你访问任何网站喜欢的配色时，导入ps真是太麻烦了。滴眼液插件可以直接实时吸收识别颜色代码、RGB值等信息。
在behance上看到你最喜欢的设计作品，你学到的各种颜色信息都会实时展示出来！
复制链接到谷歌浏览器下载：/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
插件3、【什么字体】
实时字体识别，在网上冲浪时看到喜欢的字体，点击插件，将鼠标移动到不同的字体。所有关于字体的信息一目了然，包括字体名称、粗细、大小等，在这里你无法点击。
复制链接到谷歌浏览器下载：/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
插件4、【图片下载器】
不知道大家有没有同样的经历。访问一个网站的时候经常感叹：这个banner好，主图好看，这个case太美了，但是一张一张的下载图片极其麻烦。. 该插件可以一键下载网页中的所有图片。当然，它还支持手动选择单张图片、调整清晰度等通用选项。emmm还包括广告。
好吧，我知道你们聪明的小脑袋在想什么。各种会员费资料网站的图片无法下载。阿智给大家试过了。但是，即使下载非素材的图片，也需要注意版权问题网站。
复制链接到谷歌浏览器下载：/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj
插件5、【SVG-Grabber】
该插件可以帮助设计师抓取网页中的所有矢量图标，并支持快速下载某个网站logo、图标等，非常方便实用。
谷歌
B站
知乎
复制链接到谷歌浏览器下载：/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg
//总结//
这五个插件虽然小众但是很实用，你都get了吗~想看更多创意灵感、设计工具，关注公众号【灵感自由】！
本文提到的所有插件都需要“翻墙”下载，后续使用无需“翻墙” 查看全部
今天为设计师推荐5款超级好用的必备chrome插件。
无需注册和附加网页，亲测即刻提高工作效率两倍以上
重要的是全部免费下载！！！
还想提高工作效率的同学们一定要关注我，持续更新实用的设计工具！
插件一，【Muzli 2】
第一个插件是我最喜欢的，设计师的秘密资源，一般人不告诉他。国外版Petal+Station Cool，每天整理更新最优质的设计案例、趋势、模板等。从在几个网站之间来回跳转，到一劳永逸的一个插件，这种效率提升可想而知！
从那以后，每天上班第一件事就是打开浏览器钓鱼采集灵感。其内容来自国外各大主流灵感合集网站，如dribbble、behance、abdz、Pinterest······
内容更新之丰富，出乎意料，兼具质量与时效性。
配色模板必不可少
无需花时间访问behance，打开浏览器即可看到最新的优质设计案例！
behance 上的精选设计案例
复制链接到谷歌浏览器下载：/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc
插件2、【滴眼液】
实时摄取颜色。当你访问任何网站喜欢的配色时，导入ps真是太麻烦了。滴眼液插件可以直接实时吸收识别颜色代码、RGB值等信息。
在behance上看到你最喜欢的设计作品，你学到的各种颜色信息都会实时展示出来！
复制链接到谷歌浏览器下载：/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
插件3、【什么字体】
实时字体识别，在网上冲浪时看到喜欢的字体，点击插件，将鼠标移动到不同的字体。所有关于字体的信息一目了然，包括字体名称、粗细、大小等，在这里你无法点击。
复制链接到谷歌浏览器下载：/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
插件4、【图片下载器】
不知道大家有没有同样的经历。访问一个网站的时候经常感叹：这个banner好，主图好看，这个case太美了，但是一张一张的下载图片极其麻烦。. 该插件可以一键下载网页中的所有图片。当然，它还支持手动选择单张图片、调整清晰度等通用选项。emmm还包括广告。
好吧，我知道你们聪明的小脑袋在想什么。各种会员费资料网站的图片无法下载。阿智给大家试过了。但是，即使下载非素材的图片，也需要注意版权问题网站。
复制链接到谷歌浏览器下载：/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj
插件5、【SVG-Grabber】
该插件可以帮助设计师抓取网页中的所有矢量图标，并支持快速下载某个网站logo、图标等，非常方便实用。
谷歌
B站
知乎
复制链接到谷歌浏览器下载：/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg
//总结//
这五个插件虽然小众但是很实用，你都get了吗~想看更多创意灵感、设计工具，关注公众号【灵感自由】！
本文提到的所有插件都需要“翻墙”下载，后续使用无需“翻墙” 查看全部
chrome插件网页抓取(5款超好用的设计师必备chrome插件，全部免费下载！)
今天为设计师推荐5款超级好用的必备chrome插件。
无需注册和附加网页，亲测即刻提高工作效率两倍以上
重要的是全部免费下载！！！
还想提高工作效率的同学们一定要关注我，持续更新实用的设计工具！
插件一，【Muzli 2】
第一个插件是我最喜欢的，设计师的秘密资源，一般人不告诉他。国外版Petal+Station Cool，每天整理更新最优质的设计案例、趋势、模板等。从在几个网站之间来回跳转，到一劳永逸的一个插件，这种效率提升可想而知！
从那以后，每天上班第一件事就是打开浏览器钓鱼采集灵感。其内容来自国外各大主流灵感合集网站，如dribbble、behance、abdz、Pinterest······
内容更新之丰富，出乎意料，兼具质量与时效性。
配色模板必不可少
无需花时间访问behance，打开浏览器即可看到最新的优质设计案例！
behance 上的精选设计案例
复制链接到谷歌浏览器下载：/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc
插件2、【滴眼液】
实时摄取颜色。当你访问任何网站喜欢的配色时，导入ps真是太麻烦了。滴眼液插件可以直接实时吸收识别颜色代码、RGB值等信息。
在behance上看到你最喜欢的设计作品，你学到的各种颜色信息都会实时展示出来！
复制链接到谷歌浏览器下载：/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
插件3、【什么字体】
实时字体识别，在网上冲浪时看到喜欢的字体，点击插件，将鼠标移动到不同的字体。所有关于字体的信息一目了然，包括字体名称、粗细、大小等，在这里你无法点击。
复制链接到谷歌浏览器下载：/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
插件4、【图片下载器】
不知道大家有没有同样的经历。访问一个网站的时候经常感叹：这个banner好，主图好看，这个case太美了，但是一张一张的下载图片极其麻烦。. 该插件可以一键下载网页中的所有图片。当然，它还支持手动选择单张图片、调整清晰度等通用选项。emmm还包括广告。
好吧，我知道你们聪明的小脑袋在想什么。各种会员费资料网站的图片无法下载。阿智给大家试过了。但是，即使下载非素材的图片，也需要注意版权问题网站。
复制链接到谷歌浏览器下载：/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj
插件5、【SVG-Grabber】
该插件可以帮助设计师抓取网页中的所有矢量图标，并支持快速下载某个网站logo、图标等，非常方便实用。
谷歌
B站
知乎
复制链接到谷歌浏览器下载：/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg
//总结//
这五个插件虽然小众但是很实用，你都get了吗~想看更多创意灵感、设计工具，关注公众号【灵感自由】！
本文提到的所有插件都需要“翻墙”下载，后续使用无需“翻墙”
chrome插件网页抓取(如何抓取亚马逊的商品评价（InstantDataScraper），当时我差点被感动哭了)
网站优化 • 优采云 发表了文章 • 0 个评论 • 70 次浏览 • 2022-01-02 13:13
chrome插件网页抓取(如何抓取亚马逊的商品评价（InstantDataScraper），当时我差点被感动哭了)
如何抓取亚马逊产品评论？
本来想给大家介绍一下市面上常见的或者付费的爬虫工具。直到发现这个免费的Chrome插件Instant Data Scraper，我差点被感动哭了。比起学一门编程语言来写爬虫，我还要下功夫去研究各种网页的结构和层次，总得担心我的爬虫会被亚马逊干掉。
只需拥有即时数据抓取工具！
不要害怕改变网页结构，采集规则无效的问题！
小白也可以轻松使用亚马逊评测采集爬虫技术！
什么是即时数据抓取工具？
本插件使用AI（人工智能）技术，可以判断页面上最相关的内容进行抓取，不需要您了解晦涩难懂的编程技术。 Amazon、eBay、Best Buy、Walmart、Etsy、Home Depot、Craigslist、Yelp 等。网站 均受支持。
在我初次使用后，我发现它不太可能导致“人工智力低下”的问题。至少爬取一些亚马逊商品评论（Customer Reviews）、listing和QA等基础数据，Instant Data Scraper很方便，喜欢！
如何使用即时数据抓取工具？
在Chrome网上应用店搜索并安装插件“Instant Data Scraper”。如果您无法访问 Chrome 网上应用店，您可以离线安装插件。
插件使用起来真的很简单。以采集亚马逊评论为例：
即时数据抓取
1.打开商品评论页面第一页，URL格式如：+商品ASIN
如下图：
2.然后选择“最近”，按照产品自然留待审核的时间排序。
3.排序完成后，点击浏览器右上角的Instant Data Scraper插件图标“Poke Ball Plug-in”，如下图
4.进入爬虫抓取页面的设置，如下图
5.在精灵球插件中，点击定位“下一步”按钮，然后回到产品Review页面底部，点击“下一页”再点击“开始爬行”开始自动爬行查看数据。
当然，我们也可以在这里删除不需要的信息。稍后下载表单时，我们不需要的信息将不会显示。
这里需要注意的是Min delay和Max delay。当您的网速过快时，您需要将 Min delay 设置为较大的值。当您的网速太慢时，您应该将最小延迟和最大延迟设置为较大的值。只有这样，才能稳定抓取数据。
6. Review下载完成后，页面会弹出错误信息“Error getting table: Table not found”，然后我们点击绿色按钮“CSV”，我们将下载其中一个我们的评论。下载它。如果下载一千多个Review数据，数据下载时间会稍长一些。可能有错觉，感觉卡住了。我们只需稍等片刻即可下载。下载完成，左下角的底部会有一个文件下载提示框，这样我们就知道Review是否已经下载了。
7.打开下载的CSV或Excel文件，整理我们需要的数据列
当然，除了爬取亚马逊评论数据，我们还可以爬取QA等其他信息。
获取评论信息时，可以获取姓名、评分、评论时间、关键词、购买的款式等信息。
我们也可以使用这个工具来选择产品。快速对产品的特点和消费者的情绪做出粗略的判断，而不是一个一个的阅读Review，更适合大范围的批量选择。
当然，除了在亚马逊上爬取信息，我们也可以在其他平台或独立网站上使用这个插件。
从上图可以看出对应的抓取信息是比较准确的。 查看全部
如何抓取亚马逊产品评论？
本来想给大家介绍一下市面上常见的或者付费的爬虫工具。直到发现这个免费的Chrome插件Instant Data Scraper，我差点被感动哭了。比起学一门编程语言来写爬虫，我还要下功夫去研究各种网页的结构和层次，总得担心我的爬虫会被亚马逊干掉。
只需拥有即时数据抓取工具！
不要害怕改变网页结构，采集规则无效的问题！
小白也可以轻松使用亚马逊评测采集爬虫技术！
什么是即时数据抓取工具？
本插件使用AI（人工智能）技术，可以判断页面上最相关的内容进行抓取，不需要您了解晦涩难懂的编程技术。 Amazon、eBay、Best Buy、Walmart、Etsy、Home Depot、Craigslist、Yelp 等。网站 均受支持。
在我初次使用后，我发现它不太可能导致“人工智力低下”的问题。至少爬取一些亚马逊商品评论（Customer Reviews）、listing和QA等基础数据，Instant Data Scraper很方便，喜欢！
如何使用即时数据抓取工具？
在Chrome网上应用店搜索并安装插件“Instant Data Scraper”。如果您无法访问 Chrome 网上应用店，您可以离线安装插件。
插件使用起来真的很简单。以采集亚马逊评论为例：
即时数据抓取
1.打开商品评论页面第一页，URL格式如：+商品ASIN
如下图：
2.然后选择“最近”，按照产品自然留待审核的时间排序。
3.排序完成后，点击浏览器右上角的Instant Data Scraper插件图标“Poke Ball Plug-in”，如下图
4.进入爬虫抓取页面的设置，如下图
5.在精灵球插件中，点击定位“下一步”按钮，然后回到产品Review页面底部，点击“下一页”再点击“开始爬行”开始自动爬行查看数据。
当然，我们也可以在这里删除不需要的信息。稍后下载表单时，我们不需要的信息将不会显示。
这里需要注意的是Min delay和Max delay。当您的网速过快时，您需要将 Min delay 设置为较大的值。当您的网速太慢时，您应该将最小延迟和最大延迟设置为较大的值。只有这样，才能稳定抓取数据。
6. Review下载完成后，页面会弹出错误信息“Error getting table: Table not found”，然后我们点击绿色按钮“CSV”，我们将下载其中一个我们的评论。下载它。如果下载一千多个Review数据，数据下载时间会稍长一些。可能有错觉，感觉卡住了。我们只需稍等片刻即可下载。下载完成，左下角的底部会有一个文件下载提示框，这样我们就知道Review是否已经下载了。
7.打开下载的CSV或Excel文件，整理我们需要的数据列
当然，除了爬取亚马逊评论数据，我们还可以爬取QA等其他信息。
获取评论信息时，可以获取姓名、评分、评论时间、关键词、购买的款式等信息。
我们也可以使用这个工具来选择产品。快速对产品的特点和消费者的情绪做出粗略的判断，而不是一个一个的阅读Review，更适合大范围的批量选择。
当然，除了在亚马逊上爬取信息，我们也可以在其他平台或独立网站上使用这个插件。
从上图可以看出对应的抓取信息是比较准确的。 查看全部
chrome插件网页抓取(如何抓取亚马逊的商品评价（InstantDataScraper），当时我差点被感动哭了)
如何抓取亚马逊产品评论？
本来想给大家介绍一下市面上常见的或者付费的爬虫工具。直到发现这个免费的Chrome插件Instant Data Scraper，我差点被感动哭了。比起学一门编程语言来写爬虫，我还要下功夫去研究各种网页的结构和层次，总得担心我的爬虫会被亚马逊干掉。
只需拥有即时数据抓取工具！
不要害怕改变网页结构，采集规则无效的问题！
小白也可以轻松使用亚马逊评测采集爬虫技术！
什么是即时数据抓取工具？
本插件使用AI（人工智能）技术，可以判断页面上最相关的内容进行抓取，不需要您了解晦涩难懂的编程技术。 Amazon、eBay、Best Buy、Walmart、Etsy、Home Depot、Craigslist、Yelp 等。网站 均受支持。
在我初次使用后，我发现它不太可能导致“人工智力低下”的问题。至少爬取一些亚马逊商品评论（Customer Reviews）、listing和QA等基础数据，Instant Data Scraper很方便，喜欢！
如何使用即时数据抓取工具？
在Chrome网上应用店搜索并安装插件“Instant Data Scraper”。如果您无法访问 Chrome 网上应用店，您可以离线安装插件。
插件使用起来真的很简单。以采集亚马逊评论为例：
即时数据抓取
1.打开商品评论页面第一页，URL格式如：+商品ASIN
如下图：
2.然后选择“最近”，按照产品自然留待审核的时间排序。
3.排序完成后，点击浏览器右上角的Instant Data Scraper插件图标“Poke Ball Plug-in”，如下图
4.进入爬虫抓取页面的设置，如下图
5.在精灵球插件中，点击定位“下一步”按钮，然后回到产品Review页面底部，点击“下一页”再点击“开始爬行”开始自动爬行查看数据。
当然，我们也可以在这里删除不需要的信息。稍后下载表单时，我们不需要的信息将不会显示。
这里需要注意的是Min delay和Max delay。当您的网速过快时，您需要将 Min delay 设置为较大的值。当您的网速太慢时，您应该将最小延迟和最大延迟设置为较大的值。只有这样，才能稳定抓取数据。
6. Review下载完成后，页面会弹出错误信息“Error getting table: Table not found”，然后我们点击绿色按钮“CSV”，我们将下载其中一个我们的评论。下载它。如果下载一千多个Review数据，数据下载时间会稍长一些。可能有错觉，感觉卡住了。我们只需稍等片刻即可下载。下载完成，左下角的底部会有一个文件下载提示框，这样我们就知道Review是否已经下载了。
7.打开下载的CSV或Excel文件，整理我们需要的数据列
当然，除了爬取亚马逊评论数据，我们还可以爬取QA等其他信息。
获取评论信息时，可以获取姓名、评分、评论时间、关键词、购买的款式等信息。
我们也可以使用这个工具来选择产品。快速对产品的特点和消费者的情绪做出粗略的判断，而不是一个一个的阅读Review，更适合大范围的批量选择。
当然，除了在亚马逊上爬取信息，我们也可以在其他平台或独立网站上使用这个插件。
从上图可以看出对应的抓取信息是比较准确的。
chrome插件网页抓取(怎么完成一个chrome插件？教程教你如何使用插件)
网站优化 • 优采云 发表了文章 • 0 个评论 • 52 次浏览 • 2021-12-29 03:17
chrome插件网页抓取(怎么完成一个chrome插件？教程教你如何使用插件)
编写 chrome 插件是一项非常简单的任务。只要懂JavaScript，就可以轻松做到这一点，但要完成一个完美的插件还是比较困难的。使用插件，我们可以做很多有趣的事情。比如我们可以做一个抢热票插件，自动提醒，自动购票等等。本教程将教你如何完成一个chrome插件。
开始工作插件功能
提取页面所有样式表中的背景图片并在插件中显示
显现
manifest.json 是插件的配置文件。整个插件中最重要的文件。配置权限、内容脚本、后台脚本、弹窗、插件ICON都是这个文件。官方文件
{
"manifest_version": 2, //扩展使用的Manifest 版本, 1是chrome版本低于17才使用.目前主流都是用2
"name": "ImageSource", //扩展名称
"version": "1.0", //扩展版本
"description": "抓取当前页面样式文件中的所有图片源地址", //扩展描述
//设置扩展将在地址右侧显示扩展图标，弹出窗，提示等
//@see https://developer.chrome.com/e ... ction
//当你的扩展是针对某些页面操作的话，你应该使用page_action
/**
"browser_action": {
"default_icon": { // 设置ICON，不同大小，浏览会选择显示那种ICON
"16": "images/icon16.png",
"24": "images/icon24.png",
"32": "images/icon32.png"
},
"default_title": "Google Mail", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
*/
"page_action": {
"default_icon": "images/icon-32.png", // 设置ICON，不同大小，浏览会选择显示那种ICON
"default_title": "图片源", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
"icons": {
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
//运行于后台的实例, 后台实例是一直在运行中，打开浏览器只执行一次实例
//官方推荐使用事件页面代替背景页面
//@see
"background": {
//"page": "background.html",
"scripts": [
"js/background.js"
],
"persistent": false
},
//页面脚本注入
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["js/content.js"]
}
],
//扩展权限
//@see https://developer.chrome.com/e ... sions 权限列表文档
"permissions": [
"background",
"tabs",
"activeTab",
"http://*/*",
"https://*/*"
],
"author": "骑驴找蚂蚁", //开发者
"homepage_url": "http://loocode.com" //项目主页
}
以上是插件的 manifest.json 的完整内容。
页面操作
在这个插件中，我们使用 page_action 而不是 browser_action。使用 page_action 需要开发者控制插件的使用状态。默认处于未使用状态（打开chrome.pageAction.show(tabId)），browser_action则相反。官方认为该插件在一定条件下可以选择page_action，比如我是针对某个网站（github、google），或者是针对网页内容的特定值（json、rss）。
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var url = tab.url;
var status = changeInfo.status; //loading and complete two state
if (url !== undefined && status === 'complete' && url.indexOf("https://github.com") !== -1) {
chrome.pageAction.show(tabId);
}
});
比如监听tabs页面的update事件，当打开的页面是github网站时，将插件更新为active状态。这里需要申请tabs权限，在权限属性中填写tabs，而browser_action不需要。
default_popup
该属性是设置点击插件弹出的页面图层。也是上面例子的显示页面。
Document
笔记：
无法在 html 中嵌入内联脚本，因此必须将其作为文件引入。
<p>
var query = {
active: true, currentWindow: true
};
var tab = null;
var bg = chrome.extension.getBackgroundPage();
function ajax(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var content = xhr.responseText,
reg = /url\("?(.*?\.(png|gif|jpeg|jpg|svg))"?\)/gi,
match = null, images = [];
while((match = reg.exec(content)) !== null) {
images.push(match[1]);
}
if (images.length > 0) {
var p = document.createElement("p");
p.innerHTML = url,
offset = url.lastIndexOf("/") + 1,
newUrl = url.substring(0, offset),
point = newUrl.lastIndexOf(".") + 1,
domain = null;
for (var j = 1; j 查看全部
编写 chrome 插件是一项非常简单的任务。只要懂JavaScript，就可以轻松做到这一点，但要完成一个完美的插件还是比较困难的。使用插件，我们可以做很多有趣的事情。比如我们可以做一个抢热票插件，自动提醒，自动购票等等。本教程将教你如何完成一个chrome插件。
开始工作插件功能
提取页面所有样式表中的背景图片并在插件中显示
显现
manifest.json 是插件的配置文件。整个插件中最重要的文件。配置权限、内容脚本、后台脚本、弹窗、插件ICON都是这个文件。官方文件
{
"manifest_version": 2, //扩展使用的Manifest 版本, 1是chrome版本低于17才使用.目前主流都是用2
"name": "ImageSource", //扩展名称
"version": "1.0", //扩展版本
"description": "抓取当前页面样式文件中的所有图片源地址", //扩展描述
//设置扩展将在地址右侧显示扩展图标，弹出窗，提示等
//@see https://developer.chrome.com/e ... ction
//当你的扩展是针对某些页面操作的话，你应该使用page_action
/**
"browser_action": {
"default_icon": { // 设置ICON，不同大小，浏览会选择显示那种ICON
"16": "images/icon16.png",
"24": "images/icon24.png",
"32": "images/icon32.png"
},
"default_title": "Google Mail", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
*/
"page_action": {
"default_icon": "images/icon-32.png", // 设置ICON，不同大小，浏览会选择显示那种ICON
"default_title": "图片源", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
"icons": {
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
//运行于后台的实例, 后台实例是一直在运行中，打开浏览器只执行一次实例
//官方推荐使用事件页面代替背景页面
//@see
"background": {
//"page": "background.html",
"scripts": [
"js/background.js"
],
"persistent": false
},
//页面脚本注入
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["js/content.js"]
}
],
//扩展权限
//@see https://developer.chrome.com/e ... sions 权限列表文档
"permissions": [
"background",
"tabs",
"activeTab",
"http://*/*",
"https://*/*"
],
"author": "骑驴找蚂蚁", //开发者
"homepage_url": "http://loocode.com" //项目主页
}
以上是插件的 manifest.json 的完整内容。
页面操作
在这个插件中，我们使用 page_action 而不是 browser_action。使用 page_action 需要开发者控制插件的使用状态。默认处于未使用状态（打开chrome.pageAction.show(tabId)），browser_action则相反。官方认为该插件在一定条件下可以选择page_action，比如我是针对某个网站（github、google），或者是针对网页内容的特定值（json、rss）。
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var url = tab.url;
var status = changeInfo.status; //loading and complete two state
if (url !== undefined && status === 'complete' && url.indexOf("https://github.com") !== -1) {
chrome.pageAction.show(tabId);
}
});
比如监听tabs页面的update事件，当打开的页面是github网站时，将插件更新为active状态。这里需要申请tabs权限，在权限属性中填写tabs，而browser_action不需要。
default_popup
该属性是设置点击插件弹出的页面图层。也是上面例子的显示页面。
Document
笔记：
无法在 html 中嵌入内联脚本，因此必须将其作为文件引入。
<p>
var query = {
active: true, currentWindow: true
};
var tab = null;
var bg = chrome.extension.getBackgroundPage();
function ajax(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var content = xhr.responseText,
reg = /url\("?(.*?\.(png|gif|jpeg|jpg|svg))"?\)/gi,
match = null, images = [];
while((match = reg.exec(content)) !== null) {
images.push(match[1]);
}
if (images.length > 0) {
var p = document.createElement("p");
p.innerHTML = url,
offset = url.lastIndexOf("/") + 1,
newUrl = url.substring(0, offset),
point = newUrl.lastIndexOf(".") + 1,
domain = null;
for (var j = 1; j 查看全部
chrome插件网页抓取(怎么完成一个chrome插件？教程教你如何使用插件)
编写 chrome 插件是一项非常简单的任务。只要懂JavaScript，就可以轻松做到这一点，但要完成一个完美的插件还是比较困难的。使用插件，我们可以做很多有趣的事情。比如我们可以做一个抢热票插件，自动提醒，自动购票等等。本教程将教你如何完成一个chrome插件。
开始工作插件功能
提取页面所有样式表中的背景图片并在插件中显示
显现
manifest.json 是插件的配置文件。整个插件中最重要的文件。配置权限、内容脚本、后台脚本、弹窗、插件ICON都是这个文件。官方文件
{
"manifest_version": 2, //扩展使用的Manifest 版本, 1是chrome版本低于17才使用.目前主流都是用2
"name": "ImageSource", //扩展名称
"version": "1.0", //扩展版本
"description": "抓取当前页面样式文件中的所有图片源地址", //扩展描述
//设置扩展将在地址右侧显示扩展图标，弹出窗，提示等
//@see https://developer.chrome.com/e ... ction
//当你的扩展是针对某些页面操作的话，你应该使用page_action
/**
"browser_action": {
"default_icon": { // 设置ICON，不同大小，浏览会选择显示那种ICON
"16": "images/icon16.png",
"24": "images/icon24.png",
"32": "images/icon32.png"
},
"default_title": "Google Mail", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
*/
"page_action": {
"default_icon": "images/icon-32.png", // 设置ICON，不同大小，浏览会选择显示那种ICON
"default_title": "图片源", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
"icons": {
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
//运行于后台的实例, 后台实例是一直在运行中，打开浏览器只执行一次实例
//官方推荐使用事件页面代替背景页面
//@see
"background": {
//"page": "background.html",
"scripts": [
"js/background.js"
],
"persistent": false
},
//页面脚本注入
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["js/content.js"]
}
],
//扩展权限
//@see https://developer.chrome.com/e ... sions 权限列表文档
"permissions": [
"background",
"tabs",
"activeTab",
"http://*/*",
"https://*/*"
],
"author": "骑驴找蚂蚁", //开发者
"homepage_url": "http://loocode.com" //项目主页
}
以上是插件的 manifest.json 的完整内容。
页面操作
在这个插件中，我们使用 page_action 而不是 browser_action。使用 page_action 需要开发者控制插件的使用状态。默认处于未使用状态（打开chrome.pageAction.show(tabId)），browser_action则相反。官方认为该插件在一定条件下可以选择page_action，比如我是针对某个网站（github、google），或者是针对网页内容的特定值（json、rss）。
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var url = tab.url;
var status = changeInfo.status; //loading and complete two state
if (url !== undefined && status === 'complete' && url.indexOf("https://github.com";) !== -1) {
chrome.pageAction.show(tabId);
}
});
比如监听tabs页面的update事件，当打开的页面是github网站时，将插件更新为active状态。这里需要申请tabs权限，在权限属性中填写tabs，而browser_action不需要。
default_popup
该属性是设置点击插件弹出的页面图层。也是上面例子的显示页面。
Document
笔记：
无法在 html 中嵌入内联脚本，因此必须将其作为文件引入。
<p>
var query = {
active: true, currentWindow: true
};
var tab = null;
var bg = chrome.extension.getBackgroundPage();
function ajax(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var content = xhr.responseText,
reg = /url\("?(.*?\.(png|gif|jpeg|jpg|svg))"?\)/gi,
match = null, images = [];
while((match = reg.exec(content)) !== null) {
images.push(match[1]);
}
if (images.length > 0) {
var p = document.createElement("p");
p.innerHTML = url,
offset = url.lastIndexOf("/") + 1,
newUrl = url.substring(0, offset),
point = newUrl.lastIndexOf(".") + 1,
domain = null;
for (var j = 1; j
chrome插件网页抓取(谷歌浏览器插件开发的核心概念.2.核心知识点.2.1)
网站优化 • 优采云 发表了文章 • 0 个评论 • 46 次浏览 • 2021-12-27 18:02
chrome插件网页抓取(谷歌浏览器插件开发的核心概念.2.核心知识点.2.1)
前言
由于业务需要，笔者想为公司开发几个实用的浏览器插件，所以花了大约一天的时间阅读了谷歌浏览器插件开发文档，这里专门总结一下经验，并通过一个实战案例评论插件的开发过程及注意事项。
你会收获文字
正文开始之前，先来看看作者总结的概述：
熟悉浏览器插件开发的可以直接看最后一节插件开发实战。
1.开始使用
首先我们看一下浏览器插件的定义：
浏览器插件是基于 Web 技术（例如 HTML、JavaScript 和 CSS）的小型软件程序，可以自定义浏览体验。它们允许用户根据个人需求或偏好自定义 Chrome 功能和行为。
要开发浏览器插件，我们只需要一个 manifest.json 文件。为了快速上手浏览器插件开发，我们需要打开浏览器开发者工具。具体步骤如下：
在谷歌浏览器中输入 chrome://extensions/ 开启开发者模式
导入自己的浏览器插件包
通过以上三步，我们就可以开始浏览器插件的开发之旅了。浏览器插件一般放在浏览器地址栏的右侧。我们可以在 manifest.json 文件中配置插件的图标，并配置一些规则。 , 可以看到我们的浏览器插件图标，如下图：
详细讲解浏览器插件开发的核心概念。
2.核心知识点
浏览器插件一般涉及以下核心文件：
作者画了一张图，粗略的展示了它们之间的关系：
接下来，我们来详细了解几个核心知识点。
2.1 manifest.json
谷歌官网为我们提供了一个简单的配置，如下：
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
各字段含义介绍如下：
文末会给出完整的配置文件地址，供大家学习参考。
2.2 background.js
后台页面主要用于提供一些全局配置、事件监控、业务转发等。举几个常见的案例：
定义右键菜单
// background.js
const systems = {
a: '趣谈前端',
b: '掘金',
c: '微信'
}
chrome.runtime.onInstalled.addListener(function() {
// 上下文菜单
for (let key of Object.keys(systems)) {
chrome.contextMenus.create({
id: key,
title: systems[key],
type: 'normal',
contexts: ['selection'],
});
}
});
// manifest.json
{
"permissions": ["contextMenus"]
}
效果如下：
设置只有后缀为.com的页面才会激活插件
chrome.runtime.onInstalled.addListener(function() {
// 类似于什么时候激活浏览器插件图标这种感觉
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostSuffix: '.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
如下图，当页面地址后缀不等于.com时，插件图标不会被激活：
与 content_script 或弹出页面的消息通信
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
2.3 个内容脚本
内容脚本一般是植入到页面中，可以控制页面中的dom。我们可以用它来屏蔽网页广告、自定义页面皮肤等操作。 manifest.json中的基本配置如下：
{
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"lib/jquery3.4.min.js",
"content_script.js"
],
"css": ["base.css"]
}],
}
在上面的代码中，我们定义了content_scripts允许注入的页面范围，插入页面的js和css，这样我们就可以方便的改变某个页面的样式。例如，我们可以在页面中注入一个按钮：
在下面的浏览器插件案例中，作者将详细介绍content_scripts的用法。
2.4 弹窗
popup 是当用户点击插件图标时打开的一个小窗口。当失去焦点时，窗口立即关闭。我们一般用它来处理一些简单的用户交互和插件指令。
由于弹窗也是一个网页，所以我们一般会创建一个popup.html和popup.js来控制弹窗的显示和交互。我们在 manifest.json 中配置以下内容：
{
"page_action": {
"default_title": "小夕图片提取插件",
"default_popup": "popup.html"
},
}
这里需要注意的一点是，我们不能直接在popup.html中使用脚本脚本，我们需要使用导入脚本文件的方法。如下：
在线图片提取工具
以下是作者写的一个插件的弹窗：
3.沟通机制
对于一个比较复杂的浏览器插件，我们不仅可以操作dom或者提供基础功能，还需要从第三方或者我们自己的服务器抓取有用的页面数据。这次我们需要用到它。这是插件的通信机制。
由于content_script脚本存在于当前页面且受同源策略影响，我们无法将抓取到的数据传输到第三方平台或我们自己的服务器，因此我们需要一个基于浏览器的通信API。这是谷歌浏览器。插件的通信过程：
3.1 Popup 和后台相互通信
从官方文档中我们知道popup是如何直接访问后台页面的，所以popup可以直接与之通信：
// background.js
var getData = (data) => { console.log('拿到数据:' + data) }
// popup.js
let bgObj = chrome.extension.getBackgroundPage();
bgObj.getData(); // 访问bg的函数
3.2 弹出或后台页面和 content_script 通信
这里我们使用chrome的tabs API，如下：
// popup.js
// 发送消息给content_script
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
// 接收消息
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
content_script 接收和发送消息：
// 接收消息
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
// ...
sendResponse({farewell: "激活成功"});
}
});
// 主动发送消息
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response, document.body);
// document.body.style.backgroundColor="orange"
});
谷歌官网也明确写了消息的长连接：
我们可以使用以下方法进行长连接：
// content_script.js
var port = chrome.runtime.connect({name: "徐小夕"});
port.postMessage({Ling: "你好"});
port.onMessage.addListener(function(msg) {
if (msg.question == "你是做什么滴?")
port.postMessage({answer: "搬砖"});
else if (msg.question == "搬砖有钱吗?")
port.postMessage({answer: "木有"});
});
// popup.js
chrome.runtime.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
if (msg.Ling == "你好")
port.postMessage({question: "你是做什么滴?"});
else if (msg.answer == "搬砖")
port.postMessage({question: "搬砖有钱吗?"});
else if (msg.answer == "木有")
port.postMessage({question: "太难了."});
});
});
4.数据存储
chrome.storage 用于为插件全局存储数据。我们在任意一个页面（popup或者content_script或者background）下存储数据，在上面三个页面我们都可以获取到。具体用法如下：
获取数据
chrome.storage.sync.get('imgArr', function(data) {
console.log(data)
});
// 保存数据
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
// 另一种方式
chrome.storage.local.set({key: value}, function() {
console.log('Value is set to ' + value);
});
5.应用场景
谷歌浏览器的插件应用场景很多，如文章开头的思维导图所写。以下是笔者总结的一些应用场景。有兴趣的可以尝试实现一下：
有很多实用的开发工具，大家可以玩玩。接下来，我们通过实现一个网页图片提取插件来总结以下浏览器插件的开发过程。
6.开发一个抓取网站图片资源的浏览器插件
首先，根据作者的风格，我们在开发任何工具之前都要明确需求，那么我们来看看插件的特点：
基本上对于这些功能，我接下来会展示核心代码。在介绍代码之前，先预览一下插件的实现效果：
插件目录结构如下：
因为插件的开发比较简单，所以直接用jquery来开发。这里我们主要关注 popup.js 和 content_script.js。 Popup.js 主要用于获取从 content_script 页面传入的图片数据，并在 popup.html 中显示。还有一点需要注意的是，当页面没有注入生成的按钮时，popupu需要向内容页面发送信息，主动让它生成按钮，代码如下：
chrome.storage.sync.get('imgArr', function(data) {
data.imgArr && data.imgArr.forEach(item => {
var imgWrap = $("")
var img = $("" + item + "")
imgWrap.append(img);
$('#content').append(imgWrap);
$('.empty').hide();
})
});
$('#activeBtn').click(function(element) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
});
对于内容页面，我们需要实现的是动态生成按钮，并在页面中植入一个弹窗来显示获取的图片。另一方面，我们需要将图像数据传递给存储，以便弹出页面可以获取图像数据。
由于页面比较简单，所以不需要太多第三方库。我只是先手写一个模态组件。代码如下：
// 弹窗
~function Modal() {
var modal;
if(this instanceof Modal) {
this.init = function(opt) {
modal = $("");
var title = $("" + opt.title + "");
var close_btn = $("X");
var content = $("");
var mask = $("");
close_btn.click(function(){
modal.hide()
})
title.append(close_btn);
content.append(title);
content.append(opt.content);
modal.append(content);
modal.append(mask);
$('body').append(modal);
}
this.show = function(opt) {
if(modal) {
modal.show();
}else {
var options = {
title: opt.title || '标题',
content: opt.content || ''
}
this.init(options)
modal.show();
}
}
this.hide = function() {
modal.hide();
}
}else {
window.Modal = new Modal()
}
}()
第一步，我们先批量获取页面图片数据：
var imgArr = []
$('img').each(function(i) {
var src = $(this).attr('src');
var realSrc = /^(http|https)/.test(src) ? src : location.protocol+ '//' + location.host + src;
imgArr.push(realSrc)
})
因为图片的src路径可能是一个相对地址，所以笔者这里用正则的规则简单处理如下。当然，我们可以进行更细粒度的控制。
第二步是将图片数据存入storage：
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
第三步是生成预览图的弹窗，这里我使用了上面实现的模态组件：
Modal.show({
title: '提取结果',
content: imgBox
})
第四步，当popup发送通知激活按钮时，我们需要在网页中动态插入生成的按钮：
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
if(!$('.crawl-btn')) {
$('body').append("提取")
}else {
$('.crawl-btn').css("background-color","orange");
setTimeout(() => {
$('.crawl-btn').css("background-color","#06c");
}, 3000);
}
sendResponse({farewell: "激活成功"});
}
});
setTimeout 段纯粹是为了吸引用户的注意力，当然我们可以用更优雅的方式来处理。
插件的核心代码主要是这些。当然，还有很多细节需要考虑。我把配置文件和一些细节放在github上。有兴趣的可以安装感受一下。
github地址：提取网页图片数据的浏览器插件
终于
如果想学习更多H5游戏、webpack、node、gulp、css3、javascript、nodeJS、canvas数据可视化等前端知识和实战，欢迎在“有趣的前端”学习讨论一起探索前端边界。
参考资料 查看全部
前言
由于业务需要，笔者想为公司开发几个实用的浏览器插件，所以花了大约一天的时间阅读了谷歌浏览器插件开发文档，这里专门总结一下经验，并通过一个实战案例评论插件的开发过程及注意事项。
你会收获文字
正文开始之前，先来看看作者总结的概述：
熟悉浏览器插件开发的可以直接看最后一节插件开发实战。
1.开始使用
首先我们看一下浏览器插件的定义：
浏览器插件是基于 Web 技术（例如 HTML、JavaScript 和 CSS）的小型软件程序，可以自定义浏览体验。它们允许用户根据个人需求或偏好自定义 Chrome 功能和行为。
要开发浏览器插件，我们只需要一个 manifest.json 文件。为了快速上手浏览器插件开发，我们需要打开浏览器开发者工具。具体步骤如下：
在谷歌浏览器中输入 chrome://extensions/ 开启开发者模式
导入自己的浏览器插件包
通过以上三步，我们就可以开始浏览器插件的开发之旅了。浏览器插件一般放在浏览器地址栏的右侧。我们可以在 manifest.json 文件中配置插件的图标，并配置一些规则。 , 可以看到我们的浏览器插件图标，如下图：
详细讲解浏览器插件开发的核心概念。
2.核心知识点
浏览器插件一般涉及以下核心文件：
作者画了一张图，粗略的展示了它们之间的关系：
接下来，我们来详细了解几个核心知识点。
2.1 manifest.json
谷歌官网为我们提供了一个简单的配置，如下：
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
各字段含义介绍如下：
文末会给出完整的配置文件地址，供大家学习参考。
2.2 background.js
后台页面主要用于提供一些全局配置、事件监控、业务转发等。举几个常见的案例：
定义右键菜单
// background.js
const systems = {
a: '趣谈前端',
b: '掘金',
c: '微信'
}
chrome.runtime.onInstalled.addListener(function() {
// 上下文菜单
for (let key of Object.keys(systems)) {
chrome.contextMenus.create({
id: key,
title: systems[key],
type: 'normal',
contexts: ['selection'],
});
}
});
// manifest.json
{
"permissions": ["contextMenus"]
}
效果如下：
设置只有后缀为.com的页面才会激活插件
chrome.runtime.onInstalled.addListener(function() {
// 类似于什么时候激活浏览器插件图标这种感觉
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostSuffix: '.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
如下图，当页面地址后缀不等于.com时，插件图标不会被激活：
与 content_script 或弹出页面的消息通信
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
2.3 个内容脚本
内容脚本一般是植入到页面中，可以控制页面中的dom。我们可以用它来屏蔽网页广告、自定义页面皮肤等操作。 manifest.json中的基本配置如下：
{
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"lib/jquery3.4.min.js",
"content_script.js"
],
"css": ["base.css"]
}],
}
在上面的代码中，我们定义了content_scripts允许注入的页面范围，插入页面的js和css，这样我们就可以方便的改变某个页面的样式。例如，我们可以在页面中注入一个按钮：
在下面的浏览器插件案例中，作者将详细介绍content_scripts的用法。
2.4 弹窗
popup 是当用户点击插件图标时打开的一个小窗口。当失去焦点时，窗口立即关闭。我们一般用它来处理一些简单的用户交互和插件指令。
由于弹窗也是一个网页，所以我们一般会创建一个popup.html和popup.js来控制弹窗的显示和交互。我们在 manifest.json 中配置以下内容：
{
"page_action": {
"default_title": "小夕图片提取插件",
"default_popup": "popup.html"
},
}
这里需要注意的一点是，我们不能直接在popup.html中使用脚本脚本，我们需要使用导入脚本文件的方法。如下：
在线图片提取工具
以下是作者写的一个插件的弹窗：
3.沟通机制
对于一个比较复杂的浏览器插件，我们不仅可以操作dom或者提供基础功能，还需要从第三方或者我们自己的服务器抓取有用的页面数据。这次我们需要用到它。这是插件的通信机制。
由于content_script脚本存在于当前页面且受同源策略影响，我们无法将抓取到的数据传输到第三方平台或我们自己的服务器，因此我们需要一个基于浏览器的通信API。这是谷歌浏览器。插件的通信过程：
3.1 Popup 和后台相互通信
从官方文档中我们知道popup是如何直接访问后台页面的，所以popup可以直接与之通信：
// background.js
var getData = (data) => { console.log('拿到数据:' + data) }
// popup.js
let bgObj = chrome.extension.getBackgroundPage();
bgObj.getData(); // 访问bg的函数
3.2 弹出或后台页面和 content_script 通信
这里我们使用chrome的tabs API，如下：
// popup.js
// 发送消息给content_script
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
// 接收消息
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
content_script 接收和发送消息：
// 接收消息
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
// ...
sendResponse({farewell: "激活成功"});
}
});
// 主动发送消息
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response, document.body);
// document.body.style.backgroundColor="orange"
});
谷歌官网也明确写了消息的长连接：
我们可以使用以下方法进行长连接：
// content_script.js
var port = chrome.runtime.connect({name: "徐小夕"});
port.postMessage({Ling: "你好"});
port.onMessage.addListener(function(msg) {
if (msg.question == "你是做什么滴?")
port.postMessage({answer: "搬砖"});
else if (msg.question == "搬砖有钱吗?")
port.postMessage({answer: "木有"});
});
// popup.js
chrome.runtime.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
if (msg.Ling == "你好")
port.postMessage({question: "你是做什么滴?"});
else if (msg.answer == "搬砖")
port.postMessage({question: "搬砖有钱吗?"});
else if (msg.answer == "木有")
port.postMessage({question: "太难了."});
});
});
4.数据存储
chrome.storage 用于为插件全局存储数据。我们在任意一个页面（popup或者content_script或者background）下存储数据，在上面三个页面我们都可以获取到。具体用法如下：
获取数据
chrome.storage.sync.get('imgArr', function(data) {
console.log(data)
});
// 保存数据
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
// 另一种方式
chrome.storage.local.set({key: value}, function() {
console.log('Value is set to ' + value);
});
5.应用场景
谷歌浏览器的插件应用场景很多，如文章开头的思维导图所写。以下是笔者总结的一些应用场景。有兴趣的可以尝试实现一下：
有很多实用的开发工具，大家可以玩玩。接下来，我们通过实现一个网页图片提取插件来总结以下浏览器插件的开发过程。
6.开发一个抓取网站图片资源的浏览器插件
首先，根据作者的风格，我们在开发任何工具之前都要明确需求，那么我们来看看插件的特点：
基本上对于这些功能，我接下来会展示核心代码。在介绍代码之前，先预览一下插件的实现效果：
插件目录结构如下：
因为插件的开发比较简单，所以直接用jquery来开发。这里我们主要关注 popup.js 和 content_script.js。 Popup.js 主要用于获取从 content_script 页面传入的图片数据，并在 popup.html 中显示。还有一点需要注意的是，当页面没有注入生成的按钮时，popupu需要向内容页面发送信息，主动让它生成按钮，代码如下：
chrome.storage.sync.get('imgArr', function(data) {
data.imgArr && data.imgArr.forEach(item => {
var imgWrap = $("")
var img = $("" + item + "")
imgWrap.append(img);
$('#content').append(imgWrap);
$('.empty').hide();
})
});
$('#activeBtn').click(function(element) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
});
对于内容页面，我们需要实现的是动态生成按钮，并在页面中植入一个弹窗来显示获取的图片。另一方面，我们需要将图像数据传递给存储，以便弹出页面可以获取图像数据。
由于页面比较简单，所以不需要太多第三方库。我只是先手写一个模态组件。代码如下：
// 弹窗
~function Modal() {
var modal;
if(this instanceof Modal) {
this.init = function(opt) {
modal = $("");
var title = $("" + opt.title + "");
var close_btn = $("X");
var content = $("");
var mask = $("");
close_btn.click(function(){
modal.hide()
})
title.append(close_btn);
content.append(title);
content.append(opt.content);
modal.append(content);
modal.append(mask);
$('body').append(modal);
}
this.show = function(opt) {
if(modal) {
modal.show();
}else {
var options = {
title: opt.title || '标题',
content: opt.content || ''
}
this.init(options)
modal.show();
}
}
this.hide = function() {
modal.hide();
}
}else {
window.Modal = new Modal()
}
}()
第一步，我们先批量获取页面图片数据：
var imgArr = []
$('img').each(function(i) {
var src = $(this).attr('src');
var realSrc = /^(http|https)/.test(src) ? src : location.protocol+ '//' + location.host + src;
imgArr.push(realSrc)
})
因为图片的src路径可能是一个相对地址，所以笔者这里用正则的规则简单处理如下。当然，我们可以进行更细粒度的控制。
第二步是将图片数据存入storage：
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
第三步是生成预览图的弹窗，这里我使用了上面实现的模态组件：
Modal.show({
title: '提取结果',
content: imgBox
})
第四步，当popup发送通知激活按钮时，我们需要在网页中动态插入生成的按钮：
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
if(!$('.crawl-btn')) {
$('body').append("提取")
}else {
$('.crawl-btn').css("background-color","orange");
setTimeout(() => {
$('.crawl-btn').css("background-color","#06c");
}, 3000);
}
sendResponse({farewell: "激活成功"});
}
});
setTimeout 段纯粹是为了吸引用户的注意力，当然我们可以用更优雅的方式来处理。
插件的核心代码主要是这些。当然，还有很多细节需要考虑。我把配置文件和一些细节放在github上。有兴趣的可以安装感受一下。
github地址：提取网页图片数据的浏览器插件
终于
如果想学习更多H5游戏、webpack、node、gulp、css3、javascript、nodeJS、canvas数据可视化等前端知识和实战，欢迎在“有趣的前端”学习讨论一起探索前端边界。
参考资料 查看全部
chrome插件网页抓取(谷歌浏览器插件开发的核心概念.2.核心知识点.2.1)
前言
由于业务需要，笔者想为公司开发几个实用的浏览器插件，所以花了大约一天的时间阅读了谷歌浏览器插件开发文档，这里专门总结一下经验，并通过一个实战案例评论插件的开发过程及注意事项。
你会收获文字
正文开始之前，先来看看作者总结的概述：
熟悉浏览器插件开发的可以直接看最后一节插件开发实战。
1.开始使用
首先我们看一下浏览器插件的定义：
浏览器插件是基于 Web 技术（例如 HTML、JavaScript 和 CSS）的小型软件程序，可以自定义浏览体验。它们允许用户根据个人需求或偏好自定义 Chrome 功能和行为。
要开发浏览器插件，我们只需要一个 manifest.json 文件。为了快速上手浏览器插件开发，我们需要打开浏览器开发者工具。具体步骤如下：
在谷歌浏览器中输入 chrome://extensions/ 开启开发者模式
导入自己的浏览器插件包
通过以上三步，我们就可以开始浏览器插件的开发之旅了。浏览器插件一般放在浏览器地址栏的右侧。我们可以在 manifest.json 文件中配置插件的图标，并配置一些规则。 , 可以看到我们的浏览器插件图标，如下图：
详细讲解浏览器插件开发的核心概念。
2.核心知识点
浏览器插件一般涉及以下核心文件：
作者画了一张图，粗略的展示了它们之间的关系：
接下来，我们来详细了解几个核心知识点。
2.1 manifest.json
谷歌官网为我们提供了一个简单的配置，如下：
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
各字段含义介绍如下：
文末会给出完整的配置文件地址，供大家学习参考。
2.2 background.js
后台页面主要用于提供一些全局配置、事件监控、业务转发等。举几个常见的案例：
定义右键菜单
// background.js
const systems = {
a: '趣谈前端',
b: '掘金',
c: '微信'
}
chrome.runtime.onInstalled.addListener(function() {
// 上下文菜单
for (let key of Object.keys(systems)) {
chrome.contextMenus.create({
id: key,
title: systems[key],
type: 'normal',
contexts: ['selection'],
});
}
});
// manifest.json
{
"permissions": ["contextMenus"]
}
效果如下：
设置只有后缀为.com的页面才会激活插件
chrome.runtime.onInstalled.addListener(function() {
// 类似于什么时候激活浏览器插件图标这种感觉
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostSuffix: '.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
如下图，当页面地址后缀不等于.com时，插件图标不会被激活：
与 content_script 或弹出页面的消息通信
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
2.3 个内容脚本
内容脚本一般是植入到页面中，可以控制页面中的dom。我们可以用它来屏蔽网页广告、自定义页面皮肤等操作。 manifest.json中的基本配置如下：
{
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"lib/jquery3.4.min.js",
"content_script.js"
],
"css": ["base.css"]
}],
}
在上面的代码中，我们定义了content_scripts允许注入的页面范围，插入页面的js和css，这样我们就可以方便的改变某个页面的样式。例如，我们可以在页面中注入一个按钮：
在下面的浏览器插件案例中，作者将详细介绍content_scripts的用法。
2.4 弹窗
popup 是当用户点击插件图标时打开的一个小窗口。当失去焦点时，窗口立即关闭。我们一般用它来处理一些简单的用户交互和插件指令。
由于弹窗也是一个网页，所以我们一般会创建一个popup.html和popup.js来控制弹窗的显示和交互。我们在 manifest.json 中配置以下内容：
{
"page_action": {
"default_title": "小夕图片提取插件",
"default_popup": "popup.html"
},
}
这里需要注意的一点是，我们不能直接在popup.html中使用脚本脚本，我们需要使用导入脚本文件的方法。如下：
在线图片提取工具
以下是作者写的一个插件的弹窗：
3.沟通机制
对于一个比较复杂的浏览器插件，我们不仅可以操作dom或者提供基础功能，还需要从第三方或者我们自己的服务器抓取有用的页面数据。这次我们需要用到它。这是插件的通信机制。
由于content_script脚本存在于当前页面且受同源策略影响，我们无法将抓取到的数据传输到第三方平台或我们自己的服务器，因此我们需要一个基于浏览器的通信API。这是谷歌浏览器。插件的通信过程：
3.1 Popup 和后台相互通信
从官方文档中我们知道popup是如何直接访问后台页面的，所以popup可以直接与之通信：
// background.js
var getData = (data) => { console.log('拿到数据:' + data) }
// popup.js
let bgObj = chrome.extension.getBackgroundPage();
bgObj.getData(); // 访问bg的函数
3.2 弹出或后台页面和 content_script 通信
这里我们使用chrome的tabs API，如下：
// popup.js
// 发送消息给content_script
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
// 接收消息
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
content_script 接收和发送消息：
// 接收消息
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
// ...
sendResponse({farewell: "激活成功"});
}
});
// 主动发送消息
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response, document.body);
// document.body.style.backgroundColor="orange"
});
谷歌官网也明确写了消息的长连接：
我们可以使用以下方法进行长连接：
// content_script.js
var port = chrome.runtime.connect({name: "徐小夕"});
port.postMessage({Ling: "你好"});
port.onMessage.addListener(function(msg) {
if (msg.question == "你是做什么滴?")
port.postMessage({answer: "搬砖"});
else if (msg.question == "搬砖有钱吗?")
port.postMessage({answer: "木有"});
});
// popup.js
chrome.runtime.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
if (msg.Ling == "你好")
port.postMessage({question: "你是做什么滴?"});
else if (msg.answer == "搬砖")
port.postMessage({question: "搬砖有钱吗?"});
else if (msg.answer == "木有")
port.postMessage({question: "太难了."});
});
});
4.数据存储
chrome.storage 用于为插件全局存储数据。我们在任意一个页面（popup或者content_script或者background）下存储数据，在上面三个页面我们都可以获取到。具体用法如下：
获取数据
chrome.storage.sync.get('imgArr', function(data) {
console.log(data)
});
// 保存数据
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
// 另一种方式
chrome.storage.local.set({key: value}, function() {
console.log('Value is set to ' + value);
});
5.应用场景
谷歌浏览器的插件应用场景很多，如文章开头的思维导图所写。以下是笔者总结的一些应用场景。有兴趣的可以尝试实现一下：
有很多实用的开发工具，大家可以玩玩。接下来，我们通过实现一个网页图片提取插件来总结以下浏览器插件的开发过程。
6.开发一个抓取网站图片资源的浏览器插件
首先，根据作者的风格，我们在开发任何工具之前都要明确需求，那么我们来看看插件的特点：
基本上对于这些功能，我接下来会展示核心代码。在介绍代码之前，先预览一下插件的实现效果：
插件目录结构如下：
因为插件的开发比较简单，所以直接用jquery来开发。这里我们主要关注 popup.js 和 content_script.js。 Popup.js 主要用于获取从 content_script 页面传入的图片数据，并在 popup.html 中显示。还有一点需要注意的是，当页面没有注入生成的按钮时，popupu需要向内容页面发送信息，主动让它生成按钮，代码如下：
chrome.storage.sync.get('imgArr', function(data) {
data.imgArr && data.imgArr.forEach(item => {
var imgWrap = $("")
var img = $("" + item + "")
imgWrap.append(img);
$('#content').append(imgWrap);
$('.empty').hide();
})
});
$('#activeBtn').click(function(element) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
});
对于内容页面，我们需要实现的是动态生成按钮，并在页面中植入一个弹窗来显示获取的图片。另一方面，我们需要将图像数据传递给存储，以便弹出页面可以获取图像数据。
由于页面比较简单，所以不需要太多第三方库。我只是先手写一个模态组件。代码如下：
// 弹窗
~function Modal() {
var modal;
if(this instanceof Modal) {
this.init = function(opt) {
modal = $("");
var title = $("" + opt.title + "");
var close_btn = $("X");
var content = $("");
var mask = $("");
close_btn.click(function(){
modal.hide()
})
title.append(close_btn);
content.append(title);
content.append(opt.content);
modal.append(content);
modal.append(mask);
$('body').append(modal);
}
this.show = function(opt) {
if(modal) {
modal.show();
}else {
var options = {
title: opt.title || '标题',
content: opt.content || ''
}
this.init(options)
modal.show();
}
}
this.hide = function() {
modal.hide();
}
}else {
window.Modal = new Modal()
}
}()
第一步，我们先批量获取页面图片数据：
var imgArr = []
$('img').each(function(i) {
var src = $(this).attr('src');
var realSrc = /^(http|https)/.test(src) ? src : location.protocol+ '//' + location.host + src;
imgArr.push(realSrc)
})
因为图片的src路径可能是一个相对地址，所以笔者这里用正则的规则简单处理如下。当然，我们可以进行更细粒度的控制。
第二步是将图片数据存入storage：
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
第三步是生成预览图的弹窗，这里我使用了上面实现的模态组件：
Modal.show({
title: '提取结果',
content: imgBox
})
第四步，当popup发送通知激活按钮时，我们需要在网页中动态插入生成的按钮：
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
if(!$('.crawl-btn')) {
$('body').append("提取")
}else {
$('.crawl-btn').css("background-color","orange");
setTimeout(() => {
$('.crawl-btn').css("background-color","#06c");
}, 3000);
}
sendResponse({farewell: "激活成功"});
}
});
setTimeout 段纯粹是为了吸引用户的注意力，当然我们可以用更优雅的方式来处理。
插件的核心代码主要是这些。当然，还有很多细节需要考虑。我把配置文件和一些细节放在github上。有兴趣的可以安装感受一下。
github地址：提取网页图片数据的浏览器插件
终于
如果想学习更多H5游戏、webpack、node、gulp、css3、javascript、nodeJS、canvas数据可视化等前端知识和实战，欢迎在“有趣的前端”学习讨论一起探索前端边界。
参考资料
chrome插件网页抓取( EvernoteWebClipper——超强的笔记剪藏（百度文库） )
网站优化 • 优采云 发表了文章 • 0 个评论 • 65 次浏览 • 2021-12-27 03:08
chrome插件网页抓取(
EvernoteWebClipper——超强的笔记剪藏（百度文库）
)
至于离线安装谷歌插件，只需在设置-更多工具-扩展程序中上传crx文件，记得开启开发者模式，百度就无法使用了！
①Fireshot——超级截图工具
当我们浏览网站时，我们会看到精美的图片。如果我们想截图怎么办？相信很多人都会打开微信或者QQ，截图发送给文件传输助手，保存为图片。老婆太麻烦了。安装这个插件，一键截图，然后保存成png/jpg/pdf格式。您甚至可以将图片直接发送给其他人、将其复制到剪贴板或打印出来。更强大的是，这个插件支持滚动网页长截图，不要太强！
② Grammarly——严格的语法纠错工具
浏览网页当然不仅仅是浏览，您还必须偶尔输入一些内容。该插件用于帮助您检查输入内容的语法。当您看到绿色箭头圆圈转动时，表示插件正在检查您。如果它变成红色，那么我们必须检查，是不是打字错误？插件的英文检查很强，中文检查稍弱！
③Onetab——神奇的标签合并工具
上网的时候，网页越来越冲，标签页也打开越来越多，不仅占用内存，而且看起来特别凌乱。但是，似乎每个选项卡都被使用了，我不想关闭它。我该怎么办？答案是使用Onetab将它们合并为一个标签页，瞬间清爽！
④Evernote Web Clipper——强大的笔记剪切工具（百度文库复制）
开发这个工具的初衷是为了在网页上保存有用的文本段落。后来大家又开发了一个新功能，就是复制百度文库的内容。百度文库、道客巴巴、豆丁等网站不允许我们复制内容。Evernote Web Clipper 再简单不过了。插件会自动解析整个页面的结构，包括广告、文字、网址等，我们只需要剪切隐藏我们需要的内容即可！顺便说一句，图片也很好！
⑤Image Assistant——超牛网页图片提取工具
如果你想下载网站上好看好玩的图片，但又被限制了，这个时候就取出这个插件吧。只需点击提取此页面上的图片，所有图片都无法转义，一键保存到计算机，下次绝对可以使用ppt什么的。还有其他功能，比如为当前页面生成二维码，预制链接等！
查看全部
EvernoteWebClipper——超强的笔记剪藏（百度文库）
)
至于离线安装谷歌插件，只需在设置-更多工具-扩展程序中上传crx文件，记得开启开发者模式，百度就无法使用了！
①Fireshot——超级截图工具
当我们浏览网站时，我们会看到精美的图片。如果我们想截图怎么办？相信很多人都会打开微信或者QQ，截图发送给文件传输助手，保存为图片。老婆太麻烦了。安装这个插件，一键截图，然后保存成png/jpg/pdf格式。您甚至可以将图片直接发送给其他人、将其复制到剪贴板或打印出来。更强大的是，这个插件支持滚动网页长截图，不要太强！
② Grammarly——严格的语法纠错工具
浏览网页当然不仅仅是浏览，您还必须偶尔输入一些内容。该插件用于帮助您检查输入内容的语法。当您看到绿色箭头圆圈转动时，表示插件正在检查您。如果它变成红色，那么我们必须检查，是不是打字错误？插件的英文检查很强，中文检查稍弱！
③Onetab——神奇的标签合并工具
上网的时候，网页越来越冲，标签页也打开越来越多，不仅占用内存，而且看起来特别凌乱。但是，似乎每个选项卡都被使用了，我不想关闭它。我该怎么办？答案是使用Onetab将它们合并为一个标签页，瞬间清爽！
④Evernote Web Clipper——强大的笔记剪切工具（百度文库复制）
开发这个工具的初衷是为了在网页上保存有用的文本段落。后来大家又开发了一个新功能，就是复制百度文库的内容。百度文库、道客巴巴、豆丁等网站不允许我们复制内容。Evernote Web Clipper 再简单不过了。插件会自动解析整个页面的结构，包括广告、文字、网址等，我们只需要剪切隐藏我们需要的内容即可！顺便说一句，图片也很好！
⑤Image Assistant——超牛网页图片提取工具
如果你想下载网站上好看好玩的图片，但又被限制了，这个时候就取出这个插件吧。只需点击提取此页面上的图片，所有图片都无法转义，一键保存到计算机，下次绝对可以使用ppt什么的。还有其他功能，比如为当前页面生成二维码，预制链接等！
查看全部
chrome插件网页抓取(
EvernoteWebClipper——超强的笔记剪藏（百度文库）
)
至于离线安装谷歌插件，只需在设置-更多工具-扩展程序中上传crx文件，记得开启开发者模式，百度就无法使用了！
①Fireshot——超级截图工具
当我们浏览网站时，我们会看到精美的图片。如果我们想截图怎么办？相信很多人都会打开微信或者QQ，截图发送给文件传输助手，保存为图片。老婆太麻烦了。安装这个插件，一键截图，然后保存成png/jpg/pdf格式。您甚至可以将图片直接发送给其他人、将其复制到剪贴板或打印出来。更强大的是，这个插件支持滚动网页长截图，不要太强！
② Grammarly——严格的语法纠错工具
浏览网页当然不仅仅是浏览，您还必须偶尔输入一些内容。该插件用于帮助您检查输入内容的语法。当您看到绿色箭头圆圈转动时，表示插件正在检查您。如果它变成红色，那么我们必须检查，是不是打字错误？插件的英文检查很强，中文检查稍弱！
③Onetab——神奇的标签合并工具
上网的时候，网页越来越冲，标签页也打开越来越多，不仅占用内存，而且看起来特别凌乱。但是，似乎每个选项卡都被使用了，我不想关闭它。我该怎么办？答案是使用Onetab将它们合并为一个标签页，瞬间清爽！
④Evernote Web Clipper——强大的笔记剪切工具（百度文库复制）
开发这个工具的初衷是为了在网页上保存有用的文本段落。后来大家又开发了一个新功能，就是复制百度文库的内容。百度文库、道客巴巴、豆丁等网站不允许我们复制内容。Evernote Web Clipper 再简单不过了。插件会自动解析整个页面的结构，包括广告、文字、网址等，我们只需要剪切隐藏我们需要的内容即可！顺便说一句，图片也很好！
⑤Image Assistant——超牛网页图片提取工具
如果你想下载网站上好看好玩的图片，但又被限制了，这个时候就取出这个插件吧。只需点击提取此页面上的图片，所有图片都无法转义，一键保存到计算机，下次绝对可以使用ppt什么的。还有其他功能，比如为当前页面生成二维码，预制链接等！
chrome插件网页抓取(chrome插件网页抓取chrome扩展下载助手扩展搜索资源大全)
网站优化 • 优采云 发表了文章 • 0 个评论 • 38 次浏览 • 2021-12-23 00:01
chrome插件网页抓取(chrome插件网页抓取chrome扩展下载助手扩展搜索资源大全)
chrome插件网页抓取chrome扩展下载助手v8扩展下载助手更多下载扩展搜索资源大全
作为每日收uber作业的苦逼弱鸡，用v8上谷歌怎么就不算公平了，完全有理由相信，两个99。99%同时发出去的声音是同一个录音，哪怕0。1%，这个录音内容也绝对公平！（先前忘记截图了）这个软件能过人员筛选，让同时发出“58同城搜房”的声音，但不用录制一个人的声音，这个够不够！！用谷歌搜集结果，让大家看同一个结果，一个质量级别好不好！还有什么特殊理由可以让两个人同时录制声音不一样！！。
人人网上传音频就可以
优采云网？
我一般下载有声小说，打开软件然后在里面无限下载对方的声音，小说这种东西如果不是有影视剧组来公司商量，或者国家网站都没有权利过来播放，所以都是自己下载自己的，
给大家推荐的软件都是免费软件，100+免费，如果你只想要打包好的，可以直接联系我。
腾讯音乐盒，不用管版权，
b站，随便搜，
可以尝试一下买海外流量，
我是不是够low？不匿
学小孩子滑滑梯，
论坛好多，但是需要仔细找。
github
b站up主的直播功能。无穷下载bilibili，几十秒不过瘾！有现成的b站直播功能下载， 查看全部
chrome插件网页抓取chrome扩展下载助手v8扩展下载助手更多下载扩展搜索资源大全
作为每日收uber作业的苦逼弱鸡，用v8上谷歌怎么就不算公平了，完全有理由相信，两个99。99%同时发出去的声音是同一个录音，哪怕0。1%，这个录音内容也绝对公平！（先前忘记截图了）这个软件能过人员筛选，让同时发出“58同城搜房”的声音，但不用录制一个人的声音，这个够不够！！用谷歌搜集结果，让大家看同一个结果，一个质量级别好不好！还有什么特殊理由可以让两个人同时录制声音不一样！！。
人人网上传音频就可以
优采云网？
我一般下载有声小说，打开软件然后在里面无限下载对方的声音，小说这种东西如果不是有影视剧组来公司商量，或者国家网站都没有权利过来播放，所以都是自己下载自己的，
给大家推荐的软件都是免费软件，100+免费，如果你只想要打包好的，可以直接联系我。
腾讯音乐盒，不用管版权，
b站，随便搜，
可以尝试一下买海外流量，
我是不是够low？不匿
学小孩子滑滑梯，
论坛好多，但是需要仔细找。
github
b站up主的直播功能。无穷下载bilibili，几十秒不过瘾！有现成的b站直播功能下载， 查看全部
chrome插件网页抓取(chrome插件网页抓取chrome扩展下载助手扩展搜索资源大全)
chrome插件网页抓取chrome扩展下载助手v8扩展下载助手更多下载扩展搜索资源大全
作为每日收uber作业的苦逼弱鸡，用v8上谷歌怎么就不算公平了，完全有理由相信，两个99。99%同时发出去的声音是同一个录音，哪怕0。1%，这个录音内容也绝对公平！（先前忘记截图了）这个软件能过人员筛选，让同时发出“58同城搜房”的声音，但不用录制一个人的声音，这个够不够！！用谷歌搜集结果，让大家看同一个结果，一个质量级别好不好！还有什么特殊理由可以让两个人同时录制声音不一样！！。
人人网上传音频就可以
优采云网？
我一般下载有声小说，打开软件然后在里面无限下载对方的声音，小说这种东西如果不是有影视剧组来公司商量，或者国家网站都没有权利过来播放，所以都是自己下载自己的，
给大家推荐的软件都是免费软件，100+免费，如果你只想要打包好的，可以直接联系我。
腾讯音乐盒，不用管版权，
b站，随便搜，
可以尝试一下买海外流量，
我是不是够low？不匿
学小孩子滑滑梯，
论坛好多，但是需要仔细找。
github
b站up主的直播功能。无穷下载bilibili，几十秒不过瘾！有现成的b站直播功能下载，
chrome插件网页抓取(网页编辑共享神器Chrome插件(screenshottool)(组图))
网站优化 • 优采云 发表了文章 • 0 个评论 • 73 次浏览 • 2021-12-22 03:12
chrome插件网页抓取(网页编辑共享神器Chrome插件(screenshottool)(组图))
Awesome Screenshot-全屏截屏网页编辑分享神器Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。
下载：2020458
Awesome Screenshot-网页截图、批注&注解Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。chrome应用商店中的中文名称是：网页截图：评论&评论
下载：951671
网页截图、截图插件-Nimbus Screenshot Chrome插件
Nimbus Screenshot 是一款 chrome 浏览器插件，用于对网页进行截图。您还可以对屏幕截图进行二次编辑，例如注释。这是一款功能强大且易于使用的截图工具。您可以随意捕捉屏幕的每个角落，也可以选择整个屏幕。截图完成后，有简单的编辑工具对图片进行后期制作，也可以直接将图片保存在Nimbus中。, 电脑或Google Drive，也可以直接打印图片。
下载：244193
截图插件-Lightshot（截图工具）Chrome插件
Lightshot 是一款谷歌浏览器插件，可以帮助用户随时选择网页区域的截图并上传到服务器。它是一款完全免费的截图工具，可以达到快速截图的目的。捕获的图像尺寸更小，质量更好。支持全屏截图、选区截图等常用功能。
下载：231196
谷歌Chrome网页截图、截图插件-网页截图Chrome插件
网页截图是网页快照编辑工具的浏览器扩展工具。支持中文，操作更方便。安装后，您可以快速抓取网页可见范围内的图片或抓取整个网页快照。搭建一个简单的图片编辑器，截取图片后可以编辑截图，或者上传到网页截图网页分享。
下载：68599
插件网页截图
上一篇：lastpass、1password、keeppass这三个密码管理工具哪个更好？哪个更安全？下一篇：谷歌制作免费的谷歌翻译插件 查看全部
Awesome Screenshot-全屏截屏网页编辑分享神器Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。
下载：2020458
Awesome Screenshot-网页截图、批注&注解Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。chrome应用商店中的中文名称是：网页截图：评论&评论
下载：951671
网页截图、截图插件-Nimbus Screenshot Chrome插件
Nimbus Screenshot 是一款 chrome 浏览器插件，用于对网页进行截图。您还可以对屏幕截图进行二次编辑，例如注释。这是一款功能强大且易于使用的截图工具。您可以随意捕捉屏幕的每个角落，也可以选择整个屏幕。截图完成后，有简单的编辑工具对图片进行后期制作，也可以直接将图片保存在Nimbus中。, 电脑或Google Drive，也可以直接打印图片。
下载：244193
截图插件-Lightshot（截图工具）Chrome插件
Lightshot 是一款谷歌浏览器插件，可以帮助用户随时选择网页区域的截图并上传到服务器。它是一款完全免费的截图工具，可以达到快速截图的目的。捕获的图像尺寸更小，质量更好。支持全屏截图、选区截图等常用功能。
下载：231196
谷歌Chrome网页截图、截图插件-网页截图Chrome插件
网页截图是网页快照编辑工具的浏览器扩展工具。支持中文，操作更方便。安装后，您可以快速抓取网页可见范围内的图片或抓取整个网页快照。搭建一个简单的图片编辑器，截取图片后可以编辑截图，或者上传到网页截图网页分享。
下载：68599
插件网页截图
上一篇：lastpass、1password、keeppass这三个密码管理工具哪个更好？哪个更安全？下一篇：谷歌制作免费的谷歌翻译插件 查看全部
chrome插件网页抓取(网页编辑共享神器Chrome插件(screenshottool)(组图))
Awesome Screenshot-全屏截屏网页编辑分享神器Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。
下载：2020458
Awesome Screenshot-网页截图、批注&注解Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。chrome应用商店中的中文名称是：网页截图：评论&评论
下载：951671
网页截图、截图插件-Nimbus Screenshot Chrome插件
Nimbus Screenshot 是一款 chrome 浏览器插件，用于对网页进行截图。您还可以对屏幕截图进行二次编辑，例如注释。这是一款功能强大且易于使用的截图工具。您可以随意捕捉屏幕的每个角落，也可以选择整个屏幕。截图完成后，有简单的编辑工具对图片进行后期制作，也可以直接将图片保存在Nimbus中。, 电脑或Google Drive，也可以直接打印图片。
下载：244193
截图插件-Lightshot（截图工具）Chrome插件
Lightshot 是一款谷歌浏览器插件，可以帮助用户随时选择网页区域的截图并上传到服务器。它是一款完全免费的截图工具，可以达到快速截图的目的。捕获的图像尺寸更小，质量更好。支持全屏截图、选区截图等常用功能。
下载：231196
谷歌Chrome网页截图、截图插件-网页截图Chrome插件
网页截图是网页快照编辑工具的浏览器扩展工具。支持中文，操作更方便。安装后，您可以快速抓取网页可见范围内的图片或抓取整个网页快照。搭建一个简单的图片编辑器，截取图片后可以编辑截图，或者上传到网页截图网页分享。
下载：68599
插件网页截图
上一篇：lastpass、1password、keeppass这三个密码管理工具哪个更好？哪个更安全？下一篇：谷歌制作免费的谷歌翻译插件
chrome插件网页抓取(10款亲测且超实用的Chrome小插件，助设计师更快获取灵感)
网站优化 • 优采云 发表了文章 • 0 个评论 • 65 次浏览 • 2021-12-21 23:16
chrome插件网页抓取(10款亲测且超实用的Chrome小插件，助设计师更快获取灵感)
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。
今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。 查看全部
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。
今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。 查看全部
chrome插件网页抓取(10款亲测且超实用的Chrome小插件，助设计师更快获取灵感)
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。
今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。
chrome插件网页抓取(网页添加富文本编辑器的评分等级及评分标准 )
网站优化 • 优采云 发表了文章 • 0 个评论 • 51 次浏览 • 2021-12-17 11:05
chrome插件网页抓取(网页添加富文本编辑器的评分等级及评分标准
)
Web Developer 是开发者必备的扩展工具。使用 Web Developer 可以让我们轻松获取更多有关网页的信息，并进一步了解当前正在浏览的网页。Web Developer 可以在浏览器支持的任何平台上运行，包括 Windows、Mac OS 和 Linux。Firefox 和 Opera 也可以使用 Web Developer。
下载链接：
12. 页面编辑
当前评分：3/5 星
PageEdit 是一个 Chrome 插件，可以将任何网页变成富文本编辑器。这个扩展工具不仅好用，而且生成的代码也很干净。用户在Chrome中安装PageEdit插件后，可以在打开其他网页时启动PageEdit插件，为当前网页添加富文本编辑器的功能。用户可以使用PageEdit富文本编辑器以博客编辑的形式对普通网页进行编辑，例如在当前网页中添加图片，或者在网页上编辑文字。
下载链接：
13. 码可乐
当前评分：4.5/5 星
Code Cola 是可视化编辑 CSS 的最佳工具之一。而 Code Cola 不仅可以直观地编辑页面的 CSS，它的源代码也可以在 GitHub 上找到。
下载链接：
14. 完美像素
当前评分：4.5/5 星
Perfectpixel是一个非常有用的标记插件，对开发者和标记设计者很有帮助。Perfectpixel 允许您在网页上叠加半透明图像并比较像素与像素。
下载链接：
15. 忘记我
当前评分：3.5/5 星
使用忘记我，您可以删除网站的所有内容，包括：信息记录程序、历史记录、位置和会话存储等所有信息。
只需点击图标，即可永久删除所有您访问过的网站标志；而当你双击该图标时，它只会删除你查看过的特定网站 历史信息程序不会删除其他站点上的所有历史记录，因为它只运行在你地址栏中的页面上。
下载链接：
20. 清除缓存
当前评分：4.5/5 星
借助清除缓存插件，您可以一键快速删除浏览器中的缓存和数据，无需处理烦人的确认对话框、弹窗等繁琐操作。
您甚至可以通过首选项自定义要删除的特定数据，例如：应用程序缓存、信息程序、下载的文件、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码、WebSQL等. 此外，您还可以单独删除一个域名的缓存记录。使用Clear Cache确实很方便。
下载链接：
17. 点击&清理
当前评分：5/5 星
Click&Clean 是 Google Chrome 浏览器的第一个私人数据清理工具。通过 Click&Clean 插件，用户可以选择多种方式来清除 Chrome 中的历史记录。Click&Clean 清洁界面也很新潮。您可以一键删除您键入的 URL、缓存、cookie、下载历史记录和浏览历史记录。Click&Clean 甚至可以删除客户端 Web SQL 数据库、Flash Cookie (LSO) 等。
下载链接：
18. 用户代理切换器
当前评分：4/5 星
User Agent Switcher 是一个可以模拟搜索引擎爬虫的程序。使用模拟Agent访问那些被搜索引擎操纵过的网页，就可以看到真实的内容。
而User Agent Switcher可以让您快速切换浏览器的用户代理（User Agent，UA），实现浏览器的华丽蜕变。无论是伪装成其他平台/品牌的浏览器还是伪装成其他版本的浏览器都没有问题。
下载链接：
19. iMacros for Chrome
当前评分：4/5 星
iMacros for Chrome 是一个插件，可以帮助您填写表单并自动保存它们。当你在 Chrome 中安装 iMacros for Chrome 插件时，该插件会帮你自动记住你输入的表单内容，下次输入时，它会还原这些重复的操作，帮助你改进填写形式的效率节省您的时间。
您有时可能会遇到一些问题，导致无法正确录制宏，但是您可以通过关闭对话框并重新打开对话框或刷新页面来轻松解决问题。
下载链接：
20.分辨率测试
当前评分：4/5 星
Chrome 的 Extension Test，Resolution Test，用于测试浏览器的分辨率。非常方便前端开发。
下载链接：
21. IE 标签扩展
当前评分：4.5/5 星
我们可以通过在 IE 浏览器中使用 IE Tab 扩展来显示网页。这个工具可以让你使用Java、ActiveX、Sharepoint、Silverlight等来测试你的网站在不同版本的IE下是否会退出Chrome。但是，IE Tab 扩展仅适用于 Windows。
下载链接：
22. IE 标签多
当前评分：4.5/5 星
使用 IE Tab Multi 检查您的应用程序或 网站 在 IE 浏览器中的显示。IE Tab Multi 是产生与 IE 最相似行为的工具，它还允许您运行 ActiveX 控件。但它只支持 Windows，在 Windows 8 中它只支持桌面模式。
下载链接：
23. 有效性
当前评分：4/5 星
您可以通过单击浏览器地址栏中的图标，使用 Validity 扩展程序快速验证您的代码。要使用有效性，只需单击工具栏中的图标即可验证当前 HTML 文档，而无需离开页面。
下载链接：
24. YSlow
当前评分：4/5 星
YSlow 是一个基于 FireFox 的插件。这个插件可以分析网站的页面，它会告诉你如何根据一定的规则优化网站以提高网站的性能。
下载链接：
25. 铬道尔顿化！
当前评分：4/5 星
使用 Chrome Daltonize！您可以测试您的应用程序和网页的可用性是否存在色盲问题。铬道尔顿化！使用两种不同的过滤器，您可以想象元素如何出现在色盲人群面前。
下载链接：
26. 检查我的链接
当前评分：4/5 星
对于网页开发者来说，基本上每完成一个页面，就要检查页面中的每个链接是否有超链接。这时候你需要检查我的链接。您只需在要查看的网页上单击“查看我的链接”图标，它就会自动开始查看。未选中的链接为黑色，活动链接为绿色，死链接以红色突出显示。这些会在页面的右上角进行统计显示，会显示当前的检查进度、活链接数、死链接数。
下载链接：
27. 截止日期后
当前评分：4/5 星
After the Deadline 使用人工智能来评估您的拼写、风格和语法。您只需点击可编辑区右下角的ABC图标即可完成拼写、语法和风格的评估。
下载链接：
28. 很棒的截图
当前评分：4.5/5 星
Awesome Screenshot 是一个易于使用的扩展工具。它可以快速抓取您想要共享或保存的任何屏幕截图，并且可以抓取全屏或部分屏幕。您还可以添加注释和评论，发表评论，并在分享前发表评论。掩盖个人或敏感信息等。
下载链接：
29. 剪辑
当前评分：4/5 星
Clipular 是另一个用于抓取屏幕的 Chrome 扩展工具。它本质上是一个带有书签的截图工具。与 Awesome Screenshot 一样，clipular 可以快速抓取您想要分享或保存的任何屏幕截图，并自动将您的剪辑保存在 Google Drive 上。
使用clipular时，可以双击ALT，点击并拖动要截屏的区域，会出现几个选项，包括：共享、下载、备份到Google Drive等。
下载链接：
30. 桶
当前评分：4.5/5 星
bukket 是一个非常容易使用的 Chrome 扩展器。它可以截屏并记录屏幕。Bukket 使“使用简单可靠的视觉书签工具从浏览器中捕获和记录 GIF 动画”成为可能。
下载链接：
31. 狨猴
当前评分：5/5 星
Marmoset 可以帮助您在短短几秒钟内制作代码截图、输出线框和标记代码。此外，您可以将主题和其他效果作为快照添加到您的个人介绍中。
下载链接：
32. 网络定时器
当前评分：4.5/5 星
使用 Web Timer 查看您如何使用在线时间。它会跟踪你经常使用的标签，每三分钟更新一次，让你清楚地知道自己在什么地方投资或浪费的时间最多。您的数据会以直观的饼状图展示，方便您直观的看到自己的时间分配，帮助您更好地复习，从而提高您上网时的专注力和效率。
下载链接：
33. Lorem Ipsum 生成器
当前评分：4/5 星
使用 Lorem Ipsum Generator 创建虚拟文本并将其放置在您的 网站 或应用程序中，既快捷又方便，还避免了重复的剪切和粘贴工作。Lorem Ipsum Generator 的目的是使这个过程更简单、更快捷。此外，为了让 Lorem Ipsum 更快地使用，有时需要对其进行刷新。
下载链接：
34. 链接群
当前评分：5/5 星
Linkclump 是一个扩展工具，用于批量打开网页中的多个链接。您只需要用鼠标拖动并选择所有要打开的链接，即可在LinkClump 的新选项卡和窗口中一次性打开它们。同时您还可以将它们保存为书签、复制到剪贴板等。Linkclump 的源代码可以在 GitHub 上找到，使用它将使您对任何项目的研究更加有效。
下载链接：
35. 自动分页
当前评分：4/5 星
使用 AutoPagerize 允许您在一页中加载子页面。这个方便直观的小工具使网页浏览更加高效。
下载链接：
36. 会话管理器
当前评分：3.5/5 星
会话管理器允许您随时快速轻松地保存当前浏览器状态，并允许您在需要时立即备份所有选项卡。同时，Session Manager 还有助于对 网站 进行分组，例如采集社交媒体资料、与某些项目相关的标签等。
下载链接：
37. 最后一关
当前评分：4.5/5 星
如果您在每个站点上设置的密码都不一样，那么您可能不记得需要使用的这么多站点的密码和登录帐户。如果您使用 LastPass，您只需要记住一个安全的密码即可解决上述问题。
下载链接：
38. 调整标签大小
查看全部
)
Web Developer 是开发者必备的扩展工具。使用 Web Developer 可以让我们轻松获取更多有关网页的信息，并进一步了解当前正在浏览的网页。Web Developer 可以在浏览器支持的任何平台上运行，包括 Windows、Mac OS 和 Linux。Firefox 和 Opera 也可以使用 Web Developer。
下载链接：
12. 页面编辑
当前评分：3/5 星
PageEdit 是一个 Chrome 插件，可以将任何网页变成富文本编辑器。这个扩展工具不仅好用，而且生成的代码也很干净。用户在Chrome中安装PageEdit插件后，可以在打开其他网页时启动PageEdit插件，为当前网页添加富文本编辑器的功能。用户可以使用PageEdit富文本编辑器以博客编辑的形式对普通网页进行编辑，例如在当前网页中添加图片，或者在网页上编辑文字。
下载链接：
13. 码可乐
当前评分：4.5/5 星
Code Cola 是可视化编辑 CSS 的最佳工具之一。而 Code Cola 不仅可以直观地编辑页面的 CSS，它的源代码也可以在 GitHub 上找到。
下载链接：
14. 完美像素
当前评分：4.5/5 星
Perfectpixel是一个非常有用的标记插件，对开发者和标记设计者很有帮助。Perfectpixel 允许您在网页上叠加半透明图像并比较像素与像素。
下载链接：
15. 忘记我
当前评分：3.5/5 星
使用忘记我，您可以删除网站的所有内容，包括：信息记录程序、历史记录、位置和会话存储等所有信息。
只需点击图标，即可永久删除所有您访问过的网站标志；而当你双击该图标时，它只会删除你查看过的特定网站 历史信息程序不会删除其他站点上的所有历史记录，因为它只运行在你地址栏中的页面上。
下载链接：
20. 清除缓存
当前评分：4.5/5 星
借助清除缓存插件，您可以一键快速删除浏览器中的缓存和数据，无需处理烦人的确认对话框、弹窗等繁琐操作。
您甚至可以通过首选项自定义要删除的特定数据，例如：应用程序缓存、信息程序、下载的文件、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码、WebSQL等. 此外，您还可以单独删除一个域名的缓存记录。使用Clear Cache确实很方便。
下载链接：
17. 点击&清理
当前评分：5/5 星
Click&Clean 是 Google Chrome 浏览器的第一个私人数据清理工具。通过 Click&Clean 插件，用户可以选择多种方式来清除 Chrome 中的历史记录。Click&Clean 清洁界面也很新潮。您可以一键删除您键入的 URL、缓存、cookie、下载历史记录和浏览历史记录。Click&Clean 甚至可以删除客户端 Web SQL 数据库、Flash Cookie (LSO) 等。
下载链接：
18. 用户代理切换器
当前评分：4/5 星
User Agent Switcher 是一个可以模拟搜索引擎爬虫的程序。使用模拟Agent访问那些被搜索引擎操纵过的网页，就可以看到真实的内容。
而User Agent Switcher可以让您快速切换浏览器的用户代理（User Agent，UA），实现浏览器的华丽蜕变。无论是伪装成其他平台/品牌的浏览器还是伪装成其他版本的浏览器都没有问题。
下载链接：
19. iMacros for Chrome
当前评分：4/5 星
iMacros for Chrome 是一个插件，可以帮助您填写表单并自动保存它们。当你在 Chrome 中安装 iMacros for Chrome 插件时，该插件会帮你自动记住你输入的表单内容，下次输入时，它会还原这些重复的操作，帮助你改进填写形式的效率节省您的时间。
您有时可能会遇到一些问题，导致无法正确录制宏，但是您可以通过关闭对话框并重新打开对话框或刷新页面来轻松解决问题。
下载链接：
20.分辨率测试
当前评分：4/5 星
Chrome 的 Extension Test，Resolution Test，用于测试浏览器的分辨率。非常方便前端开发。
下载链接：
21. IE 标签扩展
当前评分：4.5/5 星
我们可以通过在 IE 浏览器中使用 IE Tab 扩展来显示网页。这个工具可以让你使用Java、ActiveX、Sharepoint、Silverlight等来测试你的网站在不同版本的IE下是否会退出Chrome。但是，IE Tab 扩展仅适用于 Windows。
下载链接：
22. IE 标签多
当前评分：4.5/5 星
使用 IE Tab Multi 检查您的应用程序或 网站 在 IE 浏览器中的显示。IE Tab Multi 是产生与 IE 最相似行为的工具，它还允许您运行 ActiveX 控件。但它只支持 Windows，在 Windows 8 中它只支持桌面模式。
下载链接：
23. 有效性
当前评分：4/5 星
您可以通过单击浏览器地址栏中的图标，使用 Validity 扩展程序快速验证您的代码。要使用有效性，只需单击工具栏中的图标即可验证当前 HTML 文档，而无需离开页面。
下载链接：
24. YSlow
当前评分：4/5 星
YSlow 是一个基于 FireFox 的插件。这个插件可以分析网站的页面，它会告诉你如何根据一定的规则优化网站以提高网站的性能。
下载链接：
25. 铬道尔顿化！
当前评分：4/5 星
使用 Chrome Daltonize！您可以测试您的应用程序和网页的可用性是否存在色盲问题。铬道尔顿化！使用两种不同的过滤器，您可以想象元素如何出现在色盲人群面前。
下载链接：
26. 检查我的链接
当前评分：4/5 星
对于网页开发者来说，基本上每完成一个页面，就要检查页面中的每个链接是否有超链接。这时候你需要检查我的链接。您只需在要查看的网页上单击“查看我的链接”图标，它就会自动开始查看。未选中的链接为黑色，活动链接为绿色，死链接以红色突出显示。这些会在页面的右上角进行统计显示，会显示当前的检查进度、活链接数、死链接数。
下载链接：
27. 截止日期后
当前评分：4/5 星
After the Deadline 使用人工智能来评估您的拼写、风格和语法。您只需点击可编辑区右下角的ABC图标即可完成拼写、语法和风格的评估。
下载链接：
28. 很棒的截图
当前评分：4.5/5 星
Awesome Screenshot 是一个易于使用的扩展工具。它可以快速抓取您想要共享或保存的任何屏幕截图，并且可以抓取全屏或部分屏幕。您还可以添加注释和评论，发表评论，并在分享前发表评论。掩盖个人或敏感信息等。
下载链接：
29. 剪辑
当前评分：4/5 星
Clipular 是另一个用于抓取屏幕的 Chrome 扩展工具。它本质上是一个带有书签的截图工具。与 Awesome Screenshot 一样，clipular 可以快速抓取您想要分享或保存的任何屏幕截图，并自动将您的剪辑保存在 Google Drive 上。
使用clipular时，可以双击ALT，点击并拖动要截屏的区域，会出现几个选项，包括：共享、下载、备份到Google Drive等。
下载链接：
30. 桶
当前评分：4.5/5 星
bukket 是一个非常容易使用的 Chrome 扩展器。它可以截屏并记录屏幕。Bukket 使“使用简单可靠的视觉书签工具从浏览器中捕获和记录 GIF 动画”成为可能。
下载链接：
31. 狨猴
当前评分：5/5 星
Marmoset 可以帮助您在短短几秒钟内制作代码截图、输出线框和标记代码。此外，您可以将主题和其他效果作为快照添加到您的个人介绍中。
下载链接：
32. 网络定时器
当前评分：4.5/5 星
使用 Web Timer 查看您如何使用在线时间。它会跟踪你经常使用的标签，每三分钟更新一次，让你清楚地知道自己在什么地方投资或浪费的时间最多。您的数据会以直观的饼状图展示，方便您直观的看到自己的时间分配，帮助您更好地复习，从而提高您上网时的专注力和效率。
下载链接：
33. Lorem Ipsum 生成器
当前评分：4/5 星
使用 Lorem Ipsum Generator 创建虚拟文本并将其放置在您的 网站 或应用程序中，既快捷又方便，还避免了重复的剪切和粘贴工作。Lorem Ipsum Generator 的目的是使这个过程更简单、更快捷。此外，为了让 Lorem Ipsum 更快地使用，有时需要对其进行刷新。
下载链接：
34. 链接群
当前评分：5/5 星
Linkclump 是一个扩展工具，用于批量打开网页中的多个链接。您只需要用鼠标拖动并选择所有要打开的链接，即可在LinkClump 的新选项卡和窗口中一次性打开它们。同时您还可以将它们保存为书签、复制到剪贴板等。Linkclump 的源代码可以在 GitHub 上找到，使用它将使您对任何项目的研究更加有效。
下载链接：
35. 自动分页
当前评分：4/5 星
使用 AutoPagerize 允许您在一页中加载子页面。这个方便直观的小工具使网页浏览更加高效。
下载链接：
36. 会话管理器
当前评分：3.5/5 星
会话管理器允许您随时快速轻松地保存当前浏览器状态，并允许您在需要时立即备份所有选项卡。同时，Session Manager 还有助于对 网站 进行分组，例如采集社交媒体资料、与某些项目相关的标签等。
下载链接：
37. 最后一关
当前评分：4.5/5 星
如果您在每个站点上设置的密码都不一样，那么您可能不记得需要使用的这么多站点的密码和登录帐户。如果您使用 LastPass，您只需要记住一个安全的密码即可解决上述问题。
下载链接：
38. 调整标签大小
查看全部
chrome插件网页抓取(网页添加富文本编辑器的评分等级及评分标准
)
Web Developer 是开发者必备的扩展工具。使用 Web Developer 可以让我们轻松获取更多有关网页的信息，并进一步了解当前正在浏览的网页。Web Developer 可以在浏览器支持的任何平台上运行，包括 Windows、Mac OS 和 Linux。Firefox 和 Opera 也可以使用 Web Developer。
下载链接：
12. 页面编辑
当前评分：3/5 星
PageEdit 是一个 Chrome 插件，可以将任何网页变成富文本编辑器。这个扩展工具不仅好用，而且生成的代码也很干净。用户在Chrome中安装PageEdit插件后，可以在打开其他网页时启动PageEdit插件，为当前网页添加富文本编辑器的功能。用户可以使用PageEdit富文本编辑器以博客编辑的形式对普通网页进行编辑，例如在当前网页中添加图片，或者在网页上编辑文字。
下载链接：
13. 码可乐
当前评分：4.5/5 星
Code Cola 是可视化编辑 CSS 的最佳工具之一。而 Code Cola 不仅可以直观地编辑页面的 CSS，它的源代码也可以在 GitHub 上找到。
下载链接：
14. 完美像素
当前评分：4.5/5 星
Perfectpixel是一个非常有用的标记插件，对开发者和标记设计者很有帮助。Perfectpixel 允许您在网页上叠加半透明图像并比较像素与像素。
下载链接：
15. 忘记我
当前评分：3.5/5 星
使用忘记我，您可以删除网站的所有内容，包括：信息记录程序、历史记录、位置和会话存储等所有信息。
只需点击图标，即可永久删除所有您访问过的网站标志；而当你双击该图标时，它只会删除你查看过的特定网站 历史信息程序不会删除其他站点上的所有历史记录，因为它只运行在你地址栏中的页面上。
下载链接：
20. 清除缓存
当前评分：4.5/5 星
借助清除缓存插件，您可以一键快速删除浏览器中的缓存和数据，无需处理烦人的确认对话框、弹窗等繁琐操作。
您甚至可以通过首选项自定义要删除的特定数据，例如：应用程序缓存、信息程序、下载的文件、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码、WebSQL等. 此外，您还可以单独删除一个域名的缓存记录。使用Clear Cache确实很方便。
下载链接：
17. 点击&清理
当前评分：5/5 星
Click&Clean 是 Google Chrome 浏览器的第一个私人数据清理工具。通过 Click&Clean 插件，用户可以选择多种方式来清除 Chrome 中的历史记录。Click&Clean 清洁界面也很新潮。您可以一键删除您键入的 URL、缓存、cookie、下载历史记录和浏览历史记录。Click&Clean 甚至可以删除客户端 Web SQL 数据库、Flash Cookie (LSO) 等。
下载链接：
18. 用户代理切换器
当前评分：4/5 星
User Agent Switcher 是一个可以模拟搜索引擎爬虫的程序。使用模拟Agent访问那些被搜索引擎操纵过的网页，就可以看到真实的内容。
而User Agent Switcher可以让您快速切换浏览器的用户代理（User Agent，UA），实现浏览器的华丽蜕变。无论是伪装成其他平台/品牌的浏览器还是伪装成其他版本的浏览器都没有问题。
下载链接：
19. iMacros for Chrome
当前评分：4/5 星
iMacros for Chrome 是一个插件，可以帮助您填写表单并自动保存它们。当你在 Chrome 中安装 iMacros for Chrome 插件时，该插件会帮你自动记住你输入的表单内容，下次输入时，它会还原这些重复的操作，帮助你改进填写形式的效率节省您的时间。
您有时可能会遇到一些问题，导致无法正确录制宏，但是您可以通过关闭对话框并重新打开对话框或刷新页面来轻松解决问题。
下载链接：
20.分辨率测试
当前评分：4/5 星
Chrome 的 Extension Test，Resolution Test，用于测试浏览器的分辨率。非常方便前端开发。
下载链接：
21. IE 标签扩展
当前评分：4.5/5 星
我们可以通过在 IE 浏览器中使用 IE Tab 扩展来显示网页。这个工具可以让你使用Java、ActiveX、Sharepoint、Silverlight等来测试你的网站在不同版本的IE下是否会退出Chrome。但是，IE Tab 扩展仅适用于 Windows。
下载链接：
22. IE 标签多
当前评分：4.5/5 星
使用 IE Tab Multi 检查您的应用程序或 网站 在 IE 浏览器中的显示。IE Tab Multi 是产生与 IE 最相似行为的工具，它还允许您运行 ActiveX 控件。但它只支持 Windows，在 Windows 8 中它只支持桌面模式。
下载链接：
23. 有效性
当前评分：4/5 星
您可以通过单击浏览器地址栏中的图标，使用 Validity 扩展程序快速验证您的代码。要使用有效性，只需单击工具栏中的图标即可验证当前 HTML 文档，而无需离开页面。
下载链接：
24. YSlow
当前评分：4/5 星
YSlow 是一个基于 FireFox 的插件。这个插件可以分析网站的页面，它会告诉你如何根据一定的规则优化网站以提高网站的性能。
下载链接：
25. 铬道尔顿化！
当前评分：4/5 星
使用 Chrome Daltonize！您可以测试您的应用程序和网页的可用性是否存在色盲问题。铬道尔顿化！使用两种不同的过滤器，您可以想象元素如何出现在色盲人群面前。
下载链接：
26. 检查我的链接
当前评分：4/5 星
对于网页开发者来说，基本上每完成一个页面，就要检查页面中的每个链接是否有超链接。这时候你需要检查我的链接。您只需在要查看的网页上单击“查看我的链接”图标，它就会自动开始查看。未选中的链接为黑色，活动链接为绿色，死链接以红色突出显示。这些会在页面的右上角进行统计显示，会显示当前的检查进度、活链接数、死链接数。
下载链接：
27. 截止日期后
当前评分：4/5 星
After the Deadline 使用人工智能来评估您的拼写、风格和语法。您只需点击可编辑区右下角的ABC图标即可完成拼写、语法和风格的评估。
下载链接：
28. 很棒的截图
当前评分：4.5/5 星
Awesome Screenshot 是一个易于使用的扩展工具。它可以快速抓取您想要共享或保存的任何屏幕截图，并且可以抓取全屏或部分屏幕。您还可以添加注释和评论，发表评论，并在分享前发表评论。掩盖个人或敏感信息等。
下载链接：
29. 剪辑
当前评分：4/5 星
Clipular 是另一个用于抓取屏幕的 Chrome 扩展工具。它本质上是一个带有书签的截图工具。与 Awesome Screenshot 一样，clipular 可以快速抓取您想要分享或保存的任何屏幕截图，并自动将您的剪辑保存在 Google Drive 上。
使用clipular时，可以双击ALT，点击并拖动要截屏的区域，会出现几个选项，包括：共享、下载、备份到Google Drive等。
下载链接：
30. 桶
当前评分：4.5/5 星
bukket 是一个非常容易使用的 Chrome 扩展器。它可以截屏并记录屏幕。Bukket 使“使用简单可靠的视觉书签工具从浏览器中捕获和记录 GIF 动画”成为可能。
下载链接：
31. 狨猴
当前评分：5/5 星
Marmoset 可以帮助您在短短几秒钟内制作代码截图、输出线框和标记代码。此外，您可以将主题和其他效果作为快照添加到您的个人介绍中。
下载链接：
32. 网络定时器
当前评分：4.5/5 星
使用 Web Timer 查看您如何使用在线时间。它会跟踪你经常使用的标签，每三分钟更新一次，让你清楚地知道自己在什么地方投资或浪费的时间最多。您的数据会以直观的饼状图展示，方便您直观的看到自己的时间分配，帮助您更好地复习，从而提高您上网时的专注力和效率。
下载链接：
33. Lorem Ipsum 生成器
当前评分：4/5 星
使用 Lorem Ipsum Generator 创建虚拟文本并将其放置在您的 网站 或应用程序中，既快捷又方便，还避免了重复的剪切和粘贴工作。Lorem Ipsum Generator 的目的是使这个过程更简单、更快捷。此外，为了让 Lorem Ipsum 更快地使用，有时需要对其进行刷新。
下载链接：
34. 链接群
当前评分：5/5 星
Linkclump 是一个扩展工具，用于批量打开网页中的多个链接。您只需要用鼠标拖动并选择所有要打开的链接，即可在LinkClump 的新选项卡和窗口中一次性打开它们。同时您还可以将它们保存为书签、复制到剪贴板等。Linkclump 的源代码可以在 GitHub 上找到，使用它将使您对任何项目的研究更加有效。
下载链接：
35. 自动分页
当前评分：4/5 星
使用 AutoPagerize 允许您在一页中加载子页面。这个方便直观的小工具使网页浏览更加高效。
下载链接：
36. 会话管理器
当前评分：3.5/5 星
会话管理器允许您随时快速轻松地保存当前浏览器状态，并允许您在需要时立即备份所有选项卡。同时，Session Manager 还有助于对 网站 进行分组，例如采集社交媒体资料、与某些项目相关的标签等。
下载链接：
37. 最后一关
当前评分：4.5/5 星
如果您在每个站点上设置的密码都不一样，那么您可能不记得需要使用的这么多站点的密码和登录帐户。如果您使用 LastPass，您只需要记住一个安全的密码即可解决上述问题。
下载链接：
38. 调整标签大小
chrome插件网页抓取(浏览器中为收集或存储有关任何个人用户的信息不使用持久存储)
网站优化 • 优采云 发表了文章 • 0 个评论 • 44 次浏览 • 2021-12-15 15:00
chrome插件网页抓取(浏览器中为收集或存储有关任何个人用户的信息不使用持久存储)
此扩展程序允许您直接在浏览器中为任何公共 网站 生成站点地图。生成站点地图时，扩展会渲染网页并等待javascript加载，非常适合抓取使用angular、react等制作的动态单页应用。
这个扩展的工作原理是获取一些起始 URL，抓取页面以获得更多链接，然后递归地抓取这些页面以获得更多链接。检查找到的所有链接后，扩展程序将输出一个站点地图文件。
这种实现对于收录数万页的 网站 来说是不切实际的。但是，它可以在合理的时间内抓取数千个条目。
================================
隐私政策
================================
此应用程序不会采集或存储有关任何个人用户的信息。
此应用程序不使用持久存储。所有应用
数据仅保存在运行系统内存中。
当应用程序运行时，它将为特定域的用户生成站点地图
它已被选中，并且只有在用户明确授予这样做的权限之后。
应用程序执行结束后，所有数据和生成的站点地图
一旦内存被回收，它就会丢失。
此应用程序可能会采集匿名和汇总使用情况
根据谷歌分析tos数据改善用户体验
并确定关键功能。同样，这些信息不是
识别个人用户并遵循 GA tos 查看全部
此扩展程序允许您直接在浏览器中为任何公共 网站 生成站点地图。生成站点地图时，扩展会渲染网页并等待javascript加载，非常适合抓取使用angular、react等制作的动态单页应用。
这个扩展的工作原理是获取一些起始 URL，抓取页面以获得更多链接，然后递归地抓取这些页面以获得更多链接。检查找到的所有链接后，扩展程序将输出一个站点地图文件。
这种实现对于收录数万页的 网站 来说是不切实际的。但是，它可以在合理的时间内抓取数千个条目。
================================
隐私政策
================================
此应用程序不会采集或存储有关任何个人用户的信息。
此应用程序不使用持久存储。所有应用
数据仅保存在运行系统内存中。
当应用程序运行时，它将为特定域的用户生成站点地图
它已被选中，并且只有在用户明确授予这样做的权限之后。
应用程序执行结束后，所有数据和生成的站点地图
一旦内存被回收，它就会丢失。
此应用程序可能会采集匿名和汇总使用情况
根据谷歌分析tos数据改善用户体验
并确定关键功能。同样，这些信息不是
识别个人用户并遵循 GA tos 查看全部
chrome插件网页抓取(浏览器中为收集或存储有关任何个人用户的信息不使用持久存储)
此扩展程序允许您直接在浏览器中为任何公共 网站 生成站点地图。生成站点地图时，扩展会渲染网页并等待javascript加载，非常适合抓取使用angular、react等制作的动态单页应用。
这个扩展的工作原理是获取一些起始 URL，抓取页面以获得更多链接，然后递归地抓取这些页面以获得更多链接。检查找到的所有链接后，扩展程序将输出一个站点地图文件。
这种实现对于收录数万页的 网站 来说是不切实际的。但是，它可以在合理的时间内抓取数千个条目。
================================
隐私政策
================================
此应用程序不会采集或存储有关任何个人用户的信息。
此应用程序不使用持久存储。所有应用
数据仅保存在运行系统内存中。
当应用程序运行时，它将为特定域的用户生成站点地图
它已被选中，并且只有在用户明确授予这样做的权限之后。
应用程序执行结束后，所有数据和生成的站点地图
一旦内存被回收，它就会丢失。
此应用程序可能会采集匿名和汇总使用情况
根据谷歌分析tos数据改善用户体验
并确定关键功能。同样，这些信息不是
识别个人用户并遵循 GA tos
chrome插件网页抓取( 10款亲测且超实用的Chrome小插件，助设计师更快获取灵感 )
网站优化 • 优采云 发表了文章 • 0 个评论 • 70 次浏览 • 2021-12-14 06:06
chrome插件网页抓取(
10款亲测且超实用的Chrome小插件，助设计师更快获取灵感
)
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
玩
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。
查看全部
10款亲测且超实用的Chrome小插件，助设计师更快获取灵感
)
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
玩
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。
查看全部
chrome插件网页抓取(
10款亲测且超实用的Chrome小插件，助设计师更快获取灵感
)
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
玩
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。
chrome插件网页抓取(Chrome插件轻松实现，直接访问网站logo图片 )
网站优化 • 优采云 发表了文章 • 0 个评论 • 68 次浏览 • 2021-12-10 01:16
chrome插件网页抓取(Chrome插件轻松实现，直接访问网站logo图片
)
我们在发布一些内容的时候，经常需要用到一些知名公司或者品牌的logo图片。最直接的方法是找到品牌官网，或者上百度图片或者谷歌图片。但并不是每个品牌或者网站都能找到相关的logo图片，有些网上画廊可能没有很标准的品牌LOGO图片。今天给大家介绍一个Chrome插件，方便实现，或者直接访问网站操作。
插件名称：Logo Grabber
官网：
下载地址：点击进入
插件介绍：获取任意网站LOGO，Logo Grabber 是一款免费的浏览器扩展，可以让您快速抓取任何网站 的正确格式的logo。对于网站无法看到和捕获徽标的许多情况尤其有用。
Logo Grabber 使用 Oqtor API 相关技术，在最短的时间内获取最正确的 Logo 图案。徽标抓取器可节省时间和精力。
如何使用
这里，我用官方Logo Grabber网站截取爱绿豆logo进行演示。操作也很方便。进入官网，输入品牌名称、公司名称或网站名称。
点击“GENERATE MY PAGE”按钮进入下一页，输入网站地址；
点击“GET YOUR PRESS KIT”后，会自动生成网站logo结果，如下图；
您可以选择直接下载徽标或颜色。
查看全部
)
我们在发布一些内容的时候，经常需要用到一些知名公司或者品牌的logo图片。最直接的方法是找到品牌官网，或者上百度图片或者谷歌图片。但并不是每个品牌或者网站都能找到相关的logo图片，有些网上画廊可能没有很标准的品牌LOGO图片。今天给大家介绍一个Chrome插件，方便实现，或者直接访问网站操作。
插件名称：Logo Grabber
官网：
下载地址：点击进入
插件介绍：获取任意网站LOGO，Logo Grabber 是一款免费的浏览器扩展，可以让您快速抓取任何网站 的正确格式的logo。对于网站无法看到和捕获徽标的许多情况尤其有用。
Logo Grabber 使用 Oqtor API 相关技术，在最短的时间内获取最正确的 Logo 图案。徽标抓取器可节省时间和精力。
如何使用
这里，我用官方Logo Grabber网站截取爱绿豆logo进行演示。操作也很方便。进入官网，输入品牌名称、公司名称或网站名称。
点击“GENERATE MY PAGE”按钮进入下一页，输入网站地址；
点击“GET YOUR PRESS KIT”后，会自动生成网站logo结果，如下图；
您可以选择直接下载徽标或颜色。
查看全部
chrome插件网页抓取(Chrome插件轻松实现，直接访问网站logo图片
)
我们在发布一些内容的时候，经常需要用到一些知名公司或者品牌的logo图片。最直接的方法是找到品牌官网，或者上百度图片或者谷歌图片。但并不是每个品牌或者网站都能找到相关的logo图片，有些网上画廊可能没有很标准的品牌LOGO图片。今天给大家介绍一个Chrome插件，方便实现，或者直接访问网站操作。
https://www.iludou.com/wp-cont ... 6.jpg 300w" />插件名称：Logo Grabber
官网：
下载地址：点击进入
插件介绍：获取任意网站LOGO，Logo Grabber 是一款免费的浏览器扩展，可以让您快速抓取任何网站 的正确格式的logo。对于网站无法看到和捕获徽标的许多情况尤其有用。
Logo Grabber 使用 Oqtor API 相关技术，在最短的时间内获取最正确的 Logo 图案。徽标抓取器可节省时间和精力。
如何使用
这里，我用官方Logo Grabber网站截取爱绿豆logo进行演示。操作也很方便。进入官网，输入品牌名称、公司名称或网站名称。
https://www.iludou.com/wp-cont ... 9.png 300w" />点击“GENERATE MY PAGE”按钮进入下一页，输入网站地址；
点击“GET YOUR PRESS KIT”后，会自动生成网站logo结果，如下图；
https://www.iludou.com/wp-cont ... 8.png 300w" />您可以选择直接下载徽标或颜色。
https://www.iludou.com/wp-cont ... 0.png 300w" /> chrome插件网页抓取(Instapaper网页离线阅读插件替代便签的应用插件作用)
网站优化 • 优采云 发表了文章 • 0 个评论 • 77 次浏览 • 2021-12-07 19:04
chrome插件网页抓取(Instapaper网页离线阅读插件替代便签的应用插件作用)
Instapaper插件是一款运行在chromr核心的chrome网页离线阅读插件，可以及时保存网页。您可以使用此插件替换笔记并将当前菜单栏中的网页保存到插件的官网离线阅读器中。在iPhone、iPad、Android或电脑等设备上用Instapaper文章阅读本网页，热烈欢迎免费下载。
【安装应用】
1、我这里用的是chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展来缓解压力。你在这个页面网上下载的Instapaper插件，拖到扩展页面就可以了。
2、安装结束后，试试插件的实际效果。
3、 进入网页后，点击页面右上角的插件标志，立即将插件保存到你的Instapaper账户中，但如果你没有登录应用程序，它会自动跳转到登录页面或注册页面。
【插件功能】
1、 通过将当前菜单栏保存到您的 Instapaper 帐户，一切都会正常进行。
2、 未登录的客户将被发送到登录页面或注册页面。整个过程结束后，他们将被重定向到初始网页，该网页存储在循环队列中。
3、此浏览器扩展可用于替换便签并将内容立即保存到Instapaper序列中。 查看全部
Instapaper插件是一款运行在chromr核心的chrome网页离线阅读插件，可以及时保存网页。您可以使用此插件替换笔记并将当前菜单栏中的网页保存到插件的官网离线阅读器中。在iPhone、iPad、Android或电脑等设备上用Instapaper文章阅读本网页，热烈欢迎免费下载。
【安装应用】
1、我这里用的是chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展来缓解压力。你在这个页面网上下载的Instapaper插件，拖到扩展页面就可以了。
2、安装结束后，试试插件的实际效果。
3、 进入网页后，点击页面右上角的插件标志，立即将插件保存到你的Instapaper账户中，但如果你没有登录应用程序，它会自动跳转到登录页面或注册页面。
【插件功能】
1、 通过将当前菜单栏保存到您的 Instapaper 帐户，一切都会正常进行。
2、 未登录的客户将被发送到登录页面或注册页面。整个过程结束后，他们将被重定向到初始网页，该网页存储在循环队列中。
3、此浏览器扩展可用于替换便签并将内容立即保存到Instapaper序列中。 查看全部
chrome插件网页抓取(Instapaper网页离线阅读插件替代便签的应用插件作用)
Instapaper插件是一款运行在chromr核心的chrome网页离线阅读插件，可以及时保存网页。您可以使用此插件替换笔记并将当前菜单栏中的网页保存到插件的官网离线阅读器中。在iPhone、iPad、Android或电脑等设备上用Instapaper文章阅读本网页，热烈欢迎免费下载。
【安装应用】
1、我这里用的是chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展来缓解压力。你在这个页面网上下载的Instapaper插件，拖到扩展页面就可以了。
2、安装结束后，试试插件的实际效果。
3、 进入网页后，点击页面右上角的插件标志，立即将插件保存到你的Instapaper账户中，但如果你没有登录应用程序，它会自动跳转到登录页面或注册页面。
【插件功能】
1、 通过将当前菜单栏保存到您的 Instapaper 帐户，一切都会正常进行。
2、 未登录的客户将被发送到登录页面或注册页面。整个过程结束后，他们将被重定向到初始网页，该网页存储在循环队列中。
3、此浏览器扩展可用于替换便签并将内容立即保存到Instapaper序列中。
chrome插件网页抓取(ChromeSPY是一款网页元素分析工具，下载体验吧！)
网站优化 • 优采云 发表了文章 • 0 个评论 • 80 次浏览 • 2021-12-07 06:21
chrome插件网页抓取(ChromeSPY是一款网页元素分析工具，下载体验吧！)
Chrome SPY 是一个网页元素分析工具。该软件可以帮助用户分析网页元素，帮助用户获取引用代码、tagName、代码关键字等元素信息，方便用户根据自己的需要查询获取信息，喜欢就下载吧并体验它！
软件介绍
网页元素是您在 Internet 上浏览时看到的所有内容。页面称为网页，许多网页构成一个网站。网站 的第一个网页称为主页。
首页是所有网页的索引页。您可以通过单击主页上的超链接打开其他网页。正是由于首页在网站中的特殊作用，人们经常使用首页来指代所有网页。个人网站被称为“个人主页”，个人网站将被建立和生产。主题网站 被称为“网页创建”。
网页元素包括：文字、图片、音频、动画和视频。文字符合排版要求。图片、音频、动画、视频满足网络传输和专题需要，需要选择。
软件功能
1、Chrome SPY 提供网页元素分析功能，您可以通过该软件立即读取元素；
2、 可以提取元素属性并保存文本；
3、可以查看谷歌浏览器的网页属性；
4、可以在软件界面启动浏览器；
5、支持标签选择，查看当前网页的标签内容；
6、 显示左边的代码，查看当前元素的引用代码；
7、支持代码关键字查看，支持标签名称查看。
指示
1、打开Chrome_SPY.exe软件，快速识别谷歌浏览器；
2、 点击启动浏览器，即可立即运行，方便在浏览器中查看网页内容；
3、 访问网页时，可以在软件界面查看标签，选择标签查看内容；
4、 获取tag时，会在此处显示网页的相关内容，获取的内容可以复制，支持元素矩形，元素坐标，引用代码，tagName，code关键字；
5、 提取元素功能，在软件界面中提取您需要的数据，并保存为文本。
更新日志
1.修复已知错误
2.优化操作体验 查看全部
Chrome SPY 是一个网页元素分析工具。该软件可以帮助用户分析网页元素，帮助用户获取引用代码、tagName、代码关键字等元素信息，方便用户根据自己的需要查询获取信息，喜欢就下载吧并体验它！
软件介绍
网页元素是您在 Internet 上浏览时看到的所有内容。页面称为网页，许多网页构成一个网站。网站 的第一个网页称为主页。
首页是所有网页的索引页。您可以通过单击主页上的超链接打开其他网页。正是由于首页在网站中的特殊作用，人们经常使用首页来指代所有网页。个人网站被称为“个人主页”，个人网站将被建立和生产。主题网站 被称为“网页创建”。
网页元素包括：文字、图片、音频、动画和视频。文字符合排版要求。图片、音频、动画、视频满足网络传输和专题需要，需要选择。
软件功能
1、Chrome SPY 提供网页元素分析功能，您可以通过该软件立即读取元素；
2、 可以提取元素属性并保存文本；
3、可以查看谷歌浏览器的网页属性；
4、可以在软件界面启动浏览器；
5、支持标签选择，查看当前网页的标签内容；
6、 显示左边的代码，查看当前元素的引用代码；
7、支持代码关键字查看，支持标签名称查看。
指示
1、打开Chrome_SPY.exe软件，快速识别谷歌浏览器；
2、 点击启动浏览器，即可立即运行，方便在浏览器中查看网页内容；
3、 访问网页时，可以在软件界面查看标签，选择标签查看内容；
4、 获取tag时，会在此处显示网页的相关内容，获取的内容可以复制，支持元素矩形，元素坐标，引用代码，tagName，code关键字；
5、 提取元素功能，在软件界面中提取您需要的数据，并保存为文本。
更新日志
1.修复已知错误
2.优化操作体验 查看全部
chrome插件网页抓取(ChromeSPY是一款网页元素分析工具，下载体验吧！)
Chrome SPY 是一个网页元素分析工具。该软件可以帮助用户分析网页元素，帮助用户获取引用代码、tagName、代码关键字等元素信息，方便用户根据自己的需要查询获取信息，喜欢就下载吧并体验它！
软件介绍
网页元素是您在 Internet 上浏览时看到的所有内容。页面称为网页，许多网页构成一个网站。网站 的第一个网页称为主页。
首页是所有网页的索引页。您可以通过单击主页上的超链接打开其他网页。正是由于首页在网站中的特殊作用，人们经常使用首页来指代所有网页。个人网站被称为“个人主页”，个人网站将被建立和生产。主题网站 被称为“网页创建”。
网页元素包括：文字、图片、音频、动画和视频。文字符合排版要求。图片、音频、动画、视频满足网络传输和专题需要，需要选择。
软件功能
1、Chrome SPY 提供网页元素分析功能，您可以通过该软件立即读取元素；
2、 可以提取元素属性并保存文本；
3、可以查看谷歌浏览器的网页属性；
4、可以在软件界面启动浏览器；
5、支持标签选择，查看当前网页的标签内容；
6、 显示左边的代码，查看当前元素的引用代码；
7、支持代码关键字查看，支持标签名称查看。
指示
1、打开Chrome_SPY.exe软件，快速识别谷歌浏览器；
2、 点击启动浏览器，即可立即运行，方便在浏览器中查看网页内容；
3、 访问网页时，可以在软件界面查看标签，选择标签查看内容；
4、 获取tag时，会在此处显示网页的相关内容，获取的内容可以复制，支持元素矩形，元素坐标，引用代码，tagName，code关键字；
5、 提取元素功能，在软件界面中提取您需要的数据，并保存为文本。
更新日志
1.修复已知错误
2.优化操作体验
chrome插件网页抓取(chrome插件网页抓取工具v2.0.11.更新吧)
网站优化 • 优采云 发表了文章 • 0 个评论 • 52 次浏览 • 2021-12-06 09:00
chrome插件网页抓取(chrome插件网页抓取工具v2.0.11.更新吧)
chrome插件网页抓取工具v2.0.11.11更新
follow吧
你让我发现你们竟然都用360浏览器来抓取搜索引擎的页面！！！
follow
我用的是插件v2.1.15，各大浏览器各大插件网站，逐步在更新中。
有一个数据采集采集搜索结果
好像现在存量3000+，应该很牛。
yahoo不错,facebook不错.通常找yahoo.
我也很想知道
推荐基于前段时间谷歌浏览器版本的“神搜”，真的可以提取各大搜索引擎的抓取记录及连接，而且不用下各种插件，每次上次直接用搜索引擎（百度、必应、谷歌、搜狗、雅虎等）、迅雷等拖拽就能抓取到相关页面的抓取地址。1.隐蔽而高级，可抓取互联网上的丰富内容；2.可取得互联网从业者及创业者访问网站的推广信息，甚至账号信息；3.国内“有缘网”、“百姓网”、“58同城”等热门网站信息还可以获取到互联网对接商家和买家的各种资源。
同时对各大网站连接做分析和统计，可以分析网站受众的搜索、浏览、购买习惯，从而了解消费者的相关需求；4.谷歌、维基等搜索引擎就自带不错的数据抓取，我之前做过谷歌搜索指数的分析，但没有经验，而且价格不便宜，这方面的统计缺失有待弥补。可以看看这篇文章，深度剖析谷歌搜索搜索效果挖掘，希望能给大家一些启发，互联网广告投放效果的数据分析：网赚秘籍、运营大牛等必备技能。 查看全部
chrome插件网页抓取工具v2.0.11.11更新
follow吧
你让我发现你们竟然都用360浏览器来抓取搜索引擎的页面！！！
follow
我用的是插件v2.1.15，各大浏览器各大插件网站，逐步在更新中。
有一个数据采集采集搜索结果
好像现在存量3000+，应该很牛。
yahoo不错,facebook不错.通常找yahoo.
我也很想知道
推荐基于前段时间谷歌浏览器版本的“神搜”，真的可以提取各大搜索引擎的抓取记录及连接，而且不用下各种插件，每次上次直接用搜索引擎（百度、必应、谷歌、搜狗、雅虎等）、迅雷等拖拽就能抓取到相关页面的抓取地址。1.隐蔽而高级，可抓取互联网上的丰富内容；2.可取得互联网从业者及创业者访问网站的推广信息，甚至账号信息；3.国内“有缘网”、“百姓网”、“58同城”等热门网站信息还可以获取到互联网对接商家和买家的各种资源。
同时对各大网站连接做分析和统计，可以分析网站受众的搜索、浏览、购买习惯，从而了解消费者的相关需求；4.谷歌、维基等搜索引擎就自带不错的数据抓取，我之前做过谷歌搜索指数的分析，但没有经验，而且价格不便宜，这方面的统计缺失有待弥补。可以看看这篇文章，深度剖析谷歌搜索搜索效果挖掘，希望能给大家一些启发，互联网广告投放效果的数据分析：网赚秘籍、运营大牛等必备技能。 查看全部
chrome插件网页抓取(chrome插件网页抓取工具v2.0.11.更新吧)
chrome插件网页抓取工具v2.0.11.11更新
follow吧
你让我发现你们竟然都用360浏览器来抓取搜索引擎的页面！！！
follow
我用的是插件v2.1.15，各大浏览器各大插件网站，逐步在更新中。
有一个数据采集采集搜索结果
好像现在存量3000+，应该很牛。
yahoo不错,facebook不错.通常找yahoo.
我也很想知道
推荐基于前段时间谷歌浏览器版本的“神搜”，真的可以提取各大搜索引擎的抓取记录及连接，而且不用下各种插件，每次上次直接用搜索引擎（百度、必应、谷歌、搜狗、雅虎等）、迅雷等拖拽就能抓取到相关页面的抓取地址。1.隐蔽而高级，可抓取互联网上的丰富内容；2.可取得互联网从业者及创业者访问网站的推广信息，甚至账号信息；3.国内“有缘网”、“百姓网”、“58同城”等热门网站信息还可以获取到互联网对接商家和买家的各种资源。
同时对各大网站连接做分析和统计，可以分析网站受众的搜索、浏览、购买习惯，从而了解消费者的相关需求；4.谷歌、维基等搜索引擎就自带不错的数据抓取，我之前做过谷歌搜索指数的分析，但没有经验，而且价格不便宜，这方面的统计缺失有待弥补。可以看看这篇文章，深度剖析谷歌搜索搜索效果挖掘，希望能给大家一些启发，互联网广告投放效果的数据分析：网赚秘籍、运营大牛等必备技能。
chrome插件网页抓取(有了这9款GoogleChrome插件，设计自己专属的网络世界不再麻烦)
网站优化 • 优采云 发表了文章 • 0 个评论 • 65 次浏览 • 2021-12-04 16:06
chrome插件网页抓取(有了这9款GoogleChrome插件，设计自己专属的网络世界不再麻烦)
源 9 对网页设计师有用的 Google Chrome 扩展 | 工具
有了这9个Google Chrome插件，设计自己的网络世界不再麻烦。
与其他互联网浏览器相比，谷歌浏览器还很年轻。但是，其客户覆盖率并不逊色于其他竞争对手。在WDL（国外知名博客）中，Chrome排在Firefox之后位居第二。考虑到这一点，并且本文中的大多数博主都是自己设计网络的爱好者，我们想介绍一些谷歌插件，您可以使用它们来为读者提供信息。
Web开发
web开发插件增加了工具栏按钮，为用户提供各种开发工具。这个由火狐网开发的插件出自同一人之手。
砖块
Brick 是一个网站 数据采集工具。查看上图，Brick 已检测到此网页上使用的所有计算机技术。Brick 的目标是帮助开发人员、研究人员和设计人员找到他们可以使用的技术。
瞪大眼睛
.
Open Eyes 是谷歌浏览器和谷歌开源项目的插件。他可以让你从任何网站中丢弃你喜欢的任何颜色。这不仅对网站 开发者来说非常方便，而且还很酷。
测量它！
“量一下！” 允许您通过拿着标尺来检测 网站 上任何元素的像素高度和宽度。
网站翻译
这个插件可以改变用户网站，以满足各种程序的兼容性问题。这对于网页设计开发者解决网站外观或实现各种想法非常方便。
数据库字符集转换检测
受火狐插件CSSViewer的影响，这个谷歌插件可以让你快速抓取一个元素的基本CSS组成，而无需区分主题的网站。
随心所欲
当您在开发阶段、测试阶段、应用阶段需要随时切换时，强烈推荐“西西关”！
速度马力
极速马力是一款帮助您检测和修复网络应用问题的插件。它允许用户可视化推荐设置下的标准，并计算出最适合网页运行的设置数据。
完美的截屏工具
完美的屏幕捕获工具可帮助您捕获整个页面或其中的任何部分。可以画圆、标记箭头、画直线、文字批注，一键分享。支持PNG格式和快捷键功能。 查看全部
源 9 对网页设计师有用的 Google Chrome 扩展 | 工具
有了这9个Google Chrome插件，设计自己的网络世界不再麻烦。
与其他互联网浏览器相比，谷歌浏览器还很年轻。但是，其客户覆盖率并不逊色于其他竞争对手。在WDL（国外知名博客）中，Chrome排在Firefox之后位居第二。考虑到这一点，并且本文中的大多数博主都是自己设计网络的爱好者，我们想介绍一些谷歌插件，您可以使用它们来为读者提供信息。
Web开发
web开发插件增加了工具栏按钮，为用户提供各种开发工具。这个由火狐网开发的插件出自同一人之手。
砖块
Brick 是一个网站 数据采集工具。查看上图，Brick 已检测到此网页上使用的所有计算机技术。Brick 的目标是帮助开发人员、研究人员和设计人员找到他们可以使用的技术。
瞪大眼睛
.
Open Eyes 是谷歌浏览器和谷歌开源项目的插件。他可以让你从任何网站中丢弃你喜欢的任何颜色。这不仅对网站 开发者来说非常方便，而且还很酷。
测量它！
“量一下！” 允许您通过拿着标尺来检测 网站 上任何元素的像素高度和宽度。
网站翻译
这个插件可以改变用户网站，以满足各种程序的兼容性问题。这对于网页设计开发者解决网站外观或实现各种想法非常方便。
数据库字符集转换检测
受火狐插件CSSViewer的影响，这个谷歌插件可以让你快速抓取一个元素的基本CSS组成，而无需区分主题的网站。
随心所欲
当您在开发阶段、测试阶段、应用阶段需要随时切换时，强烈推荐“西西关”！
速度马力
极速马力是一款帮助您检测和修复网络应用问题的插件。它允许用户可视化推荐设置下的标准，并计算出最适合网页运行的设置数据。
完美的截屏工具
完美的屏幕捕获工具可帮助您捕获整个页面或其中的任何部分。可以画圆、标记箭头、画直线、文字批注，一键分享。支持PNG格式和快捷键功能。 查看全部
chrome插件网页抓取(有了这9款GoogleChrome插件，设计自己专属的网络世界不再麻烦)
源 9 对网页设计师有用的 Google Chrome 扩展 | 工具
有了这9个Google Chrome插件，设计自己的网络世界不再麻烦。
与其他互联网浏览器相比，谷歌浏览器还很年轻。但是，其客户覆盖率并不逊色于其他竞争对手。在WDL（国外知名博客）中，Chrome排在Firefox之后位居第二。考虑到这一点，并且本文中的大多数博主都是自己设计网络的爱好者，我们想介绍一些谷歌插件，您可以使用它们来为读者提供信息。
Web开发
web开发插件增加了工具栏按钮，为用户提供各种开发工具。这个由火狐网开发的插件出自同一人之手。
砖块
Brick 是一个网站 数据采集工具。查看上图，Brick 已检测到此网页上使用的所有计算机技术。Brick 的目标是帮助开发人员、研究人员和设计人员找到他们可以使用的技术。
瞪大眼睛
.
Open Eyes 是谷歌浏览器和谷歌开源项目的插件。他可以让你从任何网站中丢弃你喜欢的任何颜色。这不仅对网站 开发者来说非常方便，而且还很酷。
测量它！
“量一下！” 允许您通过拿着标尺来检测 网站 上任何元素的像素高度和宽度。
网站翻译
这个插件可以改变用户网站，以满足各种程序的兼容性问题。这对于网页设计开发者解决网站外观或实现各种想法非常方便。
数据库字符集转换检测
受火狐插件CSSViewer的影响，这个谷歌插件可以让你快速抓取一个元素的基本CSS组成，而无需区分主题的网站。
随心所欲
当您在开发阶段、测试阶段、应用阶段需要随时切换时，强烈推荐“西西关”！
速度马力
极速马力是一款帮助您检测和修复网络应用问题的插件。它允许用户可视化推荐设置下的标准，并计算出最适合网页运行的设置数据。
完美的截屏工具
完美的屏幕捕获工具可帮助您捕获整个页面或其中的任何部分。可以画圆、标记箭头、画直线、文字批注，一键分享。支持PNG格式和快捷键功能。
chrome插件网页抓取(PicMonkeyExtensionChromeExtensionChrome网页图片抓取插件轻松抓取您所在网页上的所有图片 )
网站优化 • 优采云 发表了文章 • 0 个评论 • 37 次浏览 • 2021-12-02 18:18
chrome插件网页抓取(PicMonkeyExtensionChromeExtensionChrome网页图片抓取插件轻松抓取您所在网页上的所有图片
)
PicMonkeyExtensionChrome插件是一款非常不错的Chrome网页图片抓取插件，它可以轻松抓取您所在网页的所有图片，并且可以在PicMonkey官方网站上对图片进行编辑。这是一个非常好的。插入。.
相关软件软件大小版本说明下载地址
PicMonkey Extension Chrome 插件是一款优秀的Chrome 网页图片抓取插件。它可以轻松抓取您网页上的所有图片，并在PicMonkey 官方网站 上编辑图片。这是一个非常好的插件。
特征
1、PicMonkey 插件允许您立即从任何网页抓取图像并在 PicMonkey 中打开它们进行编辑。
2、PicMonkey 是一个免费的在线照片编辑器。
3、PicMonkey 在线编辑器的精简和快速引擎允许您执行基本编辑，例如裁剪和旋转，并使用颜色效果、叠加、字体、纹理、框架和触摸工具增强您的图像。
指示
1、编辑器使用chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展，将你在本页下载的PicMonkey插件解压，拖入扩展页面。能。
2、安装完成后，试一下插件效果。
3、 进入网页后，点击界面右上角的插件图标，可以抓取页面上的所有图片。
4、 点击需要的图片后，可以在PicMonkey在线图片编辑网页对点击的图片进行编辑。
查看全部
)
PicMonkeyExtensionChrome插件是一款非常不错的Chrome网页图片抓取插件，它可以轻松抓取您所在网页的所有图片，并且可以在PicMonkey官方网站上对图片进行编辑。这是一个非常好的。插入。.
相关软件软件大小版本说明下载地址
PicMonkey Extension Chrome 插件是一款优秀的Chrome 网页图片抓取插件。它可以轻松抓取您网页上的所有图片，并在PicMonkey 官方网站 上编辑图片。这是一个非常好的插件。
特征
1、PicMonkey 插件允许您立即从任何网页抓取图像并在 PicMonkey 中打开它们进行编辑。
2、PicMonkey 是一个免费的在线照片编辑器。
3、PicMonkey 在线编辑器的精简和快速引擎允许您执行基本编辑，例如裁剪和旋转，并使用颜色效果、叠加、字体、纹理、框架和触摸工具增强您的图像。
指示
1、编辑器使用chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展，将你在本页下载的PicMonkey插件解压，拖入扩展页面。能。
2、安装完成后，试一下插件效果。
3、 进入网页后，点击界面右上角的插件图标，可以抓取页面上的所有图片。
4、 点击需要的图片后，可以在PicMonkey在线图片编辑网页对点击的图片进行编辑。
查看全部
chrome插件网页抓取(PicMonkeyExtensionChromeExtensionChrome网页图片抓取插件轻松抓取您所在网页上的所有图片
)
PicMonkeyExtensionChrome插件是一款非常不错的Chrome网页图片抓取插件，它可以轻松抓取您所在网页的所有图片，并且可以在PicMonkey官方网站上对图片进行编辑。这是一个非常好的。插入。.
相关软件软件大小版本说明下载地址
PicMonkey Extension Chrome 插件是一款优秀的Chrome 网页图片抓取插件。它可以轻松抓取您网页上的所有图片，并在PicMonkey 官方网站 上编辑图片。这是一个非常好的插件。
特征
1、PicMonkey 插件允许您立即从任何网页抓取图像并在 PicMonkey 中打开它们进行编辑。
2、PicMonkey 是一个免费的在线照片编辑器。
3、PicMonkey 在线编辑器的精简和快速引擎允许您执行基本编辑，例如裁剪和旋转，并使用颜色效果、叠加、字体、纹理、框架和触摸工具增强您的图像。
指示
1、编辑器使用chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展，将你在本页下载的PicMonkey插件解压，拖入扩展页面。能。
2、安装完成后，试一下插件效果。
3、 进入网页后，点击界面右上角的插件图标，可以抓取页面上的所有图片。
4、 点击需要的图片后，可以在PicMonkey在线图片编辑网页对点击的图片进行编辑。
chrome插件网页抓取(管理你的扩展程序、Context–分组管理(组图))
网站优化 • 优采云 发表了文章 • 0 个评论 • 62 次浏览 • 2022-01-10 07:05
chrome插件网页抓取(管理你的扩展程序、Context–分组管理(组图))
“一键管理扩展”界面令人耳目一新。直接列出你安装的所有扩展，上面的是启用的扩展，下面黑色的是未启用的扩展。如果要停止启用扩展程序，只需找到扩展程序并单击它即可。同样，您可以在它停止运行后单击以恢复它。如果要卸载扩展程序，请右键单击该图标。操作简单，简单实用
类似插件推荐：
1.Extensions Manager : 管理你的扩展，上下文 - 分组管理 Chrome 扩展
2.Chromarks：一个支持书签搜索和管理的chrome插件【强烈推荐，这个编辑器正在使用】
2、抓图 - 一个超级方便的网页截图插件
安装插件后，浏览器地址栏后面会出现一个小S形图标。对于一些需要分享给朋友的网页，但是截图比较麻烦，或者一屏多截图，这个用起来超级方便。
这个插件功能丰富，抓取整个页面，抓取当前可见部分，抓取选中区域等等。保存时可以自由选择保存为PDF，或者图片，还可以将图片分享给朋友。我个人最喜欢的是截取整个网页直接保存为PDF，超级方便！
注意：小编在chrome插件网站上没有找到这个插件，作者的图片上也看不到这个插件的logo。所以不能给你下载链接。
类似插件推荐：
1、WinSnap——小而强大的截图软件，截图快手——截图、评论、分享
2、Awesome Screenshot：一个带有屏幕截图的chrome插件，包括全屏截图、注释和放大镜；编辑图片，保存和分享。
3、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。【我自己用】
3、汇汇购物助手-购物比价实用延伸
为“剁手党”，宇宙不爆，网购不停！每天最重要的就是买买买！而充分利用惠惠购物助手，可以帮助“手选人”在购物时不至于遭受大的损失。
汇汇助手主要有三个功能：1、全网比价，找到最低价。2、显示价格趋势，查询历史价格，避免被不良商家欺骗。3、提供海外产品一键购买服务，轻松完成海外购物。
注：小编也用过这个插件，很方便。但它只是临时使用，因为它会时不时推送广告。我不喜欢它。
类似插件推荐：
1、MySmartPrice 2.0--智能比价插件Chrome插件
2、如意涛：同款比价、价格曲线、降价提醒
4、Square 采集 - 采集一个灵感只需要0.13秒
在信息爆炸的时代，人们接收到的信息越来越碎片化。大多数人无法处理如此复杂的信息。如果他们遇到真正有用的信息，如果不采集和整理，只会让自己更加困惑。Square Piece 采集是一款扩展应用，可以快速采集电脑上的图片、视频和文字，可以帮助你快速采集想法，避免信息丢失。
安装方形采集插件后，只需将内容拖到浏览器侧边栏即可轻松完成采集。在采集后的数据管理方面，方形采集采用分类管理，支持私人采集，但暂时不支持标签。
注：小编还没用过这个方子采集插件，我会及时更新的
类似插件推荐：
1、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。采集拍照也很方便。【我自己用】
2、Evernote Web Clipper：印象笔记推出的剪贴插件，可以一键保存各类网页图片和文字，并永久保存在印象笔记中。同时，您还可以选择保存网页正文、隐藏广告、整页、网页截图等，以便您根据不同需求选择保存内容。告别复制粘贴，高效采集数据！
5、两个盒子——多引擎图片搜索+截图搜索+图片提取
图像识别是一个非常实用的功能。这个功能可以用来达到找一张图片的来源，从一张小图找一张大图的目的。目前，大部分搜索引擎都推出了逐图识别词条。第二个框是多引擎图片搜索插件，集成了谷歌、百度、必应、天眼等主流搜索引擎，同时显示各个引擎的搜索结果，方便你查找您想要的图像更快。第二个框除了可以按图搜索，还可以提取出现在所有页面的图片，包括隐藏在CSS中的图片，方便保存或按图搜索。此外，它还支持提取图片和截图搜索功能。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、Search by Image – 按图快速查找图片的 chrome 插件；
2、百度图像识别——基于百度搜索图像识别插件
6、Copyfish – OCR 扫描网页图像并识别文本
在线浏览PDF，或者边看视频边看字幕，却总是担心无法转成文字？不用担心，Copyfish 可以帮你做到这一点，Copyfish 是一款 Chrome 应用，支持网页 OCR 扫描，识别文字，并能自动翻译，支持中文。Copyfish支持图片、视频、PDF等，点击Chrome扩展栏中的Copyfish按钮后，会出现一个类似截图的箭头，然后选择要扫描的区域，OCR会识别。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、在线 OCR – 在线将 PDF/图像转换为 Word 文档，
2、文通TH-OCR——支持简繁英文的OCR工具
7、Local CDN – 替代加速，让原本的龟速网站飞起来
本地CDN是一个非常好用的Chrome扩展，可以将网页中的第三方js文件劫持到本地，让那些有访问障碍的网站重生，不慢的网站@ > 更快。
基本上现在的网站会加载各种js文件，为了访问更快，网站一起使用同一个js文件会变相减少加载次数，提高速度。本地 CDN 可以找到这些 JS 文件并下载到本地。由于它们是本地文件，因此速度非常快。即使是国内的 网站 JS 文件在本地也不会那么快。
备注：我用了一段时间，后来没再用，具体原因记不清了。
类似插件推荐：
1、gooreplacer - 替换开源库以加速网页浏览，
2、YSlow – 分析和优化您的 网站 性能
8、LastPass – 您的网络密码管理器
出于安全考虑，很多朋友喜欢在不同的网站中注册不同的密码，但这样做会给自己的记忆带来巨大的挑战，而且极易忘记密码。最好将记住密码的任务留给 LastPass。
LastPass 是一个著名的密码存储应用程序。它可以保存网站的登录页面和您的帐户密码。当用户打开对应的网站时，会自动填写账号和密码，甚至实现自动登录。您只需要记住LastPass主密码即可。
备注：一直用着真的很方便。特别适合记不住密码的人。
类似插件推荐：
1、Huami – 易于记忆且安全的密码管理器；
2、1Password – 跨平台密码管理器
写在最后，文章的大部分内容来自作者：秦风0804（简书），小编只是稍作调整和改编。
您可能对以下主题感兴趣： 查看全部
“一键管理扩展”界面令人耳目一新。直接列出你安装的所有扩展，上面的是启用的扩展，下面黑色的是未启用的扩展。如果要停止启用扩展程序，只需找到扩展程序并单击它即可。同样，您可以在它停止运行后单击以恢复它。如果要卸载扩展程序，请右键单击该图标。操作简单，简单实用
类似插件推荐：
1.Extensions Manager : 管理你的扩展，上下文 - 分组管理 Chrome 扩展
2.Chromarks：一个支持书签搜索和管理的chrome插件【强烈推荐，这个编辑器正在使用】
2、抓图 - 一个超级方便的网页截图插件
安装插件后，浏览器地址栏后面会出现一个小S形图标。对于一些需要分享给朋友的网页，但是截图比较麻烦，或者一屏多截图，这个用起来超级方便。
这个插件功能丰富，抓取整个页面，抓取当前可见部分，抓取选中区域等等。保存时可以自由选择保存为PDF，或者图片，还可以将图片分享给朋友。我个人最喜欢的是截取整个网页直接保存为PDF，超级方便！
注意：小编在chrome插件网站上没有找到这个插件，作者的图片上也看不到这个插件的logo。所以不能给你下载链接。
类似插件推荐：
1、WinSnap——小而强大的截图软件，截图快手——截图、评论、分享
2、Awesome Screenshot：一个带有屏幕截图的chrome插件，包括全屏截图、注释和放大镜；编辑图片，保存和分享。
3、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。【我自己用】
3、汇汇购物助手-购物比价实用延伸
为“剁手党”，宇宙不爆，网购不停！每天最重要的就是买买买！而充分利用惠惠购物助手，可以帮助“手选人”在购物时不至于遭受大的损失。
汇汇助手主要有三个功能：1、全网比价，找到最低价。2、显示价格趋势，查询历史价格，避免被不良商家欺骗。3、提供海外产品一键购买服务，轻松完成海外购物。
注：小编也用过这个插件，很方便。但它只是临时使用，因为它会时不时推送广告。我不喜欢它。
类似插件推荐：
1、MySmartPrice 2.0--智能比价插件Chrome插件
2、如意涛：同款比价、价格曲线、降价提醒
4、Square 采集 - 采集一个灵感只需要0.13秒
在信息爆炸的时代，人们接收到的信息越来越碎片化。大多数人无法处理如此复杂的信息。如果他们遇到真正有用的信息，如果不采集和整理，只会让自己更加困惑。Square Piece 采集是一款扩展应用，可以快速采集电脑上的图片、视频和文字，可以帮助你快速采集想法，避免信息丢失。
安装方形采集插件后，只需将内容拖到浏览器侧边栏即可轻松完成采集。在采集后的数据管理方面，方形采集采用分类管理，支持私人采集，但暂时不支持标签。
注：小编还没用过这个方子采集插件，我会及时更新的
类似插件推荐：
1、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。采集拍照也很方便。【我自己用】
2、Evernote Web Clipper：印象笔记推出的剪贴插件，可以一键保存各类网页图片和文字，并永久保存在印象笔记中。同时，您还可以选择保存网页正文、隐藏广告、整页、网页截图等，以便您根据不同需求选择保存内容。告别复制粘贴，高效采集数据！
5、两个盒子——多引擎图片搜索+截图搜索+图片提取
图像识别是一个非常实用的功能。这个功能可以用来达到找一张图片的来源，从一张小图找一张大图的目的。目前，大部分搜索引擎都推出了逐图识别词条。第二个框是多引擎图片搜索插件，集成了谷歌、百度、必应、天眼等主流搜索引擎，同时显示各个引擎的搜索结果，方便你查找您想要的图像更快。第二个框除了可以按图搜索，还可以提取出现在所有页面的图片，包括隐藏在CSS中的图片，方便保存或按图搜索。此外，它还支持提取图片和截图搜索功能。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、Search by Image – 按图快速查找图片的 chrome 插件；
2、百度图像识别——基于百度搜索图像识别插件
6、Copyfish – OCR 扫描网页图像并识别文本
在线浏览PDF，或者边看视频边看字幕，却总是担心无法转成文字？不用担心，Copyfish 可以帮你做到这一点，Copyfish 是一款 Chrome 应用，支持网页 OCR 扫描，识别文字，并能自动翻译，支持中文。Copyfish支持图片、视频、PDF等，点击Chrome扩展栏中的Copyfish按钮后，会出现一个类似截图的箭头，然后选择要扫描的区域，OCR会识别。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、在线 OCR – 在线将 PDF/图像转换为 Word 文档，
2、文通TH-OCR——支持简繁英文的OCR工具
7、Local CDN – 替代加速，让原本的龟速网站飞起来
本地CDN是一个非常好用的Chrome扩展，可以将网页中的第三方js文件劫持到本地，让那些有访问障碍的网站重生，不慢的网站@ > 更快。
基本上现在的网站会加载各种js文件，为了访问更快，网站一起使用同一个js文件会变相减少加载次数，提高速度。本地 CDN 可以找到这些 JS 文件并下载到本地。由于它们是本地文件，因此速度非常快。即使是国内的 网站 JS 文件在本地也不会那么快。
备注：我用了一段时间，后来没再用，具体原因记不清了。
类似插件推荐：
1、gooreplacer - 替换开源库以加速网页浏览，
2、YSlow – 分析和优化您的 网站 性能
8、LastPass – 您的网络密码管理器
出于安全考虑，很多朋友喜欢在不同的网站中注册不同的密码，但这样做会给自己的记忆带来巨大的挑战，而且极易忘记密码。最好将记住密码的任务留给 LastPass。
LastPass 是一个著名的密码存储应用程序。它可以保存网站的登录页面和您的帐户密码。当用户打开对应的网站时，会自动填写账号和密码，甚至实现自动登录。您只需要记住LastPass主密码即可。
备注：一直用着真的很方便。特别适合记不住密码的人。
类似插件推荐：
1、Huami – 易于记忆且安全的密码管理器；
2、1Password – 跨平台密码管理器
写在最后，文章的大部分内容来自作者：秦风0804（简书），小编只是稍作调整和改编。
您可能对以下主题感兴趣： 查看全部
chrome插件网页抓取(管理你的扩展程序、Context–分组管理(组图))
“一键管理扩展”界面令人耳目一新。直接列出你安装的所有扩展，上面的是启用的扩展，下面黑色的是未启用的扩展。如果要停止启用扩展程序，只需找到扩展程序并单击它即可。同样，您可以在它停止运行后单击以恢复它。如果要卸载扩展程序，请右键单击该图标。操作简单，简单实用
类似插件推荐：
1.Extensions Manager : 管理你的扩展，上下文 - 分组管理 Chrome 扩展
2.Chromarks：一个支持书签搜索和管理的chrome插件【强烈推荐，这个编辑器正在使用】
2、抓图 - 一个超级方便的网页截图插件
安装插件后，浏览器地址栏后面会出现一个小S形图标。对于一些需要分享给朋友的网页，但是截图比较麻烦，或者一屏多截图，这个用起来超级方便。
这个插件功能丰富，抓取整个页面，抓取当前可见部分，抓取选中区域等等。保存时可以自由选择保存为PDF，或者图片，还可以将图片分享给朋友。我个人最喜欢的是截取整个网页直接保存为PDF，超级方便！
注意：小编在chrome插件网站上没有找到这个插件，作者的图片上也看不到这个插件的logo。所以不能给你下载链接。
类似插件推荐：
1、WinSnap——小而强大的截图软件，截图快手——截图、评论、分享
2、Awesome Screenshot：一个带有屏幕截图的chrome插件，包括全屏截图、注释和放大镜；编辑图片，保存和分享。
3、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。【我自己用】
3、汇汇购物助手-购物比价实用延伸
为“剁手党”，宇宙不爆，网购不停！每天最重要的就是买买买！而充分利用惠惠购物助手，可以帮助“手选人”在购物时不至于遭受大的损失。
汇汇助手主要有三个功能：1、全网比价，找到最低价。2、显示价格趋势，查询历史价格，避免被不良商家欺骗。3、提供海外产品一键购买服务，轻松完成海外购物。
注：小编也用过这个插件，很方便。但它只是临时使用，因为它会时不时推送广告。我不喜欢它。
类似插件推荐：
1、MySmartPrice 2.0--智能比价插件Chrome插件
2、如意涛：同款比价、价格曲线、降价提醒
4、Square 采集 - 采集一个灵感只需要0.13秒
在信息爆炸的时代，人们接收到的信息越来越碎片化。大多数人无法处理如此复杂的信息。如果他们遇到真正有用的信息，如果不采集和整理，只会让自己更加困惑。Square Piece 采集是一款扩展应用，可以快速采集电脑上的图片、视频和文字，可以帮助你快速采集想法，避免信息丢失。
安装方形采集插件后，只需将内容拖到浏览器侧边栏即可轻松完成采集。在采集后的数据管理方面，方形采集采用分类管理，支持私人采集，但暂时不支持标签。
注：小编还没用过这个方子采集插件，我会及时更新的
类似插件推荐：
1、花瓣网页采集工具：毫不夸张地说，这是小编用过的最好的网页采集和网页截图工具。采集拍照也很方便。【我自己用】
2、Evernote Web Clipper：印象笔记推出的剪贴插件，可以一键保存各类网页图片和文字，并永久保存在印象笔记中。同时，您还可以选择保存网页正文、隐藏广告、整页、网页截图等，以便您根据不同需求选择保存内容。告别复制粘贴，高效采集数据！
5、两个盒子——多引擎图片搜索+截图搜索+图片提取
图像识别是一个非常实用的功能。这个功能可以用来达到找一张图片的来源，从一张小图找一张大图的目的。目前，大部分搜索引擎都推出了逐图识别词条。第二个框是多引擎图片搜索插件，集成了谷歌、百度、必应、天眼等主流搜索引擎，同时显示各个引擎的搜索结果，方便你查找您想要的图像更快。第二个框除了可以按图搜索，还可以提取出现在所有页面的图片，包括隐藏在CSS中的图片，方便保存或按图搜索。此外，它还支持提取图片和截图搜索功能。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、Search by Image – 按图快速查找图片的 chrome 插件；
2、百度图像识别——基于百度搜索图像识别插件
6、Copyfish – OCR 扫描网页图像并识别文本
在线浏览PDF，或者边看视频边看字幕，却总是担心无法转成文字？不用担心，Copyfish 可以帮你做到这一点，Copyfish 是一款 Chrome 应用，支持网页 OCR 扫描，识别文字，并能自动翻译，支持中文。Copyfish支持图片、视频、PDF等，点击Chrome扩展栏中的Copyfish按钮后，会出现一个类似截图的箭头，然后选择要扫描的区域，OCR会识别。
注：小编还没用过这个两盒插件，我会及时更新的
类似插件推荐：
1、在线 OCR – 在线将 PDF/图像转换为 Word 文档，
2、文通TH-OCR——支持简繁英文的OCR工具
7、Local CDN – 替代加速，让原本的龟速网站飞起来
本地CDN是一个非常好用的Chrome扩展，可以将网页中的第三方js文件劫持到本地，让那些有访问障碍的网站重生，不慢的网站@ > 更快。
基本上现在的网站会加载各种js文件，为了访问更快，网站一起使用同一个js文件会变相减少加载次数，提高速度。本地 CDN 可以找到这些 JS 文件并下载到本地。由于它们是本地文件，因此速度非常快。即使是国内的 网站 JS 文件在本地也不会那么快。
备注：我用了一段时间，后来没再用，具体原因记不清了。
类似插件推荐：
1、gooreplacer - 替换开源库以加速网页浏览，
2、YSlow – 分析和优化您的 网站 性能
8、LastPass – 您的网络密码管理器
出于安全考虑，很多朋友喜欢在不同的网站中注册不同的密码，但这样做会给自己的记忆带来巨大的挑战，而且极易忘记密码。最好将记住密码的任务留给 LastPass。
LastPass 是一个著名的密码存储应用程序。它可以保存网站的登录页面和您的帐户密码。当用户打开对应的网站时，会自动填写账号和密码，甚至实现自动登录。您只需要记住LastPass主密码即可。
备注：一直用着真的很方便。特别适合记不住密码的人。
类似插件推荐：
1、Huami – 易于记忆且安全的密码管理器；
2、1Password – 跨平台密码管理器
写在最后，文章的大部分内容来自作者：秦风0804（简书），小编只是稍作调整和改编。
您可能对以下主题感兴趣：
chrome插件网页抓取(如何快速入门HeadlessChrome生态系统，展示从已经数百万网页中学到的经验)
网站优化 • 优采云 发表了文章 • 0 个评论 • 62 次浏览 • 2022-01-06 16:05
chrome插件网页抓取(如何快速入门HeadlessChrome生态系统，展示从已经数百万网页中学到的经验)
翻译：没有两个
Headless Chrome 是 Chrome 浏览器的一种非界面形式。它可以使用Chrome支持的所有功能，无需打开浏览器即可运行程序。与现代浏览器相比，Headless Chrome 可以更方便地测试web应用、获取网站的截图、做爬虫抓取信息等，更贴近浏览器环境。一起来看看作者分享的使用Headless Chrome的网页爬虫体验吧。
PhantomJS 的发展已经停止，Headless Chrome 成为热点关注的焦点。每个人都喜欢它，包括我们。现在，网络爬虫是我们工作的很大一部分，现在我们广泛使用 Headless Chrome。
本文 文章 将告诉您如何快速开始使用 Headless Chrome 生态系统，并展示从抓取数百万个网页中学到的经验。
文章总结：
1. 控制Chrome的库有很多，大家可以根据自己的喜好选择。
2. 使用 Headless Chrome 进行网页抓取非常简单，尤其是在掌握了以下技巧之后。
3. 可以检测到无头浏览器访问者，但没有人可以检测到。
无头镀铬简介
Headless Chrome 基于 Google Chrome 团队开发的 PhantomJS（QtWebKit 核心）。团队表示将专注于该项目的研发，未来将继续维护。
这意味着对于网页抓取和自动化需求，您现在可以体验到 Chrome 的速度和功能，因为它具有世界上最常用的浏览器的特性：支持所有 网站，支持 JS 引擎，以及伟大的开发者工具 API。它是可怕的！
我应该使用哪个工具来控制 Headless Chrome？
市面上确实有很多NodeJS库支持Chrome新的headless模式，每个库都有自己的特点。我们自己的一个是 NickJS。如果你没有自己的爬虫库，你怎么敢说你是网络爬虫专家。
还有一套与社区一起发布的其他语言的库，比如基于GO语言的。我们推荐使用 NodeJS 工具，因为它与 Web 解析语言相同（您将在下面看到它是多么方便）。
网络爬虫？不违法吗？
我们无意挑起无休止的争议，但不到两周前，一位美国地区法官命令第三方抓取 LinkedIn 的公开文件。到目前为止，这只是一项初步法律，诉讼还将继续。LinkedIn肯定会反对，不过放心，我们会密切关注情况，因为这个文章讲了很多关于LinkedIn的内容。
无论如何，作为技术文章，我们不会深入研究具体爬虫操作的合法性。我们应该始终努力尊重目标 网站 的 ToS。并且不会对您在此文章 中了解到的任何损害负责。
到目前为止学到的很酷的东西
下面列出的一些技术，我们几乎每天都在使用。代码示例使用 NickJS 爬网库，但它们可以很容易地被其他 Headless Chrome 工具重写。重要的是分享这个概念。
将饼干放回饼干罐中
使用全功能的浏览器进行爬取，让人安心，不用担心CORS、session、cookies、CSRF等web问题。
但是有时候登录表单会变得很棘手，唯一的解决办法就是恢复之前保存的会话cookie。当检测到故障时，一些网站会发送电子邮件或短信。我们没有时间这样做，我们只是使用已经设置的会话cookie来打开页面。
LinkedIn有一个很好的例子，设置li_atcookie可以保证爬虫访问他们的社交网络（记住：注意尊重目标网站Tos）。
await nick.setCookie({ name: "li_at", value: "a session cookie value copied from your DevTools", domain: "www.linkedin.com" })
我相信像LinkedIn这样的网站不会使用有效的会话cookie来阻止真正的浏览器访问。这是相当危险的，因为错误的信息会触发愤怒用户的大量支持请求。
jQuery 不会让你失望
我们学到的一件重要事情是，通过 jQuery 从网页中提取数据非常容易。回想起来，这是显而易见的。网站 提供了一个高度结构化、可查询的收录数据元素的树（称为 DOM），而 jQuery 是一个非常高效的 DOM 查询库。那么为什么不使用它进行爬行呢？这种技术将被一次又一次地尝试。
很多网站已经用过jQuery了，所以在页面中添加几行就可以获取数据了。
await tab.open("news.ycombinator.com") await tab.untilVisible("#hnmain") // Make sure we have loaded the page await tab.inject("https://code.jquery.com/jquery-3.2.1.min.js") // We're going to use jQuery to scrape const hackerNewsLinks = await tab.evaluate((arg, callback) => { // Here we're in the page context. It's like being in your browser's inspector tool const data = [] $(".athing").each((index, element) => { data.push({ title: $(element).find(".storylink").text(), url: $(element).find(".storylink").attr("href") }) }) callback(null, data) })
印度、俄罗斯和巴基斯坦与屏蔽机器人的做法有什么共同点？
答案是使用验证码来解决服务器验证。几块钱就可以买到上千个验证码，生成一个验证码通常需要不到30秒的时间。但是到了晚上，因为没有人，一般都比较贵。
一个简单的谷歌搜索将提供多个 API 来解决任何类型的验证码问题，包括获取谷歌最新的 recaptcha 验证码（21,000 美元）。
将爬虫机连接到这些服务就像发出一个 HTTP 请求一样简单，现在机器人是一个人。
在我们的平台上，用户可以轻松解决他们需要的验证码问题。我们的 Buster 库可以：
if (await tab.isVisible(".captchaImage")) { // Get the URL of the generated CAPTCHA image // Note that we could also get its -encoded value and solve it too const captchaImageLink = await tab.evaluate((arg, callback) => { callback(null, $(".captchaImage").attr("src")) }) // Make a call to a CAPTCHA solving service const captchaAnswer = await buster.solveCaptchaImage(captchaImageLink) // Fill the form with our solution await tab.fill(".captchaForm", { "captcha-answer": captchaAnswer }, { submit: true }) }
等待DOM元素，不是固定时间
经常看到爬行初学者要求他们的机器人在打开页面或点击按钮后等待 5 到 10 秒——他们想确保他们所做的动作有时间产生效果。
但这不是应该做的。我们的 3 步理论适用于任何爬行场景：您应该等待的是您要操作的特定 DOM 元素。它更快更清晰，如果出现问题，您将获得更准确的错误提示。
await tab.open("https://www.facebook.com/phbus ... 6quot;) // await Promise.delay(5000) // DON'T DO THIS! await tab.waitUntilVisible(".permalinkPost .UFILikeLink") // You can now safely click the "Like" button... await tab.click(".permalinkPost .UFILikeLink")
在某些情况下，可能确实有必要伪造人为延误。可以使用
await Promise.delay(2000 + Math.random() * 3000)
糊弄过去。
MongoDB
我们发现MongoDB非常适合大部分的爬虫工作，它有一套优秀的JS API和Mongoose ORM。考虑到你在使用 Headless Chrome 时已经在 NodeJS 环境中了，为什么不采用呢？
JSON-LD 和微数据开发
有时网络爬虫不需要了解DOM，而是要找到正确的“导出”按钮。记住这一点可以节省很多时间。
严格来说，有些网站会比其他网站容易。例如，他们所有的产品页面都以 JSON-LD 产品数据的形式显示在 DOM 中。您可以与他们的任何产品页面交谈，然后运行
JSON.parse(document . queryselector(" # productSEOData "). innertext)
你会得到一个非常好的数据对象，可以插入到MongoDB中，不需要真正的爬取！
网络请求拦截
因为使用的是DevTools API，所以编写的代码具有使用Chrome的DevTools的等效功能。这意味着生成的机器人可以拦截、检查甚至修改或中止任何网络请求。
通过从LinkedIn下载PDF格式的简历来测试网络请求拦截。点击配置文件中的“Save to PDF”按钮，触发XHR，响应内容为PDF文件，是一种截取文件写入磁盘的方法。
let cvRequestId = null tab.driver.client.Network.responseReceived((e) => { if (e.type === "XHR" && e.response.url.indexOf("profile-profilePdf/") > 0) { cvRequestId = e.requestId } }) tab.driver.client.Network.loadingFinished((e) => { if (e.requestId === cvRequestId) { tab.driver.client.Network.getResponseBody({ requestId: cvRequestId }, (err, cv) => { require("fs").writeFileSync("linkedin-cv.pdf", Buffer.from(cv.body, (cv.Encoded ? '' : 'utf8'))) }) } })
值得一提的是，DevTools 协议发展很快，现在有一种方法可以使用 Page.setDownloadBehavior() 来设置下载传入文件的方法和路径。我们还没有测试它，但它看起来很有希望！
广告拦截
const nick = new Nick({ loadImages: false, whitelist: [ /.*\.aspx/, /.*axd.*/, /.*\.html.*/, /.*\.js.*/ ], blacklist: [ /.*fsispin360\.js/, /.*fsitouchzoom\.js/, /.*\.ashx.*/, /.*google.*/ ] })
还可以通过阻止不必要的请求来加速爬行。分析、广告和图像是典型的阻塞目标。但是，请记住，这会使机器人变得不那么像人（例如，如果所有图片都被屏蔽了，LinkedIn 将无法正确响应页面请求——不确定这是不是故意的）。
在 NickJS 中，用户可以指定收录正则表达式或字符串的白名单和黑名单。白名单特别强大，但是一不小心，很容易让目标网站崩溃。
DevTools 协议还有 Network.setBlockedURLs()，它使用带有通配符的字符串数组作为输入。
更重要的是，新版Chrome会自带谷歌自己的“广告拦截器”——它更像是一个广告“过滤器”。该协议已经有一个名为 Page.setAdBlockingEnabled() 的端点。
这就是我们正在谈论的技术！
无头 Chrome 检测
最近发表的一篇文章文章列举了多种检测Headless Chrome访问者的方法，也可以检测PhantomJS。这些方法描述了基本的 User-Agent 字符串与更复杂的技术（例如触发错误和检查堆栈跟踪）的比较。
在愤怒的管理员和聪明的机器人制造者之间，这基本上是猫捉老鼠游戏的放大版。但我从未见过这些方法正式实施。检测自动访问者在技术上是可能的，但谁愿意面对潜在的错误消息？这对于大型 网站 来说尤其危险。
如果你知道那些网站有这些检测功能，请告诉我们！
结束语
爬行从未如此简单。借助我们最新的工具和技术，它甚至可以成为我们开发人员的一项愉快而有趣的活动。
顺便说一句，我们受到了 Franciskim.co “我不需要一个臭 API”的启发 文章，非常感谢！此外，有关如何开始使用 Puppets 的详细说明，请单击此处。
在下一篇文章中，我会写一些“bot缓解”工具，比如Distill Networks，聊聊HTTP代理和IP地址分配的奇妙世界。
网络上有一个我们的抓取和自动化平台库。如果你有兴趣，还可以了解一下我们3个爬行步骤的理论信息。 查看全部
翻译：没有两个
Headless Chrome 是 Chrome 浏览器的一种非界面形式。它可以使用Chrome支持的所有功能，无需打开浏览器即可运行程序。与现代浏览器相比，Headless Chrome 可以更方便地测试web应用、获取网站的截图、做爬虫抓取信息等，更贴近浏览器环境。一起来看看作者分享的使用Headless Chrome的网页爬虫体验吧。
PhantomJS 的发展已经停止，Headless Chrome 成为热点关注的焦点。每个人都喜欢它，包括我们。现在，网络爬虫是我们工作的很大一部分，现在我们广泛使用 Headless Chrome。
本文 文章 将告诉您如何快速开始使用 Headless Chrome 生态系统，并展示从抓取数百万个网页中学到的经验。
文章总结：
1. 控制Chrome的库有很多，大家可以根据自己的喜好选择。
2. 使用 Headless Chrome 进行网页抓取非常简单，尤其是在掌握了以下技巧之后。
3. 可以检测到无头浏览器访问者，但没有人可以检测到。
无头镀铬简介
Headless Chrome 基于 Google Chrome 团队开发的 PhantomJS（QtWebKit 核心）。团队表示将专注于该项目的研发，未来将继续维护。
这意味着对于网页抓取和自动化需求，您现在可以体验到 Chrome 的速度和功能，因为它具有世界上最常用的浏览器的特性：支持所有 网站，支持 JS 引擎，以及伟大的开发者工具 API。它是可怕的！
我应该使用哪个工具来控制 Headless Chrome？
市面上确实有很多NodeJS库支持Chrome新的headless模式，每个库都有自己的特点。我们自己的一个是 NickJS。如果你没有自己的爬虫库，你怎么敢说你是网络爬虫专家。
还有一套与社区一起发布的其他语言的库，比如基于GO语言的。我们推荐使用 NodeJS 工具，因为它与 Web 解析语言相同（您将在下面看到它是多么方便）。
网络爬虫？不违法吗？
我们无意挑起无休止的争议，但不到两周前，一位美国地区法官命令第三方抓取 LinkedIn 的公开文件。到目前为止，这只是一项初步法律，诉讼还将继续。LinkedIn肯定会反对，不过放心，我们会密切关注情况，因为这个文章讲了很多关于LinkedIn的内容。
无论如何，作为技术文章，我们不会深入研究具体爬虫操作的合法性。我们应该始终努力尊重目标 网站 的 ToS。并且不会对您在此文章 中了解到的任何损害负责。
到目前为止学到的很酷的东西
下面列出的一些技术，我们几乎每天都在使用。代码示例使用 NickJS 爬网库，但它们可以很容易地被其他 Headless Chrome 工具重写。重要的是分享这个概念。
将饼干放回饼干罐中
使用全功能的浏览器进行爬取，让人安心，不用担心CORS、session、cookies、CSRF等web问题。
但是有时候登录表单会变得很棘手，唯一的解决办法就是恢复之前保存的会话cookie。当检测到故障时，一些网站会发送电子邮件或短信。我们没有时间这样做，我们只是使用已经设置的会话cookie来打开页面。
LinkedIn有一个很好的例子，设置li_atcookie可以保证爬虫访问他们的社交网络（记住：注意尊重目标网站Tos）。
await nick.setCookie({ name: "li_at", value: "a session cookie value copied from your DevTools", domain: "www.linkedin.com" })
我相信像LinkedIn这样的网站不会使用有效的会话cookie来阻止真正的浏览器访问。这是相当危险的，因为错误的信息会触发愤怒用户的大量支持请求。
jQuery 不会让你失望
我们学到的一件重要事情是，通过 jQuery 从网页中提取数据非常容易。回想起来，这是显而易见的。网站 提供了一个高度结构化、可查询的收录数据元素的树（称为 DOM），而 jQuery 是一个非常高效的 DOM 查询库。那么为什么不使用它进行爬行呢？这种技术将被一次又一次地尝试。
很多网站已经用过jQuery了，所以在页面中添加几行就可以获取数据了。
await tab.open("news.ycombinator.com") await tab.untilVisible("#hnmain") // Make sure we have loaded the page await tab.inject("https://code.jquery.com/jquery-3.2.1.min.js") // We're going to use jQuery to scrape const hackerNewsLinks = await tab.evaluate((arg, callback) => { // Here we're in the page context. It's like being in your browser's inspector tool const data = [] $(".athing").each((index, element) => { data.push({ title: $(element).find(".storylink").text(), url: $(element).find(".storylink").attr("href") }) }) callback(null, data) })
印度、俄罗斯和巴基斯坦与屏蔽机器人的做法有什么共同点？
答案是使用验证码来解决服务器验证。几块钱就可以买到上千个验证码，生成一个验证码通常需要不到30秒的时间。但是到了晚上，因为没有人，一般都比较贵。
一个简单的谷歌搜索将提供多个 API 来解决任何类型的验证码问题，包括获取谷歌最新的 recaptcha 验证码（21,000 美元）。
将爬虫机连接到这些服务就像发出一个 HTTP 请求一样简单，现在机器人是一个人。
在我们的平台上，用户可以轻松解决他们需要的验证码问题。我们的 Buster 库可以：
if (await tab.isVisible(".captchaImage")) { // Get the URL of the generated CAPTCHA image // Note that we could also get its -encoded value and solve it too const captchaImageLink = await tab.evaluate((arg, callback) => { callback(null, $(".captchaImage").attr("src")) }) // Make a call to a CAPTCHA solving service const captchaAnswer = await buster.solveCaptchaImage(captchaImageLink) // Fill the form with our solution await tab.fill(".captchaForm", { "captcha-answer": captchaAnswer }, { submit: true }) }
等待DOM元素，不是固定时间
经常看到爬行初学者要求他们的机器人在打开页面或点击按钮后等待 5 到 10 秒——他们想确保他们所做的动作有时间产生效果。
但这不是应该做的。我们的 3 步理论适用于任何爬行场景：您应该等待的是您要操作的特定 DOM 元素。它更快更清晰，如果出现问题，您将获得更准确的错误提示。
await tab.open("https://www.facebook.com/phbus ... 6quot;) // await Promise.delay(5000) // DON'T DO THIS! await tab.waitUntilVisible(".permalinkPost .UFILikeLink") // You can now safely click the "Like" button... await tab.click(".permalinkPost .UFILikeLink")
在某些情况下，可能确实有必要伪造人为延误。可以使用
await Promise.delay(2000 + Math.random() * 3000)
糊弄过去。
MongoDB
我们发现MongoDB非常适合大部分的爬虫工作，它有一套优秀的JS API和Mongoose ORM。考虑到你在使用 Headless Chrome 时已经在 NodeJS 环境中了，为什么不采用呢？
JSON-LD 和微数据开发
有时网络爬虫不需要了解DOM，而是要找到正确的“导出”按钮。记住这一点可以节省很多时间。
严格来说，有些网站会比其他网站容易。例如，他们所有的产品页面都以 JSON-LD 产品数据的形式显示在 DOM 中。您可以与他们的任何产品页面交谈，然后运行
JSON.parse(document . queryselector(" # productSEOData "). innertext)
你会得到一个非常好的数据对象，可以插入到MongoDB中，不需要真正的爬取！
网络请求拦截
因为使用的是DevTools API，所以编写的代码具有使用Chrome的DevTools的等效功能。这意味着生成的机器人可以拦截、检查甚至修改或中止任何网络请求。
通过从LinkedIn下载PDF格式的简历来测试网络请求拦截。点击配置文件中的“Save to PDF”按钮，触发XHR，响应内容为PDF文件，是一种截取文件写入磁盘的方法。
let cvRequestId = null tab.driver.client.Network.responseReceived((e) => { if (e.type === "XHR" && e.response.url.indexOf("profile-profilePdf/") > 0) { cvRequestId = e.requestId } }) tab.driver.client.Network.loadingFinished((e) => { if (e.requestId === cvRequestId) { tab.driver.client.Network.getResponseBody({ requestId: cvRequestId }, (err, cv) => { require("fs").writeFileSync("linkedin-cv.pdf", Buffer.from(cv.body, (cv.Encoded ? '' : 'utf8'))) }) } })
值得一提的是，DevTools 协议发展很快，现在有一种方法可以使用 Page.setDownloadBehavior() 来设置下载传入文件的方法和路径。我们还没有测试它，但它看起来很有希望！
广告拦截
const nick = new Nick({ loadImages: false, whitelist: [ /.*\.aspx/, /.*axd.*/, /.*\.html.*/, /.*\.js.*/ ], blacklist: [ /.*fsispin360\.js/, /.*fsitouchzoom\.js/, /.*\.ashx.*/, /.*google.*/ ] })
还可以通过阻止不必要的请求来加速爬行。分析、广告和图像是典型的阻塞目标。但是，请记住，这会使机器人变得不那么像人（例如，如果所有图片都被屏蔽了，LinkedIn 将无法正确响应页面请求——不确定这是不是故意的）。
在 NickJS 中，用户可以指定收录正则表达式或字符串的白名单和黑名单。白名单特别强大，但是一不小心，很容易让目标网站崩溃。
DevTools 协议还有 Network.setBlockedURLs()，它使用带有通配符的字符串数组作为输入。
更重要的是，新版Chrome会自带谷歌自己的“广告拦截器”——它更像是一个广告“过滤器”。该协议已经有一个名为 Page.setAdBlockingEnabled() 的端点。
这就是我们正在谈论的技术！
无头 Chrome 检测
最近发表的一篇文章文章列举了多种检测Headless Chrome访问者的方法，也可以检测PhantomJS。这些方法描述了基本的 User-Agent 字符串与更复杂的技术（例如触发错误和检查堆栈跟踪）的比较。
在愤怒的管理员和聪明的机器人制造者之间，这基本上是猫捉老鼠游戏的放大版。但我从未见过这些方法正式实施。检测自动访问者在技术上是可能的，但谁愿意面对潜在的错误消息？这对于大型 网站 来说尤其危险。
如果你知道那些网站有这些检测功能，请告诉我们！
结束语
爬行从未如此简单。借助我们最新的工具和技术，它甚至可以成为我们开发人员的一项愉快而有趣的活动。
顺便说一句，我们受到了 Franciskim.co “我不需要一个臭 API”的启发 文章，非常感谢！此外，有关如何开始使用 Puppets 的详细说明，请单击此处。
在下一篇文章中，我会写一些“bot缓解”工具，比如Distill Networks，聊聊HTTP代理和IP地址分配的奇妙世界。
网络上有一个我们的抓取和自动化平台库。如果你有兴趣，还可以了解一下我们3个爬行步骤的理论信息。 查看全部
chrome插件网页抓取(如何快速入门HeadlessChrome生态系统，展示从已经数百万网页中学到的经验)
翻译：没有两个
Headless Chrome 是 Chrome 浏览器的一种非界面形式。它可以使用Chrome支持的所有功能，无需打开浏览器即可运行程序。与现代浏览器相比，Headless Chrome 可以更方便地测试web应用、获取网站的截图、做爬虫抓取信息等，更贴近浏览器环境。一起来看看作者分享的使用Headless Chrome的网页爬虫体验吧。
PhantomJS 的发展已经停止，Headless Chrome 成为热点关注的焦点。每个人都喜欢它，包括我们。现在，网络爬虫是我们工作的很大一部分，现在我们广泛使用 Headless Chrome。
本文 文章 将告诉您如何快速开始使用 Headless Chrome 生态系统，并展示从抓取数百万个网页中学到的经验。
文章总结：
1. 控制Chrome的库有很多，大家可以根据自己的喜好选择。
2. 使用 Headless Chrome 进行网页抓取非常简单，尤其是在掌握了以下技巧之后。
3. 可以检测到无头浏览器访问者，但没有人可以检测到。
无头镀铬简介
Headless Chrome 基于 Google Chrome 团队开发的 PhantomJS（QtWebKit 核心）。团队表示将专注于该项目的研发，未来将继续维护。
这意味着对于网页抓取和自动化需求，您现在可以体验到 Chrome 的速度和功能，因为它具有世界上最常用的浏览器的特性：支持所有 网站，支持 JS 引擎，以及伟大的开发者工具 API。它是可怕的！
我应该使用哪个工具来控制 Headless Chrome？
市面上确实有很多NodeJS库支持Chrome新的headless模式，每个库都有自己的特点。我们自己的一个是 NickJS。如果你没有自己的爬虫库，你怎么敢说你是网络爬虫专家。
还有一套与社区一起发布的其他语言的库，比如基于GO语言的。我们推荐使用 NodeJS 工具，因为它与 Web 解析语言相同（您将在下面看到它是多么方便）。
网络爬虫？不违法吗？
我们无意挑起无休止的争议，但不到两周前，一位美国地区法官命令第三方抓取 LinkedIn 的公开文件。到目前为止，这只是一项初步法律，诉讼还将继续。LinkedIn肯定会反对，不过放心，我们会密切关注情况，因为这个文章讲了很多关于LinkedIn的内容。
无论如何，作为技术文章，我们不会深入研究具体爬虫操作的合法性。我们应该始终努力尊重目标 网站 的 ToS。并且不会对您在此文章 中了解到的任何损害负责。
到目前为止学到的很酷的东西
下面列出的一些技术，我们几乎每天都在使用。代码示例使用 NickJS 爬网库，但它们可以很容易地被其他 Headless Chrome 工具重写。重要的是分享这个概念。
将饼干放回饼干罐中
使用全功能的浏览器进行爬取，让人安心，不用担心CORS、session、cookies、CSRF等web问题。
但是有时候登录表单会变得很棘手，唯一的解决办法就是恢复之前保存的会话cookie。当检测到故障时，一些网站会发送电子邮件或短信。我们没有时间这样做，我们只是使用已经设置的会话cookie来打开页面。
LinkedIn有一个很好的例子，设置li_atcookie可以保证爬虫访问他们的社交网络（记住：注意尊重目标网站Tos）。
await nick.setCookie({ name: "li_at", value: "a session cookie value copied from your DevTools", domain: "www.linkedin.com" })
我相信像LinkedIn这样的网站不会使用有效的会话cookie来阻止真正的浏览器访问。这是相当危险的，因为错误的信息会触发愤怒用户的大量支持请求。
jQuery 不会让你失望
我们学到的一件重要事情是，通过 jQuery 从网页中提取数据非常容易。回想起来，这是显而易见的。网站 提供了一个高度结构化、可查询的收录数据元素的树（称为 DOM），而 jQuery 是一个非常高效的 DOM 查询库。那么为什么不使用它进行爬行呢？这种技术将被一次又一次地尝试。
很多网站已经用过jQuery了，所以在页面中添加几行就可以获取数据了。
await tab.open("news.ycombinator.com") await tab.untilVisible("#hnmain") // Make sure we have loaded the page await tab.inject("https://code.jquery.com/jquery-3.2.1.min.js";) // We're going to use jQuery to scrape const hackerNewsLinks = await tab.evaluate((arg, callback) => { // Here we're in the page context. It's like being in your browser's inspector tool const data = [] $(".athing").each((index, element) => { data.push({ title: $(element).find(".storylink").text(), url: $(element).find(".storylink").attr("href") }) }) callback(null, data) })
印度、俄罗斯和巴基斯坦与屏蔽机器人的做法有什么共同点？
答案是使用验证码来解决服务器验证。几块钱就可以买到上千个验证码，生成一个验证码通常需要不到30秒的时间。但是到了晚上，因为没有人，一般都比较贵。
一个简单的谷歌搜索将提供多个 API 来解决任何类型的验证码问题，包括获取谷歌最新的 recaptcha 验证码（21,000 美元）。
将爬虫机连接到这些服务就像发出一个 HTTP 请求一样简单，现在机器人是一个人。
在我们的平台上，用户可以轻松解决他们需要的验证码问题。我们的 Buster 库可以：
if (await tab.isVisible(".captchaImage")) { // Get the URL of the generated CAPTCHA image // Note that we could also get its -encoded value and solve it too const captchaImageLink = await tab.evaluate((arg, callback) => { callback(null, $(".captchaImage").attr("src")) }) // Make a call to a CAPTCHA solving service const captchaAnswer = await buster.solveCaptchaImage(captchaImageLink) // Fill the form with our solution await tab.fill(".captchaForm", { "captcha-answer": captchaAnswer }, { submit: true }) }
等待DOM元素，不是固定时间
经常看到爬行初学者要求他们的机器人在打开页面或点击按钮后等待 5 到 10 秒——他们想确保他们所做的动作有时间产生效果。
但这不是应该做的。我们的 3 步理论适用于任何爬行场景：您应该等待的是您要操作的特定 DOM 元素。它更快更清晰，如果出现问题，您将获得更准确的错误提示。
await tab.open("https://www.facebook.com/phbus ... 6quot;) // await Promise.delay(5000) // DON'T DO THIS! await tab.waitUntilVisible(".permalinkPost .UFILikeLink") // You can now safely click the "Like" button... await tab.click(".permalinkPost .UFILikeLink")
在某些情况下，可能确实有必要伪造人为延误。可以使用
await Promise.delay(2000 + Math.random() * 3000)
糊弄过去。
MongoDB
我们发现MongoDB非常适合大部分的爬虫工作，它有一套优秀的JS API和Mongoose ORM。考虑到你在使用 Headless Chrome 时已经在 NodeJS 环境中了，为什么不采用呢？
JSON-LD 和微数据开发
有时网络爬虫不需要了解DOM，而是要找到正确的“导出”按钮。记住这一点可以节省很多时间。
严格来说，有些网站会比其他网站容易。例如，他们所有的产品页面都以 JSON-LD 产品数据的形式显示在 DOM 中。您可以与他们的任何产品页面交谈，然后运行
JSON.parse(document . queryselector(" # productSEOData "). innertext)
你会得到一个非常好的数据对象，可以插入到MongoDB中，不需要真正的爬取！
网络请求拦截
因为使用的是DevTools API，所以编写的代码具有使用Chrome的DevTools的等效功能。这意味着生成的机器人可以拦截、检查甚至修改或中止任何网络请求。
通过从LinkedIn下载PDF格式的简历来测试网络请求拦截。点击配置文件中的“Save to PDF”按钮，触发XHR，响应内容为PDF文件，是一种截取文件写入磁盘的方法。
let cvRequestId = null tab.driver.client.Network.responseReceived((e) => { if (e.type === "XHR" && e.response.url.indexOf("profile-profilePdf/") > 0) { cvRequestId = e.requestId } }) tab.driver.client.Network.loadingFinished((e) => { if (e.requestId === cvRequestId) { tab.driver.client.Network.getResponseBody({ requestId: cvRequestId }, (err, cv) => { require("fs").writeFileSync("linkedin-cv.pdf", Buffer.from(cv.body, (cv.Encoded ? '' : 'utf8'))) }) } })
值得一提的是，DevTools 协议发展很快，现在有一种方法可以使用 Page.setDownloadBehavior() 来设置下载传入文件的方法和路径。我们还没有测试它，但它看起来很有希望！
广告拦截
const nick = new Nick({ loadImages: false, whitelist: [ /.*\.aspx/, /.*axd.*/, /.*\.html.*/, /.*\.js.*/ ], blacklist: [ /.*fsispin360\.js/, /.*fsitouchzoom\.js/, /.*\.ashx.*/, /.*google.*/ ] })
还可以通过阻止不必要的请求来加速爬行。分析、广告和图像是典型的阻塞目标。但是，请记住，这会使机器人变得不那么像人（例如，如果所有图片都被屏蔽了，LinkedIn 将无法正确响应页面请求——不确定这是不是故意的）。
在 NickJS 中，用户可以指定收录正则表达式或字符串的白名单和黑名单。白名单特别强大，但是一不小心，很容易让目标网站崩溃。
DevTools 协议还有 Network.setBlockedURLs()，它使用带有通配符的字符串数组作为输入。
更重要的是，新版Chrome会自带谷歌自己的“广告拦截器”——它更像是一个广告“过滤器”。该协议已经有一个名为 Page.setAdBlockingEnabled() 的端点。
这就是我们正在谈论的技术！
无头 Chrome 检测
最近发表的一篇文章文章列举了多种检测Headless Chrome访问者的方法，也可以检测PhantomJS。这些方法描述了基本的 User-Agent 字符串与更复杂的技术（例如触发错误和检查堆栈跟踪）的比较。
在愤怒的管理员和聪明的机器人制造者之间，这基本上是猫捉老鼠游戏的放大版。但我从未见过这些方法正式实施。检测自动访问者在技术上是可能的，但谁愿意面对潜在的错误消息？这对于大型 网站 来说尤其危险。
如果你知道那些网站有这些检测功能，请告诉我们！
结束语
爬行从未如此简单。借助我们最新的工具和技术，它甚至可以成为我们开发人员的一项愉快而有趣的活动。
顺便说一句，我们受到了 Franciskim.co “我不需要一个臭 API”的启发 文章，非常感谢！此外，有关如何开始使用 Puppets 的详细说明，请单击此处。
在下一篇文章中，我会写一些“bot缓解”工具，比如Distill Networks，聊聊HTTP代理和IP地址分配的奇妙世界。
网络上有一个我们的抓取和自动化平台库。如果你有兴趣，还可以了解一下我们3个爬行步骤的理论信息。
chrome插件网页抓取(想从Facebook获取电子邮件地址就需要一些工具和技巧？)
网站优化 • 优采云 发表了文章 • 0 个评论 • 53 次浏览 • 2022-01-06 11:14
chrome插件网页抓取(想从Facebook获取电子邮件地址就需要一些工具和技巧？)
要从 Facebook 获取电子邮件地址，需要一些工具和技能。这里有几个选项供大家选择：
选项 1：电子邮件提取器
Email Extractor 是 Google Chrome 浏览器的插件。它可以帮助您在打开的任何网页上找到您的邮箱。
首先，将其添加到 Google Chrome 浏览器。然后访问您想要抓取的任何 Facebook 页面或 Facebook 群组。Facebook 不会一次加载大量内容，您需要向下滚动。这样，Email Extractor 可以识别和提取更多邮箱。以 Facebook 群组为例：
提示：帖子未展开的部分将无法识别。
您也可以在公共主页和个人联系信息页面上抓取邮箱（如果显示）。
选项 2：电子邮件导出器
要引入的第二个选项是电子邮件导出器。这是另一个以相同方式执行基本相同操作的 Chrome 扩展程序。安装后，访问目标页面并滚动浏览您要抓取的任何组或页面，直到您觉得采集了足够的信息。
电子邮件提取器和电子邮件导出器之间没有太大区别。主要区别在于Exporter可以获取电话号码，也更方便您导出和保存。
选项 3：电子邮件猎人
第三个 Chrome 扩展。就像上面两个一样，当一个收录公共数据的页面被打开时，该数据将被抓取。它与上面两个非常相似。说实话，这三个插件没有明显区别，大家可以根据使用效果来选择。它们都是免费的且使用起来非常方便，这就是我们建议您使用 Google 扩展程序的原因。
提示：所有电子邮件标签通常可以帮助您找到更多邮箱。
值得一提的是，使用所有这些插件，您只能找到页面上可见的电子邮件地址。许多人的电子邮件地址与 Facebook 页面相关联，但隐私设置被关闭，在这种情况下，无法抓取它们。
除了我们介绍的三个之外，至少还有十几种适合Chrome的爬虫。您也可以自己尝试其他选项。
选项 4：原子公园
Atom Park Atomic Email Hunter 是另一种电子邮件抓取工具。它不是 Chrome 扩展程序，而是一个独立的软件。
它相对容易使用。启动程序并转到“搜索”菜单。从那里，它会询问您要搜索的位置，输入要抓取的组或页面的 URL，进行一些必要的设置，然后就可以运行了！
与之前的工具不同，Atom Park 会在可能的情况下将电子邮件地址、地址来源和用户名相互关联。这样，您就可以知道自己的电子邮件地址是从哪里获得的，而不仅仅是一个没有名称或标签的列表。
这个软件不是免费的。Atomic Email Hunter 是一款售价 80 美元的软件。您可以在他们的 网站 上免费下载，但试用版的功能有限。
你会发现Facebook上的群组是一个收获邮箱的好地方，所以我们应该尽量加入尽可能多的行业相关群组。此外，这些工具不仅适用于 Facebook、LinkedIn 和任何网页。
选项 5：Gmail 电子邮件提取器（非 Facebook 提取工具）
Gmail Email Extractor 是一个 Google 电子表格插件，用于 Google Sheets。此扩展程序允许您从 G Suite 和 Gmail 帐户中检索电子邮件地址。它将提取的信息保存在 Google 电子表格中。
该工具还允许您选择提取邮箱的条件，例如“发件人”、“抄送”、“密件抄送”和“回复”部分，并且可以将邮件列表导出为 TXT 或 CSV。
如果您的 Gmail 联系人列表很大，这个工具会非常有用。它可以帮助您从帐户中提取电子邮件地址并节省大量时间。
提示：虽然本文将介绍直接获取邮件的方法，但我强烈建议大家不要抓取大量陌生邮件，然后发送未经授权的开发信。这几乎是垃圾邮件的定义。我们应该尽量在发送邮件之前获得用户的许可，否则很容易被黑客入侵。或者您可以使用这些工具作为辅助 查看全部
要从 Facebook 获取电子邮件地址，需要一些工具和技能。这里有几个选项供大家选择：
选项 1：电子邮件提取器
Email Extractor 是 Google Chrome 浏览器的插件。它可以帮助您在打开的任何网页上找到您的邮箱。
首先，将其添加到 Google Chrome 浏览器。然后访问您想要抓取的任何 Facebook 页面或 Facebook 群组。Facebook 不会一次加载大量内容，您需要向下滚动。这样，Email Extractor 可以识别和提取更多邮箱。以 Facebook 群组为例：
提示：帖子未展开的部分将无法识别。
您也可以在公共主页和个人联系信息页面上抓取邮箱（如果显示）。
选项 2：电子邮件导出器
要引入的第二个选项是电子邮件导出器。这是另一个以相同方式执行基本相同操作的 Chrome 扩展程序。安装后，访问目标页面并滚动浏览您要抓取的任何组或页面，直到您觉得采集了足够的信息。
电子邮件提取器和电子邮件导出器之间没有太大区别。主要区别在于Exporter可以获取电话号码，也更方便您导出和保存。
选项 3：电子邮件猎人
第三个 Chrome 扩展。就像上面两个一样，当一个收录公共数据的页面被打开时，该数据将被抓取。它与上面两个非常相似。说实话，这三个插件没有明显区别，大家可以根据使用效果来选择。它们都是免费的且使用起来非常方便，这就是我们建议您使用 Google 扩展程序的原因。
提示：所有电子邮件标签通常可以帮助您找到更多邮箱。
值得一提的是，使用所有这些插件，您只能找到页面上可见的电子邮件地址。许多人的电子邮件地址与 Facebook 页面相关联，但隐私设置被关闭，在这种情况下，无法抓取它们。
除了我们介绍的三个之外，至少还有十几种适合Chrome的爬虫。您也可以自己尝试其他选项。
选项 4：原子公园
Atom Park Atomic Email Hunter 是另一种电子邮件抓取工具。它不是 Chrome 扩展程序，而是一个独立的软件。
它相对容易使用。启动程序并转到“搜索”菜单。从那里，它会询问您要搜索的位置，输入要抓取的组或页面的 URL，进行一些必要的设置，然后就可以运行了！
与之前的工具不同，Atom Park 会在可能的情况下将电子邮件地址、地址来源和用户名相互关联。这样，您就可以知道自己的电子邮件地址是从哪里获得的，而不仅仅是一个没有名称或标签的列表。
这个软件不是免费的。Atomic Email Hunter 是一款售价 80 美元的软件。您可以在他们的 网站 上免费下载，但试用版的功能有限。
你会发现Facebook上的群组是一个收获邮箱的好地方，所以我们应该尽量加入尽可能多的行业相关群组。此外，这些工具不仅适用于 Facebook、LinkedIn 和任何网页。
选项 5：Gmail 电子邮件提取器（非 Facebook 提取工具）
Gmail Email Extractor 是一个 Google 电子表格插件，用于 Google Sheets。此扩展程序允许您从 G Suite 和 Gmail 帐户中检索电子邮件地址。它将提取的信息保存在 Google 电子表格中。
该工具还允许您选择提取邮箱的条件，例如“发件人”、“抄送”、“密件抄送”和“回复”部分，并且可以将邮件列表导出为 TXT 或 CSV。
如果您的 Gmail 联系人列表很大，这个工具会非常有用。它可以帮助您从帐户中提取电子邮件地址并节省大量时间。
提示：虽然本文将介绍直接获取邮件的方法，但我强烈建议大家不要抓取大量陌生邮件，然后发送未经授权的开发信。这几乎是垃圾邮件的定义。我们应该尽量在发送邮件之前获得用户的许可，否则很容易被黑客入侵。或者您可以使用这些工具作为辅助 查看全部
chrome插件网页抓取(想从Facebook获取电子邮件地址就需要一些工具和技巧？)
要从 Facebook 获取电子邮件地址，需要一些工具和技能。这里有几个选项供大家选择：
选项 1：电子邮件提取器
Email Extractor 是 Google Chrome 浏览器的插件。它可以帮助您在打开的任何网页上找到您的邮箱。
首先，将其添加到 Google Chrome 浏览器。然后访问您想要抓取的任何 Facebook 页面或 Facebook 群组。Facebook 不会一次加载大量内容，您需要向下滚动。这样，Email Extractor 可以识别和提取更多邮箱。以 Facebook 群组为例：
提示：帖子未展开的部分将无法识别。
您也可以在公共主页和个人联系信息页面上抓取邮箱（如果显示）。
选项 2：电子邮件导出器
要引入的第二个选项是电子邮件导出器。这是另一个以相同方式执行基本相同操作的 Chrome 扩展程序。安装后，访问目标页面并滚动浏览您要抓取的任何组或页面，直到您觉得采集了足够的信息。
电子邮件提取器和电子邮件导出器之间没有太大区别。主要区别在于Exporter可以获取电话号码，也更方便您导出和保存。
选项 3：电子邮件猎人
第三个 Chrome 扩展。就像上面两个一样，当一个收录公共数据的页面被打开时，该数据将被抓取。它与上面两个非常相似。说实话，这三个插件没有明显区别，大家可以根据使用效果来选择。它们都是免费的且使用起来非常方便，这就是我们建议您使用 Google 扩展程序的原因。
提示：所有电子邮件标签通常可以帮助您找到更多邮箱。
值得一提的是，使用所有这些插件，您只能找到页面上可见的电子邮件地址。许多人的电子邮件地址与 Facebook 页面相关联，但隐私设置被关闭，在这种情况下，无法抓取它们。
除了我们介绍的三个之外，至少还有十几种适合Chrome的爬虫。您也可以自己尝试其他选项。
选项 4：原子公园
Atom Park Atomic Email Hunter 是另一种电子邮件抓取工具。它不是 Chrome 扩展程序，而是一个独立的软件。
它相对容易使用。启动程序并转到“搜索”菜单。从那里，它会询问您要搜索的位置，输入要抓取的组或页面的 URL，进行一些必要的设置，然后就可以运行了！
与之前的工具不同，Atom Park 会在可能的情况下将电子邮件地址、地址来源和用户名相互关联。这样，您就可以知道自己的电子邮件地址是从哪里获得的，而不仅仅是一个没有名称或标签的列表。
这个软件不是免费的。Atomic Email Hunter 是一款售价 80 美元的软件。您可以在他们的 网站 上免费下载，但试用版的功能有限。
你会发现Facebook上的群组是一个收获邮箱的好地方，所以我们应该尽量加入尽可能多的行业相关群组。此外，这些工具不仅适用于 Facebook、LinkedIn 和任何网页。
选项 5：Gmail 电子邮件提取器（非 Facebook 提取工具）
Gmail Email Extractor 是一个 Google 电子表格插件，用于 Google Sheets。此扩展程序允许您从 G Suite 和 Gmail 帐户中检索电子邮件地址。它将提取的信息保存在 Google 电子表格中。
该工具还允许您选择提取邮箱的条件，例如“发件人”、“抄送”、“密件抄送”和“回复”部分，并且可以将邮件列表导出为 TXT 或 CSV。
如果您的 Gmail 联系人列表很大，这个工具会非常有用。它可以帮助您从帐户中提取电子邮件地址并节省大量时间。
提示：虽然本文将介绍直接获取邮件的方法，但我强烈建议大家不要抓取大量陌生邮件，然后发送未经授权的开发信。这几乎是垃圾邮件的定义。我们应该尽量在发送邮件之前获得用户的许可，否则很容易被黑客入侵。或者您可以使用这些工具作为辅助
chrome插件网页抓取(5款超好用的设计师必备chrome插件，全部免费下载！)
网站优化 • 优采云 发表了文章 • 0 个评论 • 60 次浏览 • 2022-01-05 21:11
chrome插件网页抓取(5款超好用的设计师必备chrome插件，全部免费下载！)
今天为设计师推荐5款超级好用的必备chrome插件。
无需注册和附加网页，亲测即刻提高工作效率两倍以上
重要的是全部免费下载！！！
还想提高工作效率的同学们一定要关注我，持续更新实用的设计工具！
插件一，【Muzli 2】
第一个插件是我最喜欢的，设计师的秘密资源，一般人不告诉他。国外版Petal+Station Cool，每天整理更新最优质的设计案例、趋势、模板等。从在几个网站之间来回跳转，到一劳永逸的一个插件，这种效率提升可想而知！
从那以后，每天上班第一件事就是打开浏览器钓鱼采集灵感。其内容来自国外各大主流灵感合集网站，如dribbble、behance、abdz、Pinterest······
内容更新之丰富，出乎意料，兼具质量与时效性。
配色模板必不可少
无需花时间访问behance，打开浏览器即可看到最新的优质设计案例！
behance 上的精选设计案例
复制链接到谷歌浏览器下载：/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc
插件2、【滴眼液】
实时摄取颜色。当你访问任何网站喜欢的配色时，导入ps真是太麻烦了。滴眼液插件可以直接实时吸收识别颜色代码、RGB值等信息。
在behance上看到你最喜欢的设计作品，你学到的各种颜色信息都会实时展示出来！
复制链接到谷歌浏览器下载：/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
插件3、【什么字体】
实时字体识别，在网上冲浪时看到喜欢的字体，点击插件，将鼠标移动到不同的字体。所有关于字体的信息一目了然，包括字体名称、粗细、大小等，在这里你无法点击。
复制链接到谷歌浏览器下载：/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
插件4、【图片下载器】
不知道大家有没有同样的经历。访问一个网站的时候经常感叹：这个banner好，主图好看，这个case太美了，但是一张一张的下载图片极其麻烦。. 该插件可以一键下载网页中的所有图片。当然，它还支持手动选择单张图片、调整清晰度等通用选项。emmm还包括广告。
好吧，我知道你们聪明的小脑袋在想什么。各种会员费资料网站的图片无法下载。阿智给大家试过了。但是，即使下载非素材的图片，也需要注意版权问题网站。
复制链接到谷歌浏览器下载：/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj
插件5、【SVG-Grabber】
该插件可以帮助设计师抓取网页中的所有矢量图标，并支持快速下载某个网站logo、图标等，非常方便实用。
谷歌
B站
知乎
复制链接到谷歌浏览器下载：/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg
//总结//
这五个插件虽然小众但是很实用，你都get了吗~想看更多创意灵感、设计工具，关注公众号【灵感自由】！
本文提到的所有插件都需要“翻墙”下载，后续使用无需“翻墙” 查看全部
今天为设计师推荐5款超级好用的必备chrome插件。
无需注册和附加网页，亲测即刻提高工作效率两倍以上
重要的是全部免费下载！！！
还想提高工作效率的同学们一定要关注我，持续更新实用的设计工具！
插件一，【Muzli 2】
第一个插件是我最喜欢的，设计师的秘密资源，一般人不告诉他。国外版Petal+Station Cool，每天整理更新最优质的设计案例、趋势、模板等。从在几个网站之间来回跳转，到一劳永逸的一个插件，这种效率提升可想而知！
从那以后，每天上班第一件事就是打开浏览器钓鱼采集灵感。其内容来自国外各大主流灵感合集网站，如dribbble、behance、abdz、Pinterest······
内容更新之丰富，出乎意料，兼具质量与时效性。
配色模板必不可少
无需花时间访问behance，打开浏览器即可看到最新的优质设计案例！
behance 上的精选设计案例
复制链接到谷歌浏览器下载：/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc
插件2、【滴眼液】
实时摄取颜色。当你访问任何网站喜欢的配色时，导入ps真是太麻烦了。滴眼液插件可以直接实时吸收识别颜色代码、RGB值等信息。
在behance上看到你最喜欢的设计作品，你学到的各种颜色信息都会实时展示出来！
复制链接到谷歌浏览器下载：/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
插件3、【什么字体】
实时字体识别，在网上冲浪时看到喜欢的字体，点击插件，将鼠标移动到不同的字体。所有关于字体的信息一目了然，包括字体名称、粗细、大小等，在这里你无法点击。
复制链接到谷歌浏览器下载：/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
插件4、【图片下载器】
不知道大家有没有同样的经历。访问一个网站的时候经常感叹：这个banner好，主图好看，这个case太美了，但是一张一张的下载图片极其麻烦。. 该插件可以一键下载网页中的所有图片。当然，它还支持手动选择单张图片、调整清晰度等通用选项。emmm还包括广告。
好吧，我知道你们聪明的小脑袋在想什么。各种会员费资料网站的图片无法下载。阿智给大家试过了。但是，即使下载非素材的图片，也需要注意版权问题网站。
复制链接到谷歌浏览器下载：/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj
插件5、【SVG-Grabber】
该插件可以帮助设计师抓取网页中的所有矢量图标，并支持快速下载某个网站logo、图标等，非常方便实用。
谷歌
B站
知乎
复制链接到谷歌浏览器下载：/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg
//总结//
这五个插件虽然小众但是很实用，你都get了吗~想看更多创意灵感、设计工具，关注公众号【灵感自由】！
本文提到的所有插件都需要“翻墙”下载，后续使用无需“翻墙” 查看全部
chrome插件网页抓取(5款超好用的设计师必备chrome插件，全部免费下载！)
今天为设计师推荐5款超级好用的必备chrome插件。
无需注册和附加网页，亲测即刻提高工作效率两倍以上
重要的是全部免费下载！！！
还想提高工作效率的同学们一定要关注我，持续更新实用的设计工具！
插件一，【Muzli 2】
第一个插件是我最喜欢的，设计师的秘密资源，一般人不告诉他。国外版Petal+Station Cool，每天整理更新最优质的设计案例、趋势、模板等。从在几个网站之间来回跳转，到一劳永逸的一个插件，这种效率提升可想而知！
从那以后，每天上班第一件事就是打开浏览器钓鱼采集灵感。其内容来自国外各大主流灵感合集网站，如dribbble、behance、abdz、Pinterest······
内容更新之丰富，出乎意料，兼具质量与时效性。
配色模板必不可少
无需花时间访问behance，打开浏览器即可看到最新的优质设计案例！
behance 上的精选设计案例
复制链接到谷歌浏览器下载：/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc
插件2、【滴眼液】
实时摄取颜色。当你访问任何网站喜欢的配色时，导入ps真是太麻烦了。滴眼液插件可以直接实时吸收识别颜色代码、RGB值等信息。
在behance上看到你最喜欢的设计作品，你学到的各种颜色信息都会实时展示出来！
复制链接到谷歌浏览器下载：/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
插件3、【什么字体】
实时字体识别，在网上冲浪时看到喜欢的字体，点击插件，将鼠标移动到不同的字体。所有关于字体的信息一目了然，包括字体名称、粗细、大小等，在这里你无法点击。
复制链接到谷歌浏览器下载：/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
插件4、【图片下载器】
不知道大家有没有同样的经历。访问一个网站的时候经常感叹：这个banner好，主图好看，这个case太美了，但是一张一张的下载图片极其麻烦。. 该插件可以一键下载网页中的所有图片。当然，它还支持手动选择单张图片、调整清晰度等通用选项。emmm还包括广告。
好吧，我知道你们聪明的小脑袋在想什么。各种会员费资料网站的图片无法下载。阿智给大家试过了。但是，即使下载非素材的图片，也需要注意版权问题网站。
复制链接到谷歌浏览器下载：/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj
插件5、【SVG-Grabber】
该插件可以帮助设计师抓取网页中的所有矢量图标，并支持快速下载某个网站logo、图标等，非常方便实用。
谷歌
B站
知乎
复制链接到谷歌浏览器下载：/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg
//总结//
这五个插件虽然小众但是很实用，你都get了吗~想看更多创意灵感、设计工具，关注公众号【灵感自由】！
本文提到的所有插件都需要“翻墙”下载，后续使用无需“翻墙”
chrome插件网页抓取(如何抓取亚马逊的商品评价（InstantDataScraper），当时我差点被感动哭了)
网站优化 • 优采云 发表了文章 • 0 个评论 • 70 次浏览 • 2022-01-02 13:13
chrome插件网页抓取(如何抓取亚马逊的商品评价（InstantDataScraper），当时我差点被感动哭了)
如何抓取亚马逊产品评论？
本来想给大家介绍一下市面上常见的或者付费的爬虫工具。直到发现这个免费的Chrome插件Instant Data Scraper，我差点被感动哭了。比起学一门编程语言来写爬虫，我还要下功夫去研究各种网页的结构和层次，总得担心我的爬虫会被亚马逊干掉。
只需拥有即时数据抓取工具！
不要害怕改变网页结构，采集规则无效的问题！
小白也可以轻松使用亚马逊评测采集爬虫技术！
什么是即时数据抓取工具？
本插件使用AI（人工智能）技术，可以判断页面上最相关的内容进行抓取，不需要您了解晦涩难懂的编程技术。 Amazon、eBay、Best Buy、Walmart、Etsy、Home Depot、Craigslist、Yelp 等。网站 均受支持。
在我初次使用后，我发现它不太可能导致“人工智力低下”的问题。至少爬取一些亚马逊商品评论（Customer Reviews）、listing和QA等基础数据，Instant Data Scraper很方便，喜欢！
如何使用即时数据抓取工具？
在Chrome网上应用店搜索并安装插件“Instant Data Scraper”。如果您无法访问 Chrome 网上应用店，您可以离线安装插件。
插件使用起来真的很简单。以采集亚马逊评论为例：
即时数据抓取
1.打开商品评论页面第一页，URL格式如：+商品ASIN
如下图：
2.然后选择“最近”，按照产品自然留待审核的时间排序。
3.排序完成后，点击浏览器右上角的Instant Data Scraper插件图标“Poke Ball Plug-in”，如下图
4.进入爬虫抓取页面的设置，如下图
5.在精灵球插件中，点击定位“下一步”按钮，然后回到产品Review页面底部，点击“下一页”再点击“开始爬行”开始自动爬行查看数据。
当然，我们也可以在这里删除不需要的信息。稍后下载表单时，我们不需要的信息将不会显示。
这里需要注意的是Min delay和Max delay。当您的网速过快时，您需要将 Min delay 设置为较大的值。当您的网速太慢时，您应该将最小延迟和最大延迟设置为较大的值。只有这样，才能稳定抓取数据。
6. Review下载完成后，页面会弹出错误信息“Error getting table: Table not found”，然后我们点击绿色按钮“CSV”，我们将下载其中一个我们的评论。下载它。如果下载一千多个Review数据，数据下载时间会稍长一些。可能有错觉，感觉卡住了。我们只需稍等片刻即可下载。下载完成，左下角的底部会有一个文件下载提示框，这样我们就知道Review是否已经下载了。
7.打开下载的CSV或Excel文件，整理我们需要的数据列
当然，除了爬取亚马逊评论数据，我们还可以爬取QA等其他信息。
获取评论信息时，可以获取姓名、评分、评论时间、关键词、购买的款式等信息。
我们也可以使用这个工具来选择产品。快速对产品的特点和消费者的情绪做出粗略的判断，而不是一个一个的阅读Review，更适合大范围的批量选择。
当然，除了在亚马逊上爬取信息，我们也可以在其他平台或独立网站上使用这个插件。
从上图可以看出对应的抓取信息是比较准确的。 查看全部
如何抓取亚马逊产品评论？
本来想给大家介绍一下市面上常见的或者付费的爬虫工具。直到发现这个免费的Chrome插件Instant Data Scraper，我差点被感动哭了。比起学一门编程语言来写爬虫，我还要下功夫去研究各种网页的结构和层次，总得担心我的爬虫会被亚马逊干掉。
只需拥有即时数据抓取工具！
不要害怕改变网页结构，采集规则无效的问题！
小白也可以轻松使用亚马逊评测采集爬虫技术！
什么是即时数据抓取工具？
本插件使用AI（人工智能）技术，可以判断页面上最相关的内容进行抓取，不需要您了解晦涩难懂的编程技术。 Amazon、eBay、Best Buy、Walmart、Etsy、Home Depot、Craigslist、Yelp 等。网站 均受支持。
在我初次使用后，我发现它不太可能导致“人工智力低下”的问题。至少爬取一些亚马逊商品评论（Customer Reviews）、listing和QA等基础数据，Instant Data Scraper很方便，喜欢！
如何使用即时数据抓取工具？
在Chrome网上应用店搜索并安装插件“Instant Data Scraper”。如果您无法访问 Chrome 网上应用店，您可以离线安装插件。
插件使用起来真的很简单。以采集亚马逊评论为例：
即时数据抓取
1.打开商品评论页面第一页，URL格式如：+商品ASIN
如下图：
2.然后选择“最近”，按照产品自然留待审核的时间排序。
3.排序完成后，点击浏览器右上角的Instant Data Scraper插件图标“Poke Ball Plug-in”，如下图
4.进入爬虫抓取页面的设置，如下图
5.在精灵球插件中，点击定位“下一步”按钮，然后回到产品Review页面底部，点击“下一页”再点击“开始爬行”开始自动爬行查看数据。
当然，我们也可以在这里删除不需要的信息。稍后下载表单时，我们不需要的信息将不会显示。
这里需要注意的是Min delay和Max delay。当您的网速过快时，您需要将 Min delay 设置为较大的值。当您的网速太慢时，您应该将最小延迟和最大延迟设置为较大的值。只有这样，才能稳定抓取数据。
6. Review下载完成后，页面会弹出错误信息“Error getting table: Table not found”，然后我们点击绿色按钮“CSV”，我们将下载其中一个我们的评论。下载它。如果下载一千多个Review数据，数据下载时间会稍长一些。可能有错觉，感觉卡住了。我们只需稍等片刻即可下载。下载完成，左下角的底部会有一个文件下载提示框，这样我们就知道Review是否已经下载了。
7.打开下载的CSV或Excel文件，整理我们需要的数据列
当然，除了爬取亚马逊评论数据，我们还可以爬取QA等其他信息。
获取评论信息时，可以获取姓名、评分、评论时间、关键词、购买的款式等信息。
我们也可以使用这个工具来选择产品。快速对产品的特点和消费者的情绪做出粗略的判断，而不是一个一个的阅读Review，更适合大范围的批量选择。
当然，除了在亚马逊上爬取信息，我们也可以在其他平台或独立网站上使用这个插件。
从上图可以看出对应的抓取信息是比较准确的。 查看全部
chrome插件网页抓取(如何抓取亚马逊的商品评价（InstantDataScraper），当时我差点被感动哭了)
如何抓取亚马逊产品评论？
本来想给大家介绍一下市面上常见的或者付费的爬虫工具。直到发现这个免费的Chrome插件Instant Data Scraper，我差点被感动哭了。比起学一门编程语言来写爬虫，我还要下功夫去研究各种网页的结构和层次，总得担心我的爬虫会被亚马逊干掉。
只需拥有即时数据抓取工具！
不要害怕改变网页结构，采集规则无效的问题！
小白也可以轻松使用亚马逊评测采集爬虫技术！
什么是即时数据抓取工具？
本插件使用AI（人工智能）技术，可以判断页面上最相关的内容进行抓取，不需要您了解晦涩难懂的编程技术。 Amazon、eBay、Best Buy、Walmart、Etsy、Home Depot、Craigslist、Yelp 等。网站 均受支持。
在我初次使用后，我发现它不太可能导致“人工智力低下”的问题。至少爬取一些亚马逊商品评论（Customer Reviews）、listing和QA等基础数据，Instant Data Scraper很方便，喜欢！
如何使用即时数据抓取工具？
在Chrome网上应用店搜索并安装插件“Instant Data Scraper”。如果您无法访问 Chrome 网上应用店，您可以离线安装插件。
插件使用起来真的很简单。以采集亚马逊评论为例：
即时数据抓取
1.打开商品评论页面第一页，URL格式如：+商品ASIN
如下图：
2.然后选择“最近”，按照产品自然留待审核的时间排序。
3.排序完成后，点击浏览器右上角的Instant Data Scraper插件图标“Poke Ball Plug-in”，如下图
4.进入爬虫抓取页面的设置，如下图
5.在精灵球插件中，点击定位“下一步”按钮，然后回到产品Review页面底部，点击“下一页”再点击“开始爬行”开始自动爬行查看数据。
当然，我们也可以在这里删除不需要的信息。稍后下载表单时，我们不需要的信息将不会显示。
这里需要注意的是Min delay和Max delay。当您的网速过快时，您需要将 Min delay 设置为较大的值。当您的网速太慢时，您应该将最小延迟和最大延迟设置为较大的值。只有这样，才能稳定抓取数据。
6. Review下载完成后，页面会弹出错误信息“Error getting table: Table not found”，然后我们点击绿色按钮“CSV”，我们将下载其中一个我们的评论。下载它。如果下载一千多个Review数据，数据下载时间会稍长一些。可能有错觉，感觉卡住了。我们只需稍等片刻即可下载。下载完成，左下角的底部会有一个文件下载提示框，这样我们就知道Review是否已经下载了。
7.打开下载的CSV或Excel文件，整理我们需要的数据列
当然，除了爬取亚马逊评论数据，我们还可以爬取QA等其他信息。
获取评论信息时，可以获取姓名、评分、评论时间、关键词、购买的款式等信息。
我们也可以使用这个工具来选择产品。快速对产品的特点和消费者的情绪做出粗略的判断，而不是一个一个的阅读Review，更适合大范围的批量选择。
当然，除了在亚马逊上爬取信息，我们也可以在其他平台或独立网站上使用这个插件。
从上图可以看出对应的抓取信息是比较准确的。
chrome插件网页抓取(怎么完成一个chrome插件？教程教你如何使用插件)
网站优化 • 优采云 发表了文章 • 0 个评论 • 52 次浏览 • 2021-12-29 03:17
chrome插件网页抓取(怎么完成一个chrome插件？教程教你如何使用插件)
编写 chrome 插件是一项非常简单的任务。只要懂JavaScript，就可以轻松做到这一点，但要完成一个完美的插件还是比较困难的。使用插件，我们可以做很多有趣的事情。比如我们可以做一个抢热票插件，自动提醒，自动购票等等。本教程将教你如何完成一个chrome插件。
开始工作插件功能
提取页面所有样式表中的背景图片并在插件中显示
显现
manifest.json 是插件的配置文件。整个插件中最重要的文件。配置权限、内容脚本、后台脚本、弹窗、插件ICON都是这个文件。官方文件
{
"manifest_version": 2, //扩展使用的Manifest 版本, 1是chrome版本低于17才使用.目前主流都是用2
"name": "ImageSource", //扩展名称
"version": "1.0", //扩展版本
"description": "抓取当前页面样式文件中的所有图片源地址", //扩展描述
//设置扩展将在地址右侧显示扩展图标，弹出窗，提示等
//@see https://developer.chrome.com/e ... ction
//当你的扩展是针对某些页面操作的话，你应该使用page_action
/**
"browser_action": {
"default_icon": { // 设置ICON，不同大小，浏览会选择显示那种ICON
"16": "images/icon16.png",
"24": "images/icon24.png",
"32": "images/icon32.png"
},
"default_title": "Google Mail", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
*/
"page_action": {
"default_icon": "images/icon-32.png", // 设置ICON，不同大小，浏览会选择显示那种ICON
"default_title": "图片源", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
"icons": {
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
//运行于后台的实例, 后台实例是一直在运行中，打开浏览器只执行一次实例
//官方推荐使用事件页面代替背景页面
//@see
"background": {
//"page": "background.html",
"scripts": [
"js/background.js"
],
"persistent": false
},
//页面脚本注入
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["js/content.js"]
}
],
//扩展权限
//@see https://developer.chrome.com/e ... sions 权限列表文档
"permissions": [
"background",
"tabs",
"activeTab",
"http://*/*",
"https://*/*"
],
"author": "骑驴找蚂蚁", //开发者
"homepage_url": "http://loocode.com" //项目主页
}
以上是插件的 manifest.json 的完整内容。
页面操作
在这个插件中，我们使用 page_action 而不是 browser_action。使用 page_action 需要开发者控制插件的使用状态。默认处于未使用状态（打开chrome.pageAction.show(tabId)），browser_action则相反。官方认为该插件在一定条件下可以选择page_action，比如我是针对某个网站（github、google），或者是针对网页内容的特定值（json、rss）。
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var url = tab.url;
var status = changeInfo.status; //loading and complete two state
if (url !== undefined && status === 'complete' && url.indexOf("https://github.com") !== -1) {
chrome.pageAction.show(tabId);
}
});
比如监听tabs页面的update事件，当打开的页面是github网站时，将插件更新为active状态。这里需要申请tabs权限，在权限属性中填写tabs，而browser_action不需要。
default_popup
该属性是设置点击插件弹出的页面图层。也是上面例子的显示页面。
Document
笔记：
无法在 html 中嵌入内联脚本，因此必须将其作为文件引入。
<p>
var query = {
active: true, currentWindow: true
};
var tab = null;
var bg = chrome.extension.getBackgroundPage();
function ajax(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var content = xhr.responseText,
reg = /url\("?(.*?\.(png|gif|jpeg|jpg|svg))"?\)/gi,
match = null, images = [];
while((match = reg.exec(content)) !== null) {
images.push(match[1]);
}
if (images.length > 0) {
var p = document.createElement("p");
p.innerHTML = url,
offset = url.lastIndexOf("/") + 1,
newUrl = url.substring(0, offset),
point = newUrl.lastIndexOf(".") + 1,
domain = null;
for (var j = 1; j 查看全部
编写 chrome 插件是一项非常简单的任务。只要懂JavaScript，就可以轻松做到这一点，但要完成一个完美的插件还是比较困难的。使用插件，我们可以做很多有趣的事情。比如我们可以做一个抢热票插件，自动提醒，自动购票等等。本教程将教你如何完成一个chrome插件。
开始工作插件功能
提取页面所有样式表中的背景图片并在插件中显示
显现
manifest.json 是插件的配置文件。整个插件中最重要的文件。配置权限、内容脚本、后台脚本、弹窗、插件ICON都是这个文件。官方文件
{
"manifest_version": 2, //扩展使用的Manifest 版本, 1是chrome版本低于17才使用.目前主流都是用2
"name": "ImageSource", //扩展名称
"version": "1.0", //扩展版本
"description": "抓取当前页面样式文件中的所有图片源地址", //扩展描述
//设置扩展将在地址右侧显示扩展图标，弹出窗，提示等
//@see https://developer.chrome.com/e ... ction
//当你的扩展是针对某些页面操作的话，你应该使用page_action
/**
"browser_action": {
"default_icon": { // 设置ICON，不同大小，浏览会选择显示那种ICON
"16": "images/icon16.png",
"24": "images/icon24.png",
"32": "images/icon32.png"
},
"default_title": "Google Mail", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
*/
"page_action": {
"default_icon": "images/icon-32.png", // 设置ICON，不同大小，浏览会选择显示那种ICON
"default_title": "图片源", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
"icons": {
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
//运行于后台的实例, 后台实例是一直在运行中，打开浏览器只执行一次实例
//官方推荐使用事件页面代替背景页面
//@see
"background": {
//"page": "background.html",
"scripts": [
"js/background.js"
],
"persistent": false
},
//页面脚本注入
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["js/content.js"]
}
],
//扩展权限
//@see https://developer.chrome.com/e ... sions 权限列表文档
"permissions": [
"background",
"tabs",
"activeTab",
"http://*/*",
"https://*/*"
],
"author": "骑驴找蚂蚁", //开发者
"homepage_url": "http://loocode.com" //项目主页
}
以上是插件的 manifest.json 的完整内容。
页面操作
在这个插件中，我们使用 page_action 而不是 browser_action。使用 page_action 需要开发者控制插件的使用状态。默认处于未使用状态（打开chrome.pageAction.show(tabId)），browser_action则相反。官方认为该插件在一定条件下可以选择page_action，比如我是针对某个网站（github、google），或者是针对网页内容的特定值（json、rss）。
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var url = tab.url;
var status = changeInfo.status; //loading and complete two state
if (url !== undefined && status === 'complete' && url.indexOf("https://github.com") !== -1) {
chrome.pageAction.show(tabId);
}
});
比如监听tabs页面的update事件，当打开的页面是github网站时，将插件更新为active状态。这里需要申请tabs权限，在权限属性中填写tabs，而browser_action不需要。
default_popup
该属性是设置点击插件弹出的页面图层。也是上面例子的显示页面。
Document
笔记：
无法在 html 中嵌入内联脚本，因此必须将其作为文件引入。
<p>
var query = {
active: true, currentWindow: true
};
var tab = null;
var bg = chrome.extension.getBackgroundPage();
function ajax(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var content = xhr.responseText,
reg = /url\("?(.*?\.(png|gif|jpeg|jpg|svg))"?\)/gi,
match = null, images = [];
while((match = reg.exec(content)) !== null) {
images.push(match[1]);
}
if (images.length > 0) {
var p = document.createElement("p");
p.innerHTML = url,
offset = url.lastIndexOf("/") + 1,
newUrl = url.substring(0, offset),
point = newUrl.lastIndexOf(".") + 1,
domain = null;
for (var j = 1; j 查看全部
chrome插件网页抓取(怎么完成一个chrome插件？教程教你如何使用插件)
编写 chrome 插件是一项非常简单的任务。只要懂JavaScript，就可以轻松做到这一点，但要完成一个完美的插件还是比较困难的。使用插件，我们可以做很多有趣的事情。比如我们可以做一个抢热票插件，自动提醒，自动购票等等。本教程将教你如何完成一个chrome插件。
开始工作插件功能
提取页面所有样式表中的背景图片并在插件中显示
显现
manifest.json 是插件的配置文件。整个插件中最重要的文件。配置权限、内容脚本、后台脚本、弹窗、插件ICON都是这个文件。官方文件
{
"manifest_version": 2, //扩展使用的Manifest 版本, 1是chrome版本低于17才使用.目前主流都是用2
"name": "ImageSource", //扩展名称
"version": "1.0", //扩展版本
"description": "抓取当前页面样式文件中的所有图片源地址", //扩展描述
//设置扩展将在地址右侧显示扩展图标，弹出窗，提示等
//@see https://developer.chrome.com/e ... ction
//当你的扩展是针对某些页面操作的话，你应该使用page_action
/**
"browser_action": {
"default_icon": { // 设置ICON，不同大小，浏览会选择显示那种ICON
"16": "images/icon16.png",
"24": "images/icon24.png",
"32": "images/icon32.png"
},
"default_title": "Google Mail", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
*/
"page_action": {
"default_icon": "images/icon-32.png", // 设置ICON，不同大小，浏览会选择显示那种ICON
"default_title": "图片源", // 设置默认的标题
"default_popup": "popup.html" // 设置默认的弹出层页面
},
"icons": {
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
//运行于后台的实例, 后台实例是一直在运行中，打开浏览器只执行一次实例
//官方推荐使用事件页面代替背景页面
//@see
"background": {
//"page": "background.html",
"scripts": [
"js/background.js"
],
"persistent": false
},
//页面脚本注入
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["js/content.js"]
}
],
//扩展权限
//@see https://developer.chrome.com/e ... sions 权限列表文档
"permissions": [
"background",
"tabs",
"activeTab",
"http://*/*",
"https://*/*"
],
"author": "骑驴找蚂蚁", //开发者
"homepage_url": "http://loocode.com" //项目主页
}
以上是插件的 manifest.json 的完整内容。
页面操作
在这个插件中，我们使用 page_action 而不是 browser_action。使用 page_action 需要开发者控制插件的使用状态。默认处于未使用状态（打开chrome.pageAction.show(tabId)），browser_action则相反。官方认为该插件在一定条件下可以选择page_action，比如我是针对某个网站（github、google），或者是针对网页内容的特定值（json、rss）。
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var url = tab.url;
var status = changeInfo.status; //loading and complete two state
if (url !== undefined && status === 'complete' && url.indexOf("https://github.com";) !== -1) {
chrome.pageAction.show(tabId);
}
});
比如监听tabs页面的update事件，当打开的页面是github网站时，将插件更新为active状态。这里需要申请tabs权限，在权限属性中填写tabs，而browser_action不需要。
default_popup
该属性是设置点击插件弹出的页面图层。也是上面例子的显示页面。
Document
笔记：
无法在 html 中嵌入内联脚本，因此必须将其作为文件引入。
<p>
var query = {
active: true, currentWindow: true
};
var tab = null;
var bg = chrome.extension.getBackgroundPage();
function ajax(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var content = xhr.responseText,
reg = /url\("?(.*?\.(png|gif|jpeg|jpg|svg))"?\)/gi,
match = null, images = [];
while((match = reg.exec(content)) !== null) {
images.push(match[1]);
}
if (images.length > 0) {
var p = document.createElement("p");
p.innerHTML = url,
offset = url.lastIndexOf("/") + 1,
newUrl = url.substring(0, offset),
point = newUrl.lastIndexOf(".") + 1,
domain = null;
for (var j = 1; j
chrome插件网页抓取(谷歌浏览器插件开发的核心概念.2.核心知识点.2.1)
网站优化 • 优采云 发表了文章 • 0 个评论 • 46 次浏览 • 2021-12-27 18:02
chrome插件网页抓取(谷歌浏览器插件开发的核心概念.2.核心知识点.2.1)
前言
由于业务需要，笔者想为公司开发几个实用的浏览器插件，所以花了大约一天的时间阅读了谷歌浏览器插件开发文档，这里专门总结一下经验，并通过一个实战案例评论插件的开发过程及注意事项。
你会收获文字
正文开始之前，先来看看作者总结的概述：
熟悉浏览器插件开发的可以直接看最后一节插件开发实战。
1.开始使用
首先我们看一下浏览器插件的定义：
浏览器插件是基于 Web 技术（例如 HTML、JavaScript 和 CSS）的小型软件程序，可以自定义浏览体验。它们允许用户根据个人需求或偏好自定义 Chrome 功能和行为。
要开发浏览器插件，我们只需要一个 manifest.json 文件。为了快速上手浏览器插件开发，我们需要打开浏览器开发者工具。具体步骤如下：
在谷歌浏览器中输入 chrome://extensions/ 开启开发者模式
导入自己的浏览器插件包
通过以上三步，我们就可以开始浏览器插件的开发之旅了。浏览器插件一般放在浏览器地址栏的右侧。我们可以在 manifest.json 文件中配置插件的图标，并配置一些规则。 , 可以看到我们的浏览器插件图标，如下图：
详细讲解浏览器插件开发的核心概念。
2.核心知识点
浏览器插件一般涉及以下核心文件：
作者画了一张图，粗略的展示了它们之间的关系：
接下来，我们来详细了解几个核心知识点。
2.1 manifest.json
谷歌官网为我们提供了一个简单的配置，如下：
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
各字段含义介绍如下：
文末会给出完整的配置文件地址，供大家学习参考。
2.2 background.js
后台页面主要用于提供一些全局配置、事件监控、业务转发等。举几个常见的案例：
定义右键菜单
// background.js
const systems = {
a: '趣谈前端',
b: '掘金',
c: '微信'
}
chrome.runtime.onInstalled.addListener(function() {
// 上下文菜单
for (let key of Object.keys(systems)) {
chrome.contextMenus.create({
id: key,
title: systems[key],
type: 'normal',
contexts: ['selection'],
});
}
});
// manifest.json
{
"permissions": ["contextMenus"]
}
效果如下：
设置只有后缀为.com的页面才会激活插件
chrome.runtime.onInstalled.addListener(function() {
// 类似于什么时候激活浏览器插件图标这种感觉
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostSuffix: '.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
如下图，当页面地址后缀不等于.com时，插件图标不会被激活：
与 content_script 或弹出页面的消息通信
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
2.3 个内容脚本
内容脚本一般是植入到页面中，可以控制页面中的dom。我们可以用它来屏蔽网页广告、自定义页面皮肤等操作。 manifest.json中的基本配置如下：
{
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"lib/jquery3.4.min.js",
"content_script.js"
],
"css": ["base.css"]
}],
}
在上面的代码中，我们定义了content_scripts允许注入的页面范围，插入页面的js和css，这样我们就可以方便的改变某个页面的样式。例如，我们可以在页面中注入一个按钮：
在下面的浏览器插件案例中，作者将详细介绍content_scripts的用法。
2.4 弹窗
popup 是当用户点击插件图标时打开的一个小窗口。当失去焦点时，窗口立即关闭。我们一般用它来处理一些简单的用户交互和插件指令。
由于弹窗也是一个网页，所以我们一般会创建一个popup.html和popup.js来控制弹窗的显示和交互。我们在 manifest.json 中配置以下内容：
{
"page_action": {
"default_title": "小夕图片提取插件",
"default_popup": "popup.html"
},
}
这里需要注意的一点是，我们不能直接在popup.html中使用脚本脚本，我们需要使用导入脚本文件的方法。如下：
在线图片提取工具
以下是作者写的一个插件的弹窗：
3.沟通机制
对于一个比较复杂的浏览器插件，我们不仅可以操作dom或者提供基础功能，还需要从第三方或者我们自己的服务器抓取有用的页面数据。这次我们需要用到它。这是插件的通信机制。
由于content_script脚本存在于当前页面且受同源策略影响，我们无法将抓取到的数据传输到第三方平台或我们自己的服务器，因此我们需要一个基于浏览器的通信API。这是谷歌浏览器。插件的通信过程：
3.1 Popup 和后台相互通信
从官方文档中我们知道popup是如何直接访问后台页面的，所以popup可以直接与之通信：
// background.js
var getData = (data) => { console.log('拿到数据:' + data) }
// popup.js
let bgObj = chrome.extension.getBackgroundPage();
bgObj.getData(); // 访问bg的函数
3.2 弹出或后台页面和 content_script 通信
这里我们使用chrome的tabs API，如下：
// popup.js
// 发送消息给content_script
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
// 接收消息
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
content_script 接收和发送消息：
// 接收消息
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
// ...
sendResponse({farewell: "激活成功"});
}
});
// 主动发送消息
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response, document.body);
// document.body.style.backgroundColor="orange"
});
谷歌官网也明确写了消息的长连接：
我们可以使用以下方法进行长连接：
// content_script.js
var port = chrome.runtime.connect({name: "徐小夕"});
port.postMessage({Ling: "你好"});
port.onMessage.addListener(function(msg) {
if (msg.question == "你是做什么滴?")
port.postMessage({answer: "搬砖"});
else if (msg.question == "搬砖有钱吗?")
port.postMessage({answer: "木有"});
});
// popup.js
chrome.runtime.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
if (msg.Ling == "你好")
port.postMessage({question: "你是做什么滴?"});
else if (msg.answer == "搬砖")
port.postMessage({question: "搬砖有钱吗?"});
else if (msg.answer == "木有")
port.postMessage({question: "太难了."});
});
});
4.数据存储
chrome.storage 用于为插件全局存储数据。我们在任意一个页面（popup或者content_script或者background）下存储数据，在上面三个页面我们都可以获取到。具体用法如下：
获取数据
chrome.storage.sync.get('imgArr', function(data) {
console.log(data)
});
// 保存数据
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
// 另一种方式
chrome.storage.local.set({key: value}, function() {
console.log('Value is set to ' + value);
});
5.应用场景
谷歌浏览器的插件应用场景很多，如文章开头的思维导图所写。以下是笔者总结的一些应用场景。有兴趣的可以尝试实现一下：
有很多实用的开发工具，大家可以玩玩。接下来，我们通过实现一个网页图片提取插件来总结以下浏览器插件的开发过程。
6.开发一个抓取网站图片资源的浏览器插件
首先，根据作者的风格，我们在开发任何工具之前都要明确需求，那么我们来看看插件的特点：
基本上对于这些功能，我接下来会展示核心代码。在介绍代码之前，先预览一下插件的实现效果：
插件目录结构如下：
因为插件的开发比较简单，所以直接用jquery来开发。这里我们主要关注 popup.js 和 content_script.js。 Popup.js 主要用于获取从 content_script 页面传入的图片数据，并在 popup.html 中显示。还有一点需要注意的是，当页面没有注入生成的按钮时，popupu需要向内容页面发送信息，主动让它生成按钮，代码如下：
chrome.storage.sync.get('imgArr', function(data) {
data.imgArr && data.imgArr.forEach(item => {
var imgWrap = $("")
var img = $("" + item + "")
imgWrap.append(img);
$('#content').append(imgWrap);
$('.empty').hide();
})
});
$('#activeBtn').click(function(element) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
});
对于内容页面，我们需要实现的是动态生成按钮，并在页面中植入一个弹窗来显示获取的图片。另一方面，我们需要将图像数据传递给存储，以便弹出页面可以获取图像数据。
由于页面比较简单，所以不需要太多第三方库。我只是先手写一个模态组件。代码如下：
// 弹窗
~function Modal() {
var modal;
if(this instanceof Modal) {
this.init = function(opt) {
modal = $("");
var title = $("" + opt.title + "");
var close_btn = $("X");
var content = $("");
var mask = $("");
close_btn.click(function(){
modal.hide()
})
title.append(close_btn);
content.append(title);
content.append(opt.content);
modal.append(content);
modal.append(mask);
$('body').append(modal);
}
this.show = function(opt) {
if(modal) {
modal.show();
}else {
var options = {
title: opt.title || '标题',
content: opt.content || ''
}
this.init(options)
modal.show();
}
}
this.hide = function() {
modal.hide();
}
}else {
window.Modal = new Modal()
}
}()
第一步，我们先批量获取页面图片数据：
var imgArr = []
$('img').each(function(i) {
var src = $(this).attr('src');
var realSrc = /^(http|https)/.test(src) ? src : location.protocol+ '//' + location.host + src;
imgArr.push(realSrc)
})
因为图片的src路径可能是一个相对地址，所以笔者这里用正则的规则简单处理如下。当然，我们可以进行更细粒度的控制。
第二步是将图片数据存入storage：
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
第三步是生成预览图的弹窗，这里我使用了上面实现的模态组件：
Modal.show({
title: '提取结果',
content: imgBox
})
第四步，当popup发送通知激活按钮时，我们需要在网页中动态插入生成的按钮：
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
if(!$('.crawl-btn')) {
$('body').append("提取")
}else {
$('.crawl-btn').css("background-color","orange");
setTimeout(() => {
$('.crawl-btn').css("background-color","#06c");
}, 3000);
}
sendResponse({farewell: "激活成功"});
}
});
setTimeout 段纯粹是为了吸引用户的注意力，当然我们可以用更优雅的方式来处理。
插件的核心代码主要是这些。当然，还有很多细节需要考虑。我把配置文件和一些细节放在github上。有兴趣的可以安装感受一下。
github地址：提取网页图片数据的浏览器插件
终于
如果想学习更多H5游戏、webpack、node、gulp、css3、javascript、nodeJS、canvas数据可视化等前端知识和实战，欢迎在“有趣的前端”学习讨论一起探索前端边界。
参考资料 查看全部
前言
由于业务需要，笔者想为公司开发几个实用的浏览器插件，所以花了大约一天的时间阅读了谷歌浏览器插件开发文档，这里专门总结一下经验，并通过一个实战案例评论插件的开发过程及注意事项。
你会收获文字
正文开始之前，先来看看作者总结的概述：
熟悉浏览器插件开发的可以直接看最后一节插件开发实战。
1.开始使用
首先我们看一下浏览器插件的定义：
浏览器插件是基于 Web 技术（例如 HTML、JavaScript 和 CSS）的小型软件程序，可以自定义浏览体验。它们允许用户根据个人需求或偏好自定义 Chrome 功能和行为。
要开发浏览器插件，我们只需要一个 manifest.json 文件。为了快速上手浏览器插件开发，我们需要打开浏览器开发者工具。具体步骤如下：
在谷歌浏览器中输入 chrome://extensions/ 开启开发者模式
导入自己的浏览器插件包
通过以上三步，我们就可以开始浏览器插件的开发之旅了。浏览器插件一般放在浏览器地址栏的右侧。我们可以在 manifest.json 文件中配置插件的图标，并配置一些规则。 , 可以看到我们的浏览器插件图标，如下图：
详细讲解浏览器插件开发的核心概念。
2.核心知识点
浏览器插件一般涉及以下核心文件：
作者画了一张图，粗略的展示了它们之间的关系：
接下来，我们来详细了解几个核心知识点。
2.1 manifest.json
谷歌官网为我们提供了一个简单的配置，如下：
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
各字段含义介绍如下：
文末会给出完整的配置文件地址，供大家学习参考。
2.2 background.js
后台页面主要用于提供一些全局配置、事件监控、业务转发等。举几个常见的案例：
定义右键菜单
// background.js
const systems = {
a: '趣谈前端',
b: '掘金',
c: '微信'
}
chrome.runtime.onInstalled.addListener(function() {
// 上下文菜单
for (let key of Object.keys(systems)) {
chrome.contextMenus.create({
id: key,
title: systems[key],
type: 'normal',
contexts: ['selection'],
});
}
});
// manifest.json
{
"permissions": ["contextMenus"]
}
效果如下：
设置只有后缀为.com的页面才会激活插件
chrome.runtime.onInstalled.addListener(function() {
// 类似于什么时候激活浏览器插件图标这种感觉
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostSuffix: '.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
如下图，当页面地址后缀不等于.com时，插件图标不会被激活：
与 content_script 或弹出页面的消息通信
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
2.3 个内容脚本
内容脚本一般是植入到页面中，可以控制页面中的dom。我们可以用它来屏蔽网页广告、自定义页面皮肤等操作。 manifest.json中的基本配置如下：
{
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"lib/jquery3.4.min.js",
"content_script.js"
],
"css": ["base.css"]
}],
}
在上面的代码中，我们定义了content_scripts允许注入的页面范围，插入页面的js和css，这样我们就可以方便的改变某个页面的样式。例如，我们可以在页面中注入一个按钮：
在下面的浏览器插件案例中，作者将详细介绍content_scripts的用法。
2.4 弹窗
popup 是当用户点击插件图标时打开的一个小窗口。当失去焦点时，窗口立即关闭。我们一般用它来处理一些简单的用户交互和插件指令。
由于弹窗也是一个网页，所以我们一般会创建一个popup.html和popup.js来控制弹窗的显示和交互。我们在 manifest.json 中配置以下内容：
{
"page_action": {
"default_title": "小夕图片提取插件",
"default_popup": "popup.html"
},
}
这里需要注意的一点是，我们不能直接在popup.html中使用脚本脚本，我们需要使用导入脚本文件的方法。如下：
在线图片提取工具
以下是作者写的一个插件的弹窗：
3.沟通机制
对于一个比较复杂的浏览器插件，我们不仅可以操作dom或者提供基础功能，还需要从第三方或者我们自己的服务器抓取有用的页面数据。这次我们需要用到它。这是插件的通信机制。
由于content_script脚本存在于当前页面且受同源策略影响，我们无法将抓取到的数据传输到第三方平台或我们自己的服务器，因此我们需要一个基于浏览器的通信API。这是谷歌浏览器。插件的通信过程：
3.1 Popup 和后台相互通信
从官方文档中我们知道popup是如何直接访问后台页面的，所以popup可以直接与之通信：
// background.js
var getData = (data) => { console.log('拿到数据:' + data) }
// popup.js
let bgObj = chrome.extension.getBackgroundPage();
bgObj.getData(); // 访问bg的函数
3.2 弹出或后台页面和 content_script 通信
这里我们使用chrome的tabs API，如下：
// popup.js
// 发送消息给content_script
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
// 接收消息
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
content_script 接收和发送消息：
// 接收消息
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
// ...
sendResponse({farewell: "激活成功"});
}
});
// 主动发送消息
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response, document.body);
// document.body.style.backgroundColor="orange"
});
谷歌官网也明确写了消息的长连接：
我们可以使用以下方法进行长连接：
// content_script.js
var port = chrome.runtime.connect({name: "徐小夕"});
port.postMessage({Ling: "你好"});
port.onMessage.addListener(function(msg) {
if (msg.question == "你是做什么滴?")
port.postMessage({answer: "搬砖"});
else if (msg.question == "搬砖有钱吗?")
port.postMessage({answer: "木有"});
});
// popup.js
chrome.runtime.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
if (msg.Ling == "你好")
port.postMessage({question: "你是做什么滴?"});
else if (msg.answer == "搬砖")
port.postMessage({question: "搬砖有钱吗?"});
else if (msg.answer == "木有")
port.postMessage({question: "太难了."});
});
});
4.数据存储
chrome.storage 用于为插件全局存储数据。我们在任意一个页面（popup或者content_script或者background）下存储数据，在上面三个页面我们都可以获取到。具体用法如下：
获取数据
chrome.storage.sync.get('imgArr', function(data) {
console.log(data)
});
// 保存数据
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
// 另一种方式
chrome.storage.local.set({key: value}, function() {
console.log('Value is set to ' + value);
});
5.应用场景
谷歌浏览器的插件应用场景很多，如文章开头的思维导图所写。以下是笔者总结的一些应用场景。有兴趣的可以尝试实现一下：
有很多实用的开发工具，大家可以玩玩。接下来，我们通过实现一个网页图片提取插件来总结以下浏览器插件的开发过程。
6.开发一个抓取网站图片资源的浏览器插件
首先，根据作者的风格，我们在开发任何工具之前都要明确需求，那么我们来看看插件的特点：
基本上对于这些功能，我接下来会展示核心代码。在介绍代码之前，先预览一下插件的实现效果：
插件目录结构如下：
因为插件的开发比较简单，所以直接用jquery来开发。这里我们主要关注 popup.js 和 content_script.js。 Popup.js 主要用于获取从 content_script 页面传入的图片数据，并在 popup.html 中显示。还有一点需要注意的是，当页面没有注入生成的按钮时，popupu需要向内容页面发送信息，主动让它生成按钮，代码如下：
chrome.storage.sync.get('imgArr', function(data) {
data.imgArr && data.imgArr.forEach(item => {
var imgWrap = $("")
var img = $("" + item + "")
imgWrap.append(img);
$('#content').append(imgWrap);
$('.empty').hide();
})
});
$('#activeBtn').click(function(element) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
});
对于内容页面，我们需要实现的是动态生成按钮，并在页面中植入一个弹窗来显示获取的图片。另一方面，我们需要将图像数据传递给存储，以便弹出页面可以获取图像数据。
由于页面比较简单，所以不需要太多第三方库。我只是先手写一个模态组件。代码如下：
// 弹窗
~function Modal() {
var modal;
if(this instanceof Modal) {
this.init = function(opt) {
modal = $("");
var title = $("" + opt.title + "");
var close_btn = $("X");
var content = $("");
var mask = $("");
close_btn.click(function(){
modal.hide()
})
title.append(close_btn);
content.append(title);
content.append(opt.content);
modal.append(content);
modal.append(mask);
$('body').append(modal);
}
this.show = function(opt) {
if(modal) {
modal.show();
}else {
var options = {
title: opt.title || '标题',
content: opt.content || ''
}
this.init(options)
modal.show();
}
}
this.hide = function() {
modal.hide();
}
}else {
window.Modal = new Modal()
}
}()
第一步，我们先批量获取页面图片数据：
var imgArr = []
$('img').each(function(i) {
var src = $(this).attr('src');
var realSrc = /^(http|https)/.test(src) ? src : location.protocol+ '//' + location.host + src;
imgArr.push(realSrc)
})
因为图片的src路径可能是一个相对地址，所以笔者这里用正则的规则简单处理如下。当然，我们可以进行更细粒度的控制。
第二步是将图片数据存入storage：
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
第三步是生成预览图的弹窗，这里我使用了上面实现的模态组件：
Modal.show({
title: '提取结果',
content: imgBox
})
第四步，当popup发送通知激活按钮时，我们需要在网页中动态插入生成的按钮：
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
if(!$('.crawl-btn')) {
$('body').append("提取")
}else {
$('.crawl-btn').css("background-color","orange");
setTimeout(() => {
$('.crawl-btn').css("background-color","#06c");
}, 3000);
}
sendResponse({farewell: "激活成功"});
}
});
setTimeout 段纯粹是为了吸引用户的注意力，当然我们可以用更优雅的方式来处理。
插件的核心代码主要是这些。当然，还有很多细节需要考虑。我把配置文件和一些细节放在github上。有兴趣的可以安装感受一下。
github地址：提取网页图片数据的浏览器插件
终于
如果想学习更多H5游戏、webpack、node、gulp、css3、javascript、nodeJS、canvas数据可视化等前端知识和实战，欢迎在“有趣的前端”学习讨论一起探索前端边界。
参考资料 查看全部
chrome插件网页抓取(谷歌浏览器插件开发的核心概念.2.核心知识点.2.1)
前言
由于业务需要，笔者想为公司开发几个实用的浏览器插件，所以花了大约一天的时间阅读了谷歌浏览器插件开发文档，这里专门总结一下经验，并通过一个实战案例评论插件的开发过程及注意事项。
你会收获文字
正文开始之前，先来看看作者总结的概述：
熟悉浏览器插件开发的可以直接看最后一节插件开发实战。
1.开始使用
首先我们看一下浏览器插件的定义：
浏览器插件是基于 Web 技术（例如 HTML、JavaScript 和 CSS）的小型软件程序，可以自定义浏览体验。它们允许用户根据个人需求或偏好自定义 Chrome 功能和行为。
要开发浏览器插件，我们只需要一个 manifest.json 文件。为了快速上手浏览器插件开发，我们需要打开浏览器开发者工具。具体步骤如下：
在谷歌浏览器中输入 chrome://extensions/ 开启开发者模式
导入自己的浏览器插件包
通过以上三步，我们就可以开始浏览器插件的开发之旅了。浏览器插件一般放在浏览器地址栏的右侧。我们可以在 manifest.json 文件中配置插件的图标，并配置一些规则。 , 可以看到我们的浏览器插件图标，如下图：
详细讲解浏览器插件开发的核心概念。
2.核心知识点
浏览器插件一般涉及以下核心文件：
作者画了一张图，粗略的展示了它们之间的关系：
接下来，我们来详细了解几个核心知识点。
2.1 manifest.json
谷歌官网为我们提供了一个简单的配置，如下：
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
各字段含义介绍如下：
文末会给出完整的配置文件地址，供大家学习参考。
2.2 background.js
后台页面主要用于提供一些全局配置、事件监控、业务转发等。举几个常见的案例：
定义右键菜单
// background.js
const systems = {
a: '趣谈前端',
b: '掘金',
c: '微信'
}
chrome.runtime.onInstalled.addListener(function() {
// 上下文菜单
for (let key of Object.keys(systems)) {
chrome.contextMenus.create({
id: key,
title: systems[key],
type: 'normal',
contexts: ['selection'],
});
}
});
// manifest.json
{
"permissions": ["contextMenus"]
}
效果如下：
设置只有后缀为.com的页面才会激活插件
chrome.runtime.onInstalled.addListener(function() {
// 类似于什么时候激活浏览器插件图标这种感觉
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostSuffix: '.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
如下图，当页面地址后缀不等于.com时，插件图标不会被激活：
与 content_script 或弹出页面的消息通信
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
2.3 个内容脚本
内容脚本一般是植入到页面中，可以控制页面中的dom。我们可以用它来屏蔽网页广告、自定义页面皮肤等操作。 manifest.json中的基本配置如下：
{
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"lib/jquery3.4.min.js",
"content_script.js"
],
"css": ["base.css"]
}],
}
在上面的代码中，我们定义了content_scripts允许注入的页面范围，插入页面的js和css，这样我们就可以方便的改变某个页面的样式。例如，我们可以在页面中注入一个按钮：
在下面的浏览器插件案例中，作者将详细介绍content_scripts的用法。
2.4 弹窗
popup 是当用户点击插件图标时打开的一个小窗口。当失去焦点时，窗口立即关闭。我们一般用它来处理一些简单的用户交互和插件指令。
由于弹窗也是一个网页，所以我们一般会创建一个popup.html和popup.js来控制弹窗的显示和交互。我们在 manifest.json 中配置以下内容：
{
"page_action": {
"default_title": "小夕图片提取插件",
"default_popup": "popup.html"
},
}
这里需要注意的一点是，我们不能直接在popup.html中使用脚本脚本，我们需要使用导入脚本文件的方法。如下：
在线图片提取工具
以下是作者写的一个插件的弹窗：
3.沟通机制
对于一个比较复杂的浏览器插件，我们不仅可以操作dom或者提供基础功能，还需要从第三方或者我们自己的服务器抓取有用的页面数据。这次我们需要用到它。这是插件的通信机制。
由于content_script脚本存在于当前页面且受同源策略影响，我们无法将抓取到的数据传输到第三方平台或我们自己的服务器，因此我们需要一个基于浏览器的通信API。这是谷歌浏览器。插件的通信过程：
3.1 Popup 和后台相互通信
从官方文档中我们知道popup是如何直接访问后台页面的，所以popup可以直接与之通信：
// background.js
var getData = (data) => { console.log('拿到数据:' + data) }
// popup.js
let bgObj = chrome.extension.getBackgroundPage();
bgObj.getData(); // 访问bg的函数
3.2 弹出或后台页面和 content_script 通信
这里我们使用chrome的tabs API，如下：
// popup.js
// 发送消息给content_script
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
// 接收消息
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
content_script 接收和发送消息：
// 接收消息
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
// ...
sendResponse({farewell: "激活成功"});
}
});
// 主动发送消息
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response, document.body);
// document.body.style.backgroundColor="orange"
});
谷歌官网也明确写了消息的长连接：
我们可以使用以下方法进行长连接：
// content_script.js
var port = chrome.runtime.connect({name: "徐小夕"});
port.postMessage({Ling: "你好"});
port.onMessage.addListener(function(msg) {
if (msg.question == "你是做什么滴?")
port.postMessage({answer: "搬砖"});
else if (msg.question == "搬砖有钱吗?")
port.postMessage({answer: "木有"});
});
// popup.js
chrome.runtime.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
if (msg.Ling == "你好")
port.postMessage({question: "你是做什么滴?"});
else if (msg.answer == "搬砖")
port.postMessage({question: "搬砖有钱吗?"});
else if (msg.answer == "木有")
port.postMessage({question: "太难了."});
});
});
4.数据存储
chrome.storage 用于为插件全局存储数据。我们在任意一个页面（popup或者content_script或者background）下存储数据，在上面三个页面我们都可以获取到。具体用法如下：
获取数据
chrome.storage.sync.get('imgArr', function(data) {
console.log(data)
});
// 保存数据
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
// 另一种方式
chrome.storage.local.set({key: value}, function() {
console.log('Value is set to ' + value);
});
5.应用场景
谷歌浏览器的插件应用场景很多，如文章开头的思维导图所写。以下是笔者总结的一些应用场景。有兴趣的可以尝试实现一下：
有很多实用的开发工具，大家可以玩玩。接下来，我们通过实现一个网页图片提取插件来总结以下浏览器插件的开发过程。
6.开发一个抓取网站图片资源的浏览器插件
首先，根据作者的风格，我们在开发任何工具之前都要明确需求，那么我们来看看插件的特点：
基本上对于这些功能，我接下来会展示核心代码。在介绍代码之前，先预览一下插件的实现效果：
插件目录结构如下：
因为插件的开发比较简单，所以直接用jquery来开发。这里我们主要关注 popup.js 和 content_script.js。 Popup.js 主要用于获取从 content_script 页面传入的图片数据，并在 popup.html 中显示。还有一点需要注意的是，当页面没有注入生成的按钮时，popupu需要向内容页面发送信息，主动让它生成按钮，代码如下：
chrome.storage.sync.get('imgArr', function(data) {
data.imgArr && data.imgArr.forEach(item => {
var imgWrap = $("")
var img = $("" + item + "")
imgWrap.append(img);
$('#content').append(imgWrap);
$('.empty').hide();
})
});
$('#activeBtn').click(function(element) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
console.log(response);
});
});
});
对于内容页面，我们需要实现的是动态生成按钮，并在页面中植入一个弹窗来显示获取的图片。另一方面，我们需要将图像数据传递给存储，以便弹出页面可以获取图像数据。
由于页面比较简单，所以不需要太多第三方库。我只是先手写一个模态组件。代码如下：
// 弹窗
~function Modal() {
var modal;
if(this instanceof Modal) {
this.init = function(opt) {
modal = $("");
var title = $("" + opt.title + "");
var close_btn = $("X");
var content = $("");
var mask = $("");
close_btn.click(function(){
modal.hide()
})
title.append(close_btn);
content.append(title);
content.append(opt.content);
modal.append(content);
modal.append(mask);
$('body').append(modal);
}
this.show = function(opt) {
if(modal) {
modal.show();
}else {
var options = {
title: opt.title || '标题',
content: opt.content || ''
}
this.init(options)
modal.show();
}
}
this.hide = function() {
modal.hide();
}
}else {
window.Modal = new Modal()
}
}()
第一步，我们先批量获取页面图片数据：
var imgArr = []
$('img').each(function(i) {
var src = $(this).attr('src');
var realSrc = /^(http|https)/.test(src) ? src : location.protocol+ '//' + location.host + src;
imgArr.push(realSrc)
})
因为图片的src路径可能是一个相对地址，所以笔者这里用正则的规则简单处理如下。当然，我们可以进行更细粒度的控制。
第二步是将图片数据存入storage：
chrome.storage.sync.set({'imgArr': imgArr}, function() {
console.log('保存成功');
});
第三步是生成预览图的弹窗，这里我使用了上面实现的模态组件：
Modal.show({
title: '提取结果',
content: imgBox
})
第四步，当popup发送通知激活按钮时，我们需要在网页中动态插入生成的按钮：
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == "activeBtn"){
if(!$('.crawl-btn')) {
$('body').append("提取")
}else {
$('.crawl-btn').css("background-color","orange");
setTimeout(() => {
$('.crawl-btn').css("background-color","#06c");
}, 3000);
}
sendResponse({farewell: "激活成功"});
}
});
setTimeout 段纯粹是为了吸引用户的注意力，当然我们可以用更优雅的方式来处理。
插件的核心代码主要是这些。当然，还有很多细节需要考虑。我把配置文件和一些细节放在github上。有兴趣的可以安装感受一下。
github地址：提取网页图片数据的浏览器插件
终于
如果想学习更多H5游戏、webpack、node、gulp、css3、javascript、nodeJS、canvas数据可视化等前端知识和实战，欢迎在“有趣的前端”学习讨论一起探索前端边界。
参考资料
chrome插件网页抓取( EvernoteWebClipper——超强的笔记剪藏（百度文库） )
网站优化 • 优采云 发表了文章 • 0 个评论 • 65 次浏览 • 2021-12-27 03:08
chrome插件网页抓取(
EvernoteWebClipper——超强的笔记剪藏（百度文库）
)
至于离线安装谷歌插件，只需在设置-更多工具-扩展程序中上传crx文件，记得开启开发者模式，百度就无法使用了！
①Fireshot——超级截图工具
当我们浏览网站时，我们会看到精美的图片。如果我们想截图怎么办？相信很多人都会打开微信或者QQ，截图发送给文件传输助手，保存为图片。老婆太麻烦了。安装这个插件，一键截图，然后保存成png/jpg/pdf格式。您甚至可以将图片直接发送给其他人、将其复制到剪贴板或打印出来。更强大的是，这个插件支持滚动网页长截图，不要太强！
② Grammarly——严格的语法纠错工具
浏览网页当然不仅仅是浏览，您还必须偶尔输入一些内容。该插件用于帮助您检查输入内容的语法。当您看到绿色箭头圆圈转动时，表示插件正在检查您。如果它变成红色，那么我们必须检查，是不是打字错误？插件的英文检查很强，中文检查稍弱！
③Onetab——神奇的标签合并工具
上网的时候，网页越来越冲，标签页也打开越来越多，不仅占用内存，而且看起来特别凌乱。但是，似乎每个选项卡都被使用了，我不想关闭它。我该怎么办？答案是使用Onetab将它们合并为一个标签页，瞬间清爽！
④Evernote Web Clipper——强大的笔记剪切工具（百度文库复制）
开发这个工具的初衷是为了在网页上保存有用的文本段落。后来大家又开发了一个新功能，就是复制百度文库的内容。百度文库、道客巴巴、豆丁等网站不允许我们复制内容。Evernote Web Clipper 再简单不过了。插件会自动解析整个页面的结构，包括广告、文字、网址等，我们只需要剪切隐藏我们需要的内容即可！顺便说一句，图片也很好！
⑤Image Assistant——超牛网页图片提取工具
如果你想下载网站上好看好玩的图片，但又被限制了，这个时候就取出这个插件吧。只需点击提取此页面上的图片，所有图片都无法转义，一键保存到计算机，下次绝对可以使用ppt什么的。还有其他功能，比如为当前页面生成二维码，预制链接等！
查看全部
EvernoteWebClipper——超强的笔记剪藏（百度文库）
)
至于离线安装谷歌插件，只需在设置-更多工具-扩展程序中上传crx文件，记得开启开发者模式，百度就无法使用了！
①Fireshot——超级截图工具
当我们浏览网站时，我们会看到精美的图片。如果我们想截图怎么办？相信很多人都会打开微信或者QQ，截图发送给文件传输助手，保存为图片。老婆太麻烦了。安装这个插件，一键截图，然后保存成png/jpg/pdf格式。您甚至可以将图片直接发送给其他人、将其复制到剪贴板或打印出来。更强大的是，这个插件支持滚动网页长截图，不要太强！
② Grammarly——严格的语法纠错工具
浏览网页当然不仅仅是浏览，您还必须偶尔输入一些内容。该插件用于帮助您检查输入内容的语法。当您看到绿色箭头圆圈转动时，表示插件正在检查您。如果它变成红色，那么我们必须检查，是不是打字错误？插件的英文检查很强，中文检查稍弱！
③Onetab——神奇的标签合并工具
上网的时候，网页越来越冲，标签页也打开越来越多，不仅占用内存，而且看起来特别凌乱。但是，似乎每个选项卡都被使用了，我不想关闭它。我该怎么办？答案是使用Onetab将它们合并为一个标签页，瞬间清爽！
④Evernote Web Clipper——强大的笔记剪切工具（百度文库复制）
开发这个工具的初衷是为了在网页上保存有用的文本段落。后来大家又开发了一个新功能，就是复制百度文库的内容。百度文库、道客巴巴、豆丁等网站不允许我们复制内容。Evernote Web Clipper 再简单不过了。插件会自动解析整个页面的结构，包括广告、文字、网址等，我们只需要剪切隐藏我们需要的内容即可！顺便说一句，图片也很好！
⑤Image Assistant——超牛网页图片提取工具
如果你想下载网站上好看好玩的图片，但又被限制了，这个时候就取出这个插件吧。只需点击提取此页面上的图片，所有图片都无法转义，一键保存到计算机，下次绝对可以使用ppt什么的。还有其他功能，比如为当前页面生成二维码，预制链接等！
查看全部
chrome插件网页抓取(
EvernoteWebClipper——超强的笔记剪藏（百度文库）
)
至于离线安装谷歌插件，只需在设置-更多工具-扩展程序中上传crx文件，记得开启开发者模式，百度就无法使用了！
①Fireshot——超级截图工具
当我们浏览网站时，我们会看到精美的图片。如果我们想截图怎么办？相信很多人都会打开微信或者QQ，截图发送给文件传输助手，保存为图片。老婆太麻烦了。安装这个插件，一键截图，然后保存成png/jpg/pdf格式。您甚至可以将图片直接发送给其他人、将其复制到剪贴板或打印出来。更强大的是，这个插件支持滚动网页长截图，不要太强！
② Grammarly——严格的语法纠错工具
浏览网页当然不仅仅是浏览，您还必须偶尔输入一些内容。该插件用于帮助您检查输入内容的语法。当您看到绿色箭头圆圈转动时，表示插件正在检查您。如果它变成红色，那么我们必须检查，是不是打字错误？插件的英文检查很强，中文检查稍弱！
③Onetab——神奇的标签合并工具
上网的时候，网页越来越冲，标签页也打开越来越多，不仅占用内存，而且看起来特别凌乱。但是，似乎每个选项卡都被使用了，我不想关闭它。我该怎么办？答案是使用Onetab将它们合并为一个标签页，瞬间清爽！
④Evernote Web Clipper——强大的笔记剪切工具（百度文库复制）
开发这个工具的初衷是为了在网页上保存有用的文本段落。后来大家又开发了一个新功能，就是复制百度文库的内容。百度文库、道客巴巴、豆丁等网站不允许我们复制内容。Evernote Web Clipper 再简单不过了。插件会自动解析整个页面的结构，包括广告、文字、网址等，我们只需要剪切隐藏我们需要的内容即可！顺便说一句，图片也很好！
⑤Image Assistant——超牛网页图片提取工具
如果你想下载网站上好看好玩的图片，但又被限制了，这个时候就取出这个插件吧。只需点击提取此页面上的图片，所有图片都无法转义，一键保存到计算机，下次绝对可以使用ppt什么的。还有其他功能，比如为当前页面生成二维码，预制链接等！
chrome插件网页抓取(chrome插件网页抓取chrome扩展下载助手扩展搜索资源大全)
网站优化 • 优采云 发表了文章 • 0 个评论 • 38 次浏览 • 2021-12-23 00:01
chrome插件网页抓取(chrome插件网页抓取chrome扩展下载助手扩展搜索资源大全)
chrome插件网页抓取chrome扩展下载助手v8扩展下载助手更多下载扩展搜索资源大全
作为每日收uber作业的苦逼弱鸡，用v8上谷歌怎么就不算公平了，完全有理由相信，两个99。99%同时发出去的声音是同一个录音，哪怕0。1%，这个录音内容也绝对公平！（先前忘记截图了）这个软件能过人员筛选，让同时发出“58同城搜房”的声音，但不用录制一个人的声音，这个够不够！！用谷歌搜集结果，让大家看同一个结果，一个质量级别好不好！还有什么特殊理由可以让两个人同时录制声音不一样！！。
人人网上传音频就可以
优采云网？
我一般下载有声小说，打开软件然后在里面无限下载对方的声音，小说这种东西如果不是有影视剧组来公司商量，或者国家网站都没有权利过来播放，所以都是自己下载自己的，
给大家推荐的软件都是免费软件，100+免费，如果你只想要打包好的，可以直接联系我。
腾讯音乐盒，不用管版权，
b站，随便搜，
可以尝试一下买海外流量，
我是不是够low？不匿
学小孩子滑滑梯，
论坛好多，但是需要仔细找。
github
b站up主的直播功能。无穷下载bilibili，几十秒不过瘾！有现成的b站直播功能下载， 查看全部
chrome插件网页抓取chrome扩展下载助手v8扩展下载助手更多下载扩展搜索资源大全
作为每日收uber作业的苦逼弱鸡，用v8上谷歌怎么就不算公平了，完全有理由相信，两个99。99%同时发出去的声音是同一个录音，哪怕0。1%，这个录音内容也绝对公平！（先前忘记截图了）这个软件能过人员筛选，让同时发出“58同城搜房”的声音，但不用录制一个人的声音，这个够不够！！用谷歌搜集结果，让大家看同一个结果，一个质量级别好不好！还有什么特殊理由可以让两个人同时录制声音不一样！！。
人人网上传音频就可以
优采云网？
我一般下载有声小说，打开软件然后在里面无限下载对方的声音，小说这种东西如果不是有影视剧组来公司商量，或者国家网站都没有权利过来播放，所以都是自己下载自己的，
给大家推荐的软件都是免费软件，100+免费，如果你只想要打包好的，可以直接联系我。
腾讯音乐盒，不用管版权，
b站，随便搜，
可以尝试一下买海外流量，
我是不是够low？不匿
学小孩子滑滑梯，
论坛好多，但是需要仔细找。
github
b站up主的直播功能。无穷下载bilibili，几十秒不过瘾！有现成的b站直播功能下载， 查看全部
chrome插件网页抓取(chrome插件网页抓取chrome扩展下载助手扩展搜索资源大全)
chrome插件网页抓取chrome扩展下载助手v8扩展下载助手更多下载扩展搜索资源大全
作为每日收uber作业的苦逼弱鸡，用v8上谷歌怎么就不算公平了，完全有理由相信，两个99。99%同时发出去的声音是同一个录音，哪怕0。1%，这个录音内容也绝对公平！（先前忘记截图了）这个软件能过人员筛选，让同时发出“58同城搜房”的声音，但不用录制一个人的声音，这个够不够！！用谷歌搜集结果，让大家看同一个结果，一个质量级别好不好！还有什么特殊理由可以让两个人同时录制声音不一样！！。
人人网上传音频就可以
优采云网？
我一般下载有声小说，打开软件然后在里面无限下载对方的声音，小说这种东西如果不是有影视剧组来公司商量，或者国家网站都没有权利过来播放，所以都是自己下载自己的，
给大家推荐的软件都是免费软件，100+免费，如果你只想要打包好的，可以直接联系我。
腾讯音乐盒，不用管版权，
b站，随便搜，
可以尝试一下买海外流量，
我是不是够low？不匿
学小孩子滑滑梯，
论坛好多，但是需要仔细找。
github
b站up主的直播功能。无穷下载bilibili，几十秒不过瘾！有现成的b站直播功能下载，
chrome插件网页抓取(网页编辑共享神器Chrome插件(screenshottool)(组图))
网站优化 • 优采云 发表了文章 • 0 个评论 • 73 次浏览 • 2021-12-22 03:12
chrome插件网页抓取(网页编辑共享神器Chrome插件(screenshottool)(组图))
Awesome Screenshot-全屏截屏网页编辑分享神器Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。
下载：2020458
Awesome Screenshot-网页截图、批注&注解Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。chrome应用商店中的中文名称是：网页截图：评论&评论
下载：951671
网页截图、截图插件-Nimbus Screenshot Chrome插件
Nimbus Screenshot 是一款 chrome 浏览器插件，用于对网页进行截图。您还可以对屏幕截图进行二次编辑，例如注释。这是一款功能强大且易于使用的截图工具。您可以随意捕捉屏幕的每个角落，也可以选择整个屏幕。截图完成后，有简单的编辑工具对图片进行后期制作，也可以直接将图片保存在Nimbus中。, 电脑或Google Drive，也可以直接打印图片。
下载：244193
截图插件-Lightshot（截图工具）Chrome插件
Lightshot 是一款谷歌浏览器插件，可以帮助用户随时选择网页区域的截图并上传到服务器。它是一款完全免费的截图工具，可以达到快速截图的目的。捕获的图像尺寸更小，质量更好。支持全屏截图、选区截图等常用功能。
下载：231196
谷歌Chrome网页截图、截图插件-网页截图Chrome插件
网页截图是网页快照编辑工具的浏览器扩展工具。支持中文，操作更方便。安装后，您可以快速抓取网页可见范围内的图片或抓取整个网页快照。搭建一个简单的图片编辑器，截取图片后可以编辑截图，或者上传到网页截图网页分享。
下载：68599
插件网页截图
上一篇：lastpass、1password、keeppass这三个密码管理工具哪个更好？哪个更安全？下一篇：谷歌制作免费的谷歌翻译插件 查看全部
Awesome Screenshot-全屏截屏网页编辑分享神器Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。
下载：2020458
Awesome Screenshot-网页截图、批注&注解Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。chrome应用商店中的中文名称是：网页截图：评论&评论
下载：951671
网页截图、截图插件-Nimbus Screenshot Chrome插件
Nimbus Screenshot 是一款 chrome 浏览器插件，用于对网页进行截图。您还可以对屏幕截图进行二次编辑，例如注释。这是一款功能强大且易于使用的截图工具。您可以随意捕捉屏幕的每个角落，也可以选择整个屏幕。截图完成后，有简单的编辑工具对图片进行后期制作，也可以直接将图片保存在Nimbus中。, 电脑或Google Drive，也可以直接打印图片。
下载：244193
截图插件-Lightshot（截图工具）Chrome插件
Lightshot 是一款谷歌浏览器插件，可以帮助用户随时选择网页区域的截图并上传到服务器。它是一款完全免费的截图工具，可以达到快速截图的目的。捕获的图像尺寸更小，质量更好。支持全屏截图、选区截图等常用功能。
下载：231196
谷歌Chrome网页截图、截图插件-网页截图Chrome插件
网页截图是网页快照编辑工具的浏览器扩展工具。支持中文，操作更方便。安装后，您可以快速抓取网页可见范围内的图片或抓取整个网页快照。搭建一个简单的图片编辑器，截取图片后可以编辑截图，或者上传到网页截图网页分享。
下载：68599
插件网页截图
上一篇：lastpass、1password、keeppass这三个密码管理工具哪个更好？哪个更安全？下一篇：谷歌制作免费的谷歌翻译插件 查看全部
chrome插件网页抓取(网页编辑共享神器Chrome插件(screenshottool)(组图))
Awesome Screenshot-全屏截屏网页编辑分享神器Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。
下载：2020458
Awesome Screenshot-网页截图、批注&注解Chrome插件
Awesome screenshot是谷歌Chrome的辅助chrome浏览器插件。这个Google Viewer截图插件功能强大，是一款非常适合chrome用户使用的截图扩展软件。同时，您可以在截图后直接编辑图片。chrome应用商店中的中文名称是：网页截图：评论&评论
下载：951671
网页截图、截图插件-Nimbus Screenshot Chrome插件
Nimbus Screenshot 是一款 chrome 浏览器插件，用于对网页进行截图。您还可以对屏幕截图进行二次编辑，例如注释。这是一款功能强大且易于使用的截图工具。您可以随意捕捉屏幕的每个角落，也可以选择整个屏幕。截图完成后，有简单的编辑工具对图片进行后期制作，也可以直接将图片保存在Nimbus中。, 电脑或Google Drive，也可以直接打印图片。
下载：244193
截图插件-Lightshot（截图工具）Chrome插件
Lightshot 是一款谷歌浏览器插件，可以帮助用户随时选择网页区域的截图并上传到服务器。它是一款完全免费的截图工具，可以达到快速截图的目的。捕获的图像尺寸更小，质量更好。支持全屏截图、选区截图等常用功能。
下载：231196
谷歌Chrome网页截图、截图插件-网页截图Chrome插件
网页截图是网页快照编辑工具的浏览器扩展工具。支持中文，操作更方便。安装后，您可以快速抓取网页可见范围内的图片或抓取整个网页快照。搭建一个简单的图片编辑器，截取图片后可以编辑截图，或者上传到网页截图网页分享。
下载：68599
插件网页截图
上一篇：lastpass、1password、keeppass这三个密码管理工具哪个更好？哪个更安全？下一篇：谷歌制作免费的谷歌翻译插件
chrome插件网页抓取(10款亲测且超实用的Chrome小插件，助设计师更快获取灵感)
网站优化 • 优采云 发表了文章 • 0 个评论 • 65 次浏览 • 2021-12-21 23:16
chrome插件网页抓取(10款亲测且超实用的Chrome小插件，助设计师更快获取灵感)
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。
今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。 查看全部
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。
今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。 查看全部
chrome插件网页抓取(10款亲测且超实用的Chrome小插件，助设计师更快获取灵感)
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。
今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。
chrome插件网页抓取(网页添加富文本编辑器的评分等级及评分标准 )
网站优化 • 优采云 发表了文章 • 0 个评论 • 51 次浏览 • 2021-12-17 11:05
chrome插件网页抓取(网页添加富文本编辑器的评分等级及评分标准
)
Web Developer 是开发者必备的扩展工具。使用 Web Developer 可以让我们轻松获取更多有关网页的信息，并进一步了解当前正在浏览的网页。Web Developer 可以在浏览器支持的任何平台上运行，包括 Windows、Mac OS 和 Linux。Firefox 和 Opera 也可以使用 Web Developer。
下载链接：
12. 页面编辑
当前评分：3/5 星
PageEdit 是一个 Chrome 插件，可以将任何网页变成富文本编辑器。这个扩展工具不仅好用，而且生成的代码也很干净。用户在Chrome中安装PageEdit插件后，可以在打开其他网页时启动PageEdit插件，为当前网页添加富文本编辑器的功能。用户可以使用PageEdit富文本编辑器以博客编辑的形式对普通网页进行编辑，例如在当前网页中添加图片，或者在网页上编辑文字。
下载链接：
13. 码可乐
当前评分：4.5/5 星
Code Cola 是可视化编辑 CSS 的最佳工具之一。而 Code Cola 不仅可以直观地编辑页面的 CSS，它的源代码也可以在 GitHub 上找到。
下载链接：
14. 完美像素
当前评分：4.5/5 星
Perfectpixel是一个非常有用的标记插件，对开发者和标记设计者很有帮助。Perfectpixel 允许您在网页上叠加半透明图像并比较像素与像素。
下载链接：
15. 忘记我
当前评分：3.5/5 星
使用忘记我，您可以删除网站的所有内容，包括：信息记录程序、历史记录、位置和会话存储等所有信息。
只需点击图标，即可永久删除所有您访问过的网站标志；而当你双击该图标时，它只会删除你查看过的特定网站 历史信息程序不会删除其他站点上的所有历史记录，因为它只运行在你地址栏中的页面上。
下载链接：
20. 清除缓存
当前评分：4.5/5 星
借助清除缓存插件，您可以一键快速删除浏览器中的缓存和数据，无需处理烦人的确认对话框、弹窗等繁琐操作。
您甚至可以通过首选项自定义要删除的特定数据，例如：应用程序缓存、信息程序、下载的文件、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码、WebSQL等. 此外，您还可以单独删除一个域名的缓存记录。使用Clear Cache确实很方便。
下载链接：
17. 点击&清理
当前评分：5/5 星
Click&Clean 是 Google Chrome 浏览器的第一个私人数据清理工具。通过 Click&Clean 插件，用户可以选择多种方式来清除 Chrome 中的历史记录。Click&Clean 清洁界面也很新潮。您可以一键删除您键入的 URL、缓存、cookie、下载历史记录和浏览历史记录。Click&Clean 甚至可以删除客户端 Web SQL 数据库、Flash Cookie (LSO) 等。
下载链接：
18. 用户代理切换器
当前评分：4/5 星
User Agent Switcher 是一个可以模拟搜索引擎爬虫的程序。使用模拟Agent访问那些被搜索引擎操纵过的网页，就可以看到真实的内容。
而User Agent Switcher可以让您快速切换浏览器的用户代理（User Agent，UA），实现浏览器的华丽蜕变。无论是伪装成其他平台/品牌的浏览器还是伪装成其他版本的浏览器都没有问题。
下载链接：
19. iMacros for Chrome
当前评分：4/5 星
iMacros for Chrome 是一个插件，可以帮助您填写表单并自动保存它们。当你在 Chrome 中安装 iMacros for Chrome 插件时，该插件会帮你自动记住你输入的表单内容，下次输入时，它会还原这些重复的操作，帮助你改进填写形式的效率节省您的时间。
您有时可能会遇到一些问题，导致无法正确录制宏，但是您可以通过关闭对话框并重新打开对话框或刷新页面来轻松解决问题。
下载链接：
20.分辨率测试
当前评分：4/5 星
Chrome 的 Extension Test，Resolution Test，用于测试浏览器的分辨率。非常方便前端开发。
下载链接：
21. IE 标签扩展
当前评分：4.5/5 星
我们可以通过在 IE 浏览器中使用 IE Tab 扩展来显示网页。这个工具可以让你使用Java、ActiveX、Sharepoint、Silverlight等来测试你的网站在不同版本的IE下是否会退出Chrome。但是，IE Tab 扩展仅适用于 Windows。
下载链接：
22. IE 标签多
当前评分：4.5/5 星
使用 IE Tab Multi 检查您的应用程序或 网站 在 IE 浏览器中的显示。IE Tab Multi 是产生与 IE 最相似行为的工具，它还允许您运行 ActiveX 控件。但它只支持 Windows，在 Windows 8 中它只支持桌面模式。
下载链接：
23. 有效性
当前评分：4/5 星
您可以通过单击浏览器地址栏中的图标，使用 Validity 扩展程序快速验证您的代码。要使用有效性，只需单击工具栏中的图标即可验证当前 HTML 文档，而无需离开页面。
下载链接：
24. YSlow
当前评分：4/5 星
YSlow 是一个基于 FireFox 的插件。这个插件可以分析网站的页面，它会告诉你如何根据一定的规则优化网站以提高网站的性能。
下载链接：
25. 铬道尔顿化！
当前评分：4/5 星
使用 Chrome Daltonize！您可以测试您的应用程序和网页的可用性是否存在色盲问题。铬道尔顿化！使用两种不同的过滤器，您可以想象元素如何出现在色盲人群面前。
下载链接：
26. 检查我的链接
当前评分：4/5 星
对于网页开发者来说，基本上每完成一个页面，就要检查页面中的每个链接是否有超链接。这时候你需要检查我的链接。您只需在要查看的网页上单击“查看我的链接”图标，它就会自动开始查看。未选中的链接为黑色，活动链接为绿色，死链接以红色突出显示。这些会在页面的右上角进行统计显示，会显示当前的检查进度、活链接数、死链接数。
下载链接：
27. 截止日期后
当前评分：4/5 星
After the Deadline 使用人工智能来评估您的拼写、风格和语法。您只需点击可编辑区右下角的ABC图标即可完成拼写、语法和风格的评估。
下载链接：
28. 很棒的截图
当前评分：4.5/5 星
Awesome Screenshot 是一个易于使用的扩展工具。它可以快速抓取您想要共享或保存的任何屏幕截图，并且可以抓取全屏或部分屏幕。您还可以添加注释和评论，发表评论，并在分享前发表评论。掩盖个人或敏感信息等。
下载链接：
29. 剪辑
当前评分：4/5 星
Clipular 是另一个用于抓取屏幕的 Chrome 扩展工具。它本质上是一个带有书签的截图工具。与 Awesome Screenshot 一样，clipular 可以快速抓取您想要分享或保存的任何屏幕截图，并自动将您的剪辑保存在 Google Drive 上。
使用clipular时，可以双击ALT，点击并拖动要截屏的区域，会出现几个选项，包括：共享、下载、备份到Google Drive等。
下载链接：
30. 桶
当前评分：4.5/5 星
bukket 是一个非常容易使用的 Chrome 扩展器。它可以截屏并记录屏幕。Bukket 使“使用简单可靠的视觉书签工具从浏览器中捕获和记录 GIF 动画”成为可能。
下载链接：
31. 狨猴
当前评分：5/5 星
Marmoset 可以帮助您在短短几秒钟内制作代码截图、输出线框和标记代码。此外，您可以将主题和其他效果作为快照添加到您的个人介绍中。
下载链接：
32. 网络定时器
当前评分：4.5/5 星
使用 Web Timer 查看您如何使用在线时间。它会跟踪你经常使用的标签，每三分钟更新一次，让你清楚地知道自己在什么地方投资或浪费的时间最多。您的数据会以直观的饼状图展示，方便您直观的看到自己的时间分配，帮助您更好地复习，从而提高您上网时的专注力和效率。
下载链接：
33. Lorem Ipsum 生成器
当前评分：4/5 星
使用 Lorem Ipsum Generator 创建虚拟文本并将其放置在您的 网站 或应用程序中，既快捷又方便，还避免了重复的剪切和粘贴工作。Lorem Ipsum Generator 的目的是使这个过程更简单、更快捷。此外，为了让 Lorem Ipsum 更快地使用，有时需要对其进行刷新。
下载链接：
34. 链接群
当前评分：5/5 星
Linkclump 是一个扩展工具，用于批量打开网页中的多个链接。您只需要用鼠标拖动并选择所有要打开的链接，即可在LinkClump 的新选项卡和窗口中一次性打开它们。同时您还可以将它们保存为书签、复制到剪贴板等。Linkclump 的源代码可以在 GitHub 上找到，使用它将使您对任何项目的研究更加有效。
下载链接：
35. 自动分页
当前评分：4/5 星
使用 AutoPagerize 允许您在一页中加载子页面。这个方便直观的小工具使网页浏览更加高效。
下载链接：
36. 会话管理器
当前评分：3.5/5 星
会话管理器允许您随时快速轻松地保存当前浏览器状态，并允许您在需要时立即备份所有选项卡。同时，Session Manager 还有助于对 网站 进行分组，例如采集社交媒体资料、与某些项目相关的标签等。
下载链接：
37. 最后一关
当前评分：4.5/5 星
如果您在每个站点上设置的密码都不一样，那么您可能不记得需要使用的这么多站点的密码和登录帐户。如果您使用 LastPass，您只需要记住一个安全的密码即可解决上述问题。
下载链接：
38. 调整标签大小
查看全部
)
Web Developer 是开发者必备的扩展工具。使用 Web Developer 可以让我们轻松获取更多有关网页的信息，并进一步了解当前正在浏览的网页。Web Developer 可以在浏览器支持的任何平台上运行，包括 Windows、Mac OS 和 Linux。Firefox 和 Opera 也可以使用 Web Developer。
下载链接：
12. 页面编辑
当前评分：3/5 星
PageEdit 是一个 Chrome 插件，可以将任何网页变成富文本编辑器。这个扩展工具不仅好用，而且生成的代码也很干净。用户在Chrome中安装PageEdit插件后，可以在打开其他网页时启动PageEdit插件，为当前网页添加富文本编辑器的功能。用户可以使用PageEdit富文本编辑器以博客编辑的形式对普通网页进行编辑，例如在当前网页中添加图片，或者在网页上编辑文字。
下载链接：
13. 码可乐
当前评分：4.5/5 星
Code Cola 是可视化编辑 CSS 的最佳工具之一。而 Code Cola 不仅可以直观地编辑页面的 CSS，它的源代码也可以在 GitHub 上找到。
下载链接：
14. 完美像素
当前评分：4.5/5 星
Perfectpixel是一个非常有用的标记插件，对开发者和标记设计者很有帮助。Perfectpixel 允许您在网页上叠加半透明图像并比较像素与像素。
下载链接：
15. 忘记我
当前评分：3.5/5 星
使用忘记我，您可以删除网站的所有内容，包括：信息记录程序、历史记录、位置和会话存储等所有信息。
只需点击图标，即可永久删除所有您访问过的网站标志；而当你双击该图标时，它只会删除你查看过的特定网站 历史信息程序不会删除其他站点上的所有历史记录，因为它只运行在你地址栏中的页面上。
下载链接：
20. 清除缓存
当前评分：4.5/5 星
借助清除缓存插件，您可以一键快速删除浏览器中的缓存和数据，无需处理烦人的确认对话框、弹窗等繁琐操作。
您甚至可以通过首选项自定义要删除的特定数据，例如：应用程序缓存、信息程序、下载的文件、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码、WebSQL等. 此外，您还可以单独删除一个域名的缓存记录。使用Clear Cache确实很方便。
下载链接：
17. 点击&清理
当前评分：5/5 星
Click&Clean 是 Google Chrome 浏览器的第一个私人数据清理工具。通过 Click&Clean 插件，用户可以选择多种方式来清除 Chrome 中的历史记录。Click&Clean 清洁界面也很新潮。您可以一键删除您键入的 URL、缓存、cookie、下载历史记录和浏览历史记录。Click&Clean 甚至可以删除客户端 Web SQL 数据库、Flash Cookie (LSO) 等。
下载链接：
18. 用户代理切换器
当前评分：4/5 星
User Agent Switcher 是一个可以模拟搜索引擎爬虫的程序。使用模拟Agent访问那些被搜索引擎操纵过的网页，就可以看到真实的内容。
而User Agent Switcher可以让您快速切换浏览器的用户代理（User Agent，UA），实现浏览器的华丽蜕变。无论是伪装成其他平台/品牌的浏览器还是伪装成其他版本的浏览器都没有问题。
下载链接：
19. iMacros for Chrome
当前评分：4/5 星
iMacros for Chrome 是一个插件，可以帮助您填写表单并自动保存它们。当你在 Chrome 中安装 iMacros for Chrome 插件时，该插件会帮你自动记住你输入的表单内容，下次输入时，它会还原这些重复的操作，帮助你改进填写形式的效率节省您的时间。
您有时可能会遇到一些问题，导致无法正确录制宏，但是您可以通过关闭对话框并重新打开对话框或刷新页面来轻松解决问题。
下载链接：
20.分辨率测试
当前评分：4/5 星
Chrome 的 Extension Test，Resolution Test，用于测试浏览器的分辨率。非常方便前端开发。
下载链接：
21. IE 标签扩展
当前评分：4.5/5 星
我们可以通过在 IE 浏览器中使用 IE Tab 扩展来显示网页。这个工具可以让你使用Java、ActiveX、Sharepoint、Silverlight等来测试你的网站在不同版本的IE下是否会退出Chrome。但是，IE Tab 扩展仅适用于 Windows。
下载链接：
22. IE 标签多
当前评分：4.5/5 星
使用 IE Tab Multi 检查您的应用程序或 网站 在 IE 浏览器中的显示。IE Tab Multi 是产生与 IE 最相似行为的工具，它还允许您运行 ActiveX 控件。但它只支持 Windows，在 Windows 8 中它只支持桌面模式。
下载链接：
23. 有效性
当前评分：4/5 星
您可以通过单击浏览器地址栏中的图标，使用 Validity 扩展程序快速验证您的代码。要使用有效性，只需单击工具栏中的图标即可验证当前 HTML 文档，而无需离开页面。
下载链接：
24. YSlow
当前评分：4/5 星
YSlow 是一个基于 FireFox 的插件。这个插件可以分析网站的页面，它会告诉你如何根据一定的规则优化网站以提高网站的性能。
下载链接：
25. 铬道尔顿化！
当前评分：4/5 星
使用 Chrome Daltonize！您可以测试您的应用程序和网页的可用性是否存在色盲问题。铬道尔顿化！使用两种不同的过滤器，您可以想象元素如何出现在色盲人群面前。
下载链接：
26. 检查我的链接
当前评分：4/5 星
对于网页开发者来说，基本上每完成一个页面，就要检查页面中的每个链接是否有超链接。这时候你需要检查我的链接。您只需在要查看的网页上单击“查看我的链接”图标，它就会自动开始查看。未选中的链接为黑色，活动链接为绿色，死链接以红色突出显示。这些会在页面的右上角进行统计显示，会显示当前的检查进度、活链接数、死链接数。
下载链接：
27. 截止日期后
当前评分：4/5 星
After the Deadline 使用人工智能来评估您的拼写、风格和语法。您只需点击可编辑区右下角的ABC图标即可完成拼写、语法和风格的评估。
下载链接：
28. 很棒的截图
当前评分：4.5/5 星
Awesome Screenshot 是一个易于使用的扩展工具。它可以快速抓取您想要共享或保存的任何屏幕截图，并且可以抓取全屏或部分屏幕。您还可以添加注释和评论，发表评论，并在分享前发表评论。掩盖个人或敏感信息等。
下载链接：
29. 剪辑
当前评分：4/5 星
Clipular 是另一个用于抓取屏幕的 Chrome 扩展工具。它本质上是一个带有书签的截图工具。与 Awesome Screenshot 一样，clipular 可以快速抓取您想要分享或保存的任何屏幕截图，并自动将您的剪辑保存在 Google Drive 上。
使用clipular时，可以双击ALT，点击并拖动要截屏的区域，会出现几个选项，包括：共享、下载、备份到Google Drive等。
下载链接：
30. 桶
当前评分：4.5/5 星
bukket 是一个非常容易使用的 Chrome 扩展器。它可以截屏并记录屏幕。Bukket 使“使用简单可靠的视觉书签工具从浏览器中捕获和记录 GIF 动画”成为可能。
下载链接：
31. 狨猴
当前评分：5/5 星
Marmoset 可以帮助您在短短几秒钟内制作代码截图、输出线框和标记代码。此外，您可以将主题和其他效果作为快照添加到您的个人介绍中。
下载链接：
32. 网络定时器
当前评分：4.5/5 星
使用 Web Timer 查看您如何使用在线时间。它会跟踪你经常使用的标签，每三分钟更新一次，让你清楚地知道自己在什么地方投资或浪费的时间最多。您的数据会以直观的饼状图展示，方便您直观的看到自己的时间分配，帮助您更好地复习，从而提高您上网时的专注力和效率。
下载链接：
33. Lorem Ipsum 生成器
当前评分：4/5 星
使用 Lorem Ipsum Generator 创建虚拟文本并将其放置在您的 网站 或应用程序中，既快捷又方便，还避免了重复的剪切和粘贴工作。Lorem Ipsum Generator 的目的是使这个过程更简单、更快捷。此外，为了让 Lorem Ipsum 更快地使用，有时需要对其进行刷新。
下载链接：
34. 链接群
当前评分：5/5 星
Linkclump 是一个扩展工具，用于批量打开网页中的多个链接。您只需要用鼠标拖动并选择所有要打开的链接，即可在LinkClump 的新选项卡和窗口中一次性打开它们。同时您还可以将它们保存为书签、复制到剪贴板等。Linkclump 的源代码可以在 GitHub 上找到，使用它将使您对任何项目的研究更加有效。
下载链接：
35. 自动分页
当前评分：4/5 星
使用 AutoPagerize 允许您在一页中加载子页面。这个方便直观的小工具使网页浏览更加高效。
下载链接：
36. 会话管理器
当前评分：3.5/5 星
会话管理器允许您随时快速轻松地保存当前浏览器状态，并允许您在需要时立即备份所有选项卡。同时，Session Manager 还有助于对 网站 进行分组，例如采集社交媒体资料、与某些项目相关的标签等。
下载链接：
37. 最后一关
当前评分：4.5/5 星
如果您在每个站点上设置的密码都不一样，那么您可能不记得需要使用的这么多站点的密码和登录帐户。如果您使用 LastPass，您只需要记住一个安全的密码即可解决上述问题。
下载链接：
38. 调整标签大小
查看全部
chrome插件网页抓取(网页添加富文本编辑器的评分等级及评分标准
)
Web Developer 是开发者必备的扩展工具。使用 Web Developer 可以让我们轻松获取更多有关网页的信息，并进一步了解当前正在浏览的网页。Web Developer 可以在浏览器支持的任何平台上运行，包括 Windows、Mac OS 和 Linux。Firefox 和 Opera 也可以使用 Web Developer。
下载链接：
12. 页面编辑
当前评分：3/5 星
PageEdit 是一个 Chrome 插件，可以将任何网页变成富文本编辑器。这个扩展工具不仅好用，而且生成的代码也很干净。用户在Chrome中安装PageEdit插件后，可以在打开其他网页时启动PageEdit插件，为当前网页添加富文本编辑器的功能。用户可以使用PageEdit富文本编辑器以博客编辑的形式对普通网页进行编辑，例如在当前网页中添加图片，或者在网页上编辑文字。
下载链接：
13. 码可乐
当前评分：4.5/5 星
Code Cola 是可视化编辑 CSS 的最佳工具之一。而 Code Cola 不仅可以直观地编辑页面的 CSS，它的源代码也可以在 GitHub 上找到。
下载链接：
14. 完美像素
当前评分：4.5/5 星
Perfectpixel是一个非常有用的标记插件，对开发者和标记设计者很有帮助。Perfectpixel 允许您在网页上叠加半透明图像并比较像素与像素。
下载链接：
15. 忘记我
当前评分：3.5/5 星
使用忘记我，您可以删除网站的所有内容，包括：信息记录程序、历史记录、位置和会话存储等所有信息。
只需点击图标，即可永久删除所有您访问过的网站标志；而当你双击该图标时，它只会删除你查看过的特定网站 历史信息程序不会删除其他站点上的所有历史记录，因为它只运行在你地址栏中的页面上。
下载链接：
20. 清除缓存
当前评分：4.5/5 星
借助清除缓存插件，您可以一键快速删除浏览器中的缓存和数据，无需处理烦人的确认对话框、弹窗等繁琐操作。
您甚至可以通过首选项自定义要删除的特定数据，例如：应用程序缓存、信息程序、下载的文件、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码、WebSQL等. 此外，您还可以单独删除一个域名的缓存记录。使用Clear Cache确实很方便。
下载链接：
17. 点击&清理
当前评分：5/5 星
Click&Clean 是 Google Chrome 浏览器的第一个私人数据清理工具。通过 Click&Clean 插件，用户可以选择多种方式来清除 Chrome 中的历史记录。Click&Clean 清洁界面也很新潮。您可以一键删除您键入的 URL、缓存、cookie、下载历史记录和浏览历史记录。Click&Clean 甚至可以删除客户端 Web SQL 数据库、Flash Cookie (LSO) 等。
下载链接：
18. 用户代理切换器
当前评分：4/5 星
User Agent Switcher 是一个可以模拟搜索引擎爬虫的程序。使用模拟Agent访问那些被搜索引擎操纵过的网页，就可以看到真实的内容。
而User Agent Switcher可以让您快速切换浏览器的用户代理（User Agent，UA），实现浏览器的华丽蜕变。无论是伪装成其他平台/品牌的浏览器还是伪装成其他版本的浏览器都没有问题。
下载链接：
19. iMacros for Chrome
当前评分：4/5 星
iMacros for Chrome 是一个插件，可以帮助您填写表单并自动保存它们。当你在 Chrome 中安装 iMacros for Chrome 插件时，该插件会帮你自动记住你输入的表单内容，下次输入时，它会还原这些重复的操作，帮助你改进填写形式的效率节省您的时间。
您有时可能会遇到一些问题，导致无法正确录制宏，但是您可以通过关闭对话框并重新打开对话框或刷新页面来轻松解决问题。
下载链接：
20.分辨率测试
当前评分：4/5 星
Chrome 的 Extension Test，Resolution Test，用于测试浏览器的分辨率。非常方便前端开发。
下载链接：
21. IE 标签扩展
当前评分：4.5/5 星
我们可以通过在 IE 浏览器中使用 IE Tab 扩展来显示网页。这个工具可以让你使用Java、ActiveX、Sharepoint、Silverlight等来测试你的网站在不同版本的IE下是否会退出Chrome。但是，IE Tab 扩展仅适用于 Windows。
下载链接：
22. IE 标签多
当前评分：4.5/5 星
使用 IE Tab Multi 检查您的应用程序或 网站 在 IE 浏览器中的显示。IE Tab Multi 是产生与 IE 最相似行为的工具，它还允许您运行 ActiveX 控件。但它只支持 Windows，在 Windows 8 中它只支持桌面模式。
下载链接：
23. 有效性
当前评分：4/5 星
您可以通过单击浏览器地址栏中的图标，使用 Validity 扩展程序快速验证您的代码。要使用有效性，只需单击工具栏中的图标即可验证当前 HTML 文档，而无需离开页面。
下载链接：
24. YSlow
当前评分：4/5 星
YSlow 是一个基于 FireFox 的插件。这个插件可以分析网站的页面，它会告诉你如何根据一定的规则优化网站以提高网站的性能。
下载链接：
25. 铬道尔顿化！
当前评分：4/5 星
使用 Chrome Daltonize！您可以测试您的应用程序和网页的可用性是否存在色盲问题。铬道尔顿化！使用两种不同的过滤器，您可以想象元素如何出现在色盲人群面前。
下载链接：
26. 检查我的链接
当前评分：4/5 星
对于网页开发者来说，基本上每完成一个页面，就要检查页面中的每个链接是否有超链接。这时候你需要检查我的链接。您只需在要查看的网页上单击“查看我的链接”图标，它就会自动开始查看。未选中的链接为黑色，活动链接为绿色，死链接以红色突出显示。这些会在页面的右上角进行统计显示，会显示当前的检查进度、活链接数、死链接数。
下载链接：
27. 截止日期后
当前评分：4/5 星
After the Deadline 使用人工智能来评估您的拼写、风格和语法。您只需点击可编辑区右下角的ABC图标即可完成拼写、语法和风格的评估。
下载链接：
28. 很棒的截图
当前评分：4.5/5 星
Awesome Screenshot 是一个易于使用的扩展工具。它可以快速抓取您想要共享或保存的任何屏幕截图，并且可以抓取全屏或部分屏幕。您还可以添加注释和评论，发表评论，并在分享前发表评论。掩盖个人或敏感信息等。
下载链接：
29. 剪辑
当前评分：4/5 星
Clipular 是另一个用于抓取屏幕的 Chrome 扩展工具。它本质上是一个带有书签的截图工具。与 Awesome Screenshot 一样，clipular 可以快速抓取您想要分享或保存的任何屏幕截图，并自动将您的剪辑保存在 Google Drive 上。
使用clipular时，可以双击ALT，点击并拖动要截屏的区域，会出现几个选项，包括：共享、下载、备份到Google Drive等。
下载链接：
30. 桶
当前评分：4.5/5 星
bukket 是一个非常容易使用的 Chrome 扩展器。它可以截屏并记录屏幕。Bukket 使“使用简单可靠的视觉书签工具从浏览器中捕获和记录 GIF 动画”成为可能。
下载链接：
31. 狨猴
当前评分：5/5 星
Marmoset 可以帮助您在短短几秒钟内制作代码截图、输出线框和标记代码。此外，您可以将主题和其他效果作为快照添加到您的个人介绍中。
下载链接：
32. 网络定时器
当前评分：4.5/5 星
使用 Web Timer 查看您如何使用在线时间。它会跟踪你经常使用的标签，每三分钟更新一次，让你清楚地知道自己在什么地方投资或浪费的时间最多。您的数据会以直观的饼状图展示，方便您直观的看到自己的时间分配，帮助您更好地复习，从而提高您上网时的专注力和效率。
下载链接：
33. Lorem Ipsum 生成器
当前评分：4/5 星
使用 Lorem Ipsum Generator 创建虚拟文本并将其放置在您的 网站 或应用程序中，既快捷又方便，还避免了重复的剪切和粘贴工作。Lorem Ipsum Generator 的目的是使这个过程更简单、更快捷。此外，为了让 Lorem Ipsum 更快地使用，有时需要对其进行刷新。
下载链接：
34. 链接群
当前评分：5/5 星
Linkclump 是一个扩展工具，用于批量打开网页中的多个链接。您只需要用鼠标拖动并选择所有要打开的链接，即可在LinkClump 的新选项卡和窗口中一次性打开它们。同时您还可以将它们保存为书签、复制到剪贴板等。Linkclump 的源代码可以在 GitHub 上找到，使用它将使您对任何项目的研究更加有效。
下载链接：
35. 自动分页
当前评分：4/5 星
使用 AutoPagerize 允许您在一页中加载子页面。这个方便直观的小工具使网页浏览更加高效。
下载链接：
36. 会话管理器
当前评分：3.5/5 星
会话管理器允许您随时快速轻松地保存当前浏览器状态，并允许您在需要时立即备份所有选项卡。同时，Session Manager 还有助于对 网站 进行分组，例如采集社交媒体资料、与某些项目相关的标签等。
下载链接：
37. 最后一关
当前评分：4.5/5 星
如果您在每个站点上设置的密码都不一样，那么您可能不记得需要使用的这么多站点的密码和登录帐户。如果您使用 LastPass，您只需要记住一个安全的密码即可解决上述问题。
下载链接：
38. 调整标签大小
chrome插件网页抓取(浏览器中为收集或存储有关任何个人用户的信息不使用持久存储)
网站优化 • 优采云 发表了文章 • 0 个评论 • 44 次浏览 • 2021-12-15 15:00
chrome插件网页抓取(浏览器中为收集或存储有关任何个人用户的信息不使用持久存储)
此扩展程序允许您直接在浏览器中为任何公共 网站 生成站点地图。生成站点地图时，扩展会渲染网页并等待javascript加载，非常适合抓取使用angular、react等制作的动态单页应用。
这个扩展的工作原理是获取一些起始 URL，抓取页面以获得更多链接，然后递归地抓取这些页面以获得更多链接。检查找到的所有链接后，扩展程序将输出一个站点地图文件。
这种实现对于收录数万页的 网站 来说是不切实际的。但是，它可以在合理的时间内抓取数千个条目。
================================
隐私政策
================================
此应用程序不会采集或存储有关任何个人用户的信息。
此应用程序不使用持久存储。所有应用
数据仅保存在运行系统内存中。
当应用程序运行时，它将为特定域的用户生成站点地图
它已被选中，并且只有在用户明确授予这样做的权限之后。
应用程序执行结束后，所有数据和生成的站点地图
一旦内存被回收，它就会丢失。
此应用程序可能会采集匿名和汇总使用情况
根据谷歌分析tos数据改善用户体验
并确定关键功能。同样，这些信息不是
识别个人用户并遵循 GA tos 查看全部
此扩展程序允许您直接在浏览器中为任何公共 网站 生成站点地图。生成站点地图时，扩展会渲染网页并等待javascript加载，非常适合抓取使用angular、react等制作的动态单页应用。
这个扩展的工作原理是获取一些起始 URL，抓取页面以获得更多链接，然后递归地抓取这些页面以获得更多链接。检查找到的所有链接后，扩展程序将输出一个站点地图文件。
这种实现对于收录数万页的 网站 来说是不切实际的。但是，它可以在合理的时间内抓取数千个条目。
================================
隐私政策
================================
此应用程序不会采集或存储有关任何个人用户的信息。
此应用程序不使用持久存储。所有应用
数据仅保存在运行系统内存中。
当应用程序运行时，它将为特定域的用户生成站点地图
它已被选中，并且只有在用户明确授予这样做的权限之后。
应用程序执行结束后，所有数据和生成的站点地图
一旦内存被回收，它就会丢失。
此应用程序可能会采集匿名和汇总使用情况
根据谷歌分析tos数据改善用户体验
并确定关键功能。同样，这些信息不是
识别个人用户并遵循 GA tos 查看全部
chrome插件网页抓取(浏览器中为收集或存储有关任何个人用户的信息不使用持久存储)
此扩展程序允许您直接在浏览器中为任何公共 网站 生成站点地图。生成站点地图时，扩展会渲染网页并等待javascript加载，非常适合抓取使用angular、react等制作的动态单页应用。
这个扩展的工作原理是获取一些起始 URL，抓取页面以获得更多链接，然后递归地抓取这些页面以获得更多链接。检查找到的所有链接后，扩展程序将输出一个站点地图文件。
这种实现对于收录数万页的 网站 来说是不切实际的。但是，它可以在合理的时间内抓取数千个条目。
================================
隐私政策
================================
此应用程序不会采集或存储有关任何个人用户的信息。
此应用程序不使用持久存储。所有应用
数据仅保存在运行系统内存中。
当应用程序运行时，它将为特定域的用户生成站点地图
它已被选中，并且只有在用户明确授予这样做的权限之后。
应用程序执行结束后，所有数据和生成的站点地图
一旦内存被回收，它就会丢失。
此应用程序可能会采集匿名和汇总使用情况
根据谷歌分析tos数据改善用户体验
并确定关键功能。同样，这些信息不是
识别个人用户并遵循 GA tos
chrome插件网页抓取( 10款亲测且超实用的Chrome小插件，助设计师更快获取灵感 )
网站优化 • 优采云 发表了文章 • 0 个评论 • 70 次浏览 • 2021-12-14 06:06
chrome插件网页抓取(
10款亲测且超实用的Chrome小插件，助设计师更快获取灵感
)
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
玩
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。
查看全部
10款亲测且超实用的Chrome小插件，助设计师更快获取灵感
)
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
玩
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。
查看全部
chrome插件网页抓取(
10款亲测且超实用的Chrome小插件，助设计师更快获取灵感
)
对于设计师来说，利用好一些小工具或者插件可以提高我们的工作效率。这些新的技巧、窍门和工具是每个设计师都在不断寻找的。今天给大家分享一波。这些都是与Chrome扩展程序相关的插件。善用为Chrome设计的各种扩展小插件，可以显着提升Chrome的性能，帮助设计师更快的获得灵感和学习技能。
为了方便您选择，下面小编将为您介绍10款经过亲测、超实用的Chrome插件。我希望它能对你有所帮助。
1. Windows Resizer
窗口调整器
或许屏幕另一边的你恰好是设计师，用一台27英寸5K屏的iMac阅读了这篇文章。但对于大多数设计师来说，并不是所有人都有机会用这么大分辨率的屏幕电脑查看各种网页设计或者文章。这个时候他们应该怎么做？
别担心！试试适用于 Windows Resizer 的 Chrome 插件！当设计师需要以不同的分辨率查看网页设计时，这个插件绝对有用。设计者打开插件，预设或自定义相关视口，即可轻松查看对应的网页显示。操作简单易用，是不可多得的好工具。
2. 织机
录制视频工具
设计师常说：“一张好图胜过千言万语”。那么，如果您将视频直接添加到您的设计中呢？它能否击败数千万甚至更多的语言？答案显然是肯定的。
而 Loom 就是这样一个工具，可以帮助设计师轻松免费地录制视频。使用此工具，任何网页动画、用户流程和错误操作状态都可以轻松录制为视频并与其他同事共享。
事实上，在过去的几个月里，我经常使用这个工具，并清楚地意识到当截图不再能够准确传达设计相关的要求或建议时，使用这个工具记录屏幕进行解释。
设计师安装插件后，只需点击“录制”按钮即可开始内容录制。录制完成后，可以方便的分享给其他同事或客户，及时采集设计相关的建议和反馈，非常好用。
3. 玩具箱
玩具盒
在网页设计过程中，您是否还在为需要花费大量时间一个一个检测页面元素、截图并记录相关错误或Bug而烦恼吗？别担心！试试玩具箱工具！作为一款可以帮助用户快速检查网页CSS代码，并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮助您轻松解决此类问题。
更简单的说，你可以直接把 Toybox 看作是一个类似于 InVision 的设计审查工具和 Zeplin 中的一个页面检查工具。唯一的区别是该工具支持直接在网页上而不是在设计草稿上添加评论或反馈。
此外，在添加相关设计意见或反馈时，该工具还支持自动截图并记录相关bug信息（如浏览器信息、操作系统信息、视口大小信息等），方便此类问题的后期处理，轻松并且很容易。现在相关问题。
简而言之，它是任何产品团队或设计工作室都不应错过的 Chrome 扩展工具。
玩
4. 穆兹利
快速查看最新最好的设计
作为设计师，您是否想利用每天碎片化的时间随时随地查看最新的设计作品，获取设计灵感？为什么不尝试为 Chrome 安装一个 Muzli 插件！这样，每次打开Chrome浏览器，都可以快速查看最新最好的设计。为什么？因为Mulzli工具会自动从众多最新的网页设计资源中，自动挑选出最好最有创意的部分进行展示，让大家都可以查看并获得灵感。
事实上，我已经使用这个工具很多年了，我真的强烈推荐给大家。
5. SVG 抓取器
SVG 抓取器
浏览网页时，如果只想截取页面上的某个标志或图标进行设计，SVG Grabber 工具值得一试。只需单击开始按钮，该工具就会自动提取页面上的所有 SVG 图像。然后轻松查看，并选择所需的 SVG 图像进行下载。
诚然，这个 Chrome 插件并不是一个常见的设计工具。但是，当确实需要截取相似的logo或图标来优化设计时，它是必不可少的。因此，将其作为设计备份工具存储也是极好的。
6. 页面标尺
准确测量网页元素
如果您正在寻找可以准确测量网页元素大小的工具，请尝试使用 Page Ruler 的 Chrome 插件。只需打开插件，拖动边框选择需要的部分，即可立即查看其长、宽、边距等属性数据。无需过多操作，简单易用，值得一试。
7. 暗模式开发工具
暗模式开发工具
如今，深色模式已成为设计师必备的网页设计和查看模式。因此，小编在这里为大家分享一个名为“Dark Mode Dev Tools”的暗模式创建工具。虽然严格来说Dev Tools只是Chrome的一个内置工具，并不是真正的插件工具。但是实用性方面，小编觉得还是有必要分享一下的。
您可以通过以下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标>选择“设置”>打开“外观”部分，然后切换到深色模式。这样就可以在深色模式下查看网页DOM了。
8. ColorZilla
颜色选择器
当您需要在 Chrome 浏览器下快速查看任何网页使用的颜色或配色方案时，ColorZilla 取色工具将是您的绝佳选择。安装该工具后，将鼠标悬停在任何网页元素上，即可快速查看相关的 HEX 和 RGB 颜色值。必要时，只需点击复制粘贴相关颜色信息，直接将其应用到所需的设计项目或文档中。总之，这款专为Chrome设计的取色工具简单、快捷、高效，值得设计师们下载使用。
此外，该工具还自带其他高效的色彩功能，如渐变CSS代码生成功能、页面颜色分析功能等，大家可以自行下载试用。
9. 字体忍者
字体提取工具
接下来小编将介绍另一个非常值得下载的Chrome插件工具——Fontface Ninja。是一款非常漂亮实用的字体提取工具。安装成功后，用户可以将鼠标悬停在相关页面文字上，查看对应的字体样式。总之，是一款非常值得设计师采集的工具。
10. 自定义光标
光标编辑工具
Custom Cursor 作为一款超实用的光标编辑工具，并不是为设计师设计的。但它是一个尖叫的工具。它允许用户根据自己的喜好修改默认的光标样式，甚至支持上传本地图片来自定义界面光标。总之，它是一个非常有趣和新颖的 Chrome 插件工具。
以上就是我为大家采集的10个超级好用的Chrome插件。我希望它们可以为您的设计工作提供便利，并帮助您制作出更好的设计作品。
chrome插件网页抓取(Chrome插件轻松实现，直接访问网站logo图片 )
网站优化 • 优采云 发表了文章 • 0 个评论 • 68 次浏览 • 2021-12-10 01:16
chrome插件网页抓取(Chrome插件轻松实现，直接访问网站logo图片
)
我们在发布一些内容的时候，经常需要用到一些知名公司或者品牌的logo图片。最直接的方法是找到品牌官网，或者上百度图片或者谷歌图片。但并不是每个品牌或者网站都能找到相关的logo图片，有些网上画廊可能没有很标准的品牌LOGO图片。今天给大家介绍一个Chrome插件，方便实现，或者直接访问网站操作。
插件名称：Logo Grabber
官网：
下载地址：点击进入
插件介绍：获取任意网站LOGO，Logo Grabber 是一款免费的浏览器扩展，可以让您快速抓取任何网站 的正确格式的logo。对于网站无法看到和捕获徽标的许多情况尤其有用。
Logo Grabber 使用 Oqtor API 相关技术，在最短的时间内获取最正确的 Logo 图案。徽标抓取器可节省时间和精力。
如何使用
这里，我用官方Logo Grabber网站截取爱绿豆logo进行演示。操作也很方便。进入官网，输入品牌名称、公司名称或网站名称。
点击“GENERATE MY PAGE”按钮进入下一页，输入网站地址；
点击“GET YOUR PRESS KIT”后，会自动生成网站logo结果，如下图；
您可以选择直接下载徽标或颜色。
查看全部
)
我们在发布一些内容的时候，经常需要用到一些知名公司或者品牌的logo图片。最直接的方法是找到品牌官网，或者上百度图片或者谷歌图片。但并不是每个品牌或者网站都能找到相关的logo图片，有些网上画廊可能没有很标准的品牌LOGO图片。今天给大家介绍一个Chrome插件，方便实现，或者直接访问网站操作。
插件名称：Logo Grabber
官网：
下载地址：点击进入
插件介绍：获取任意网站LOGO，Logo Grabber 是一款免费的浏览器扩展，可以让您快速抓取任何网站 的正确格式的logo。对于网站无法看到和捕获徽标的许多情况尤其有用。
Logo Grabber 使用 Oqtor API 相关技术，在最短的时间内获取最正确的 Logo 图案。徽标抓取器可节省时间和精力。
如何使用
这里，我用官方Logo Grabber网站截取爱绿豆logo进行演示。操作也很方便。进入官网，输入品牌名称、公司名称或网站名称。
点击“GENERATE MY PAGE”按钮进入下一页，输入网站地址；
点击“GET YOUR PRESS KIT”后，会自动生成网站logo结果，如下图；
您可以选择直接下载徽标或颜色。
查看全部
chrome插件网页抓取(Chrome插件轻松实现，直接访问网站logo图片
)
我们在发布一些内容的时候，经常需要用到一些知名公司或者品牌的logo图片。最直接的方法是找到品牌官网，或者上百度图片或者谷歌图片。但并不是每个品牌或者网站都能找到相关的logo图片，有些网上画廊可能没有很标准的品牌LOGO图片。今天给大家介绍一个Chrome插件，方便实现，或者直接访问网站操作。
https://www.iludou.com/wp-cont ... 6.jpg 300w" />插件名称：Logo Grabber
官网：
下载地址：点击进入
插件介绍：获取任意网站LOGO，Logo Grabber 是一款免费的浏览器扩展，可以让您快速抓取任何网站 的正确格式的logo。对于网站无法看到和捕获徽标的许多情况尤其有用。
Logo Grabber 使用 Oqtor API 相关技术，在最短的时间内获取最正确的 Logo 图案。徽标抓取器可节省时间和精力。
如何使用
这里，我用官方Logo Grabber网站截取爱绿豆logo进行演示。操作也很方便。进入官网，输入品牌名称、公司名称或网站名称。
https://www.iludou.com/wp-cont ... 9.png 300w" />点击“GENERATE MY PAGE”按钮进入下一页，输入网站地址；
点击“GET YOUR PRESS KIT”后，会自动生成网站logo结果，如下图；
https://www.iludou.com/wp-cont ... 8.png 300w" />您可以选择直接下载徽标或颜色。
https://www.iludou.com/wp-cont ... 0.png 300w" /> chrome插件网页抓取(Instapaper网页离线阅读插件替代便签的应用插件作用)
网站优化 • 优采云 发表了文章 • 0 个评论 • 77 次浏览 • 2021-12-07 19:04
chrome插件网页抓取(Instapaper网页离线阅读插件替代便签的应用插件作用)
Instapaper插件是一款运行在chromr核心的chrome网页离线阅读插件，可以及时保存网页。您可以使用此插件替换笔记并将当前菜单栏中的网页保存到插件的官网离线阅读器中。在iPhone、iPad、Android或电脑等设备上用Instapaper文章阅读本网页，热烈欢迎免费下载。
【安装应用】
1、我这里用的是chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展来缓解压力。你在这个页面网上下载的Instapaper插件，拖到扩展页面就可以了。
2、安装结束后，试试插件的实际效果。
3、 进入网页后，点击页面右上角的插件标志，立即将插件保存到你的Instapaper账户中，但如果你没有登录应用程序，它会自动跳转到登录页面或注册页面。
【插件功能】
1、 通过将当前菜单栏保存到您的 Instapaper 帐户，一切都会正常进行。
2、 未登录的客户将被发送到登录页面或注册页面。整个过程结束后，他们将被重定向到初始网页，该网页存储在循环队列中。
3、此浏览器扩展可用于替换便签并将内容立即保存到Instapaper序列中。 查看全部
Instapaper插件是一款运行在chromr核心的chrome网页离线阅读插件，可以及时保存网页。您可以使用此插件替换笔记并将当前菜单栏中的网页保存到插件的官网离线阅读器中。在iPhone、iPad、Android或电脑等设备上用Instapaper文章阅读本网页，热烈欢迎免费下载。
【安装应用】
1、我这里用的是chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展来缓解压力。你在这个页面网上下载的Instapaper插件，拖到扩展页面就可以了。
2、安装结束后，试试插件的实际效果。
3、 进入网页后，点击页面右上角的插件标志，立即将插件保存到你的Instapaper账户中，但如果你没有登录应用程序，它会自动跳转到登录页面或注册页面。
【插件功能】
1、 通过将当前菜单栏保存到您的 Instapaper 帐户，一切都会正常进行。
2、 未登录的客户将被发送到登录页面或注册页面。整个过程结束后，他们将被重定向到初始网页，该网页存储在循环队列中。
3、此浏览器扩展可用于替换便签并将内容立即保存到Instapaper序列中。 查看全部
chrome插件网页抓取(Instapaper网页离线阅读插件替代便签的应用插件作用)
Instapaper插件是一款运行在chromr核心的chrome网页离线阅读插件，可以及时保存网页。您可以使用此插件替换笔记并将当前菜单栏中的网页保存到插件的官网离线阅读器中。在iPhone、iPad、Android或电脑等设备上用Instapaper文章阅读本网页，热烈欢迎免费下载。
【安装应用】
1、我这里用的是chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展来缓解压力。你在这个页面网上下载的Instapaper插件，拖到扩展页面就可以了。
2、安装结束后，试试插件的实际效果。
3、 进入网页后，点击页面右上角的插件标志，立即将插件保存到你的Instapaper账户中，但如果你没有登录应用程序，它会自动跳转到登录页面或注册页面。
【插件功能】
1、 通过将当前菜单栏保存到您的 Instapaper 帐户，一切都会正常进行。
2、 未登录的客户将被发送到登录页面或注册页面。整个过程结束后，他们将被重定向到初始网页，该网页存储在循环队列中。
3、此浏览器扩展可用于替换便签并将内容立即保存到Instapaper序列中。
chrome插件网页抓取(ChromeSPY是一款网页元素分析工具，下载体验吧！)
网站优化 • 优采云 发表了文章 • 0 个评论 • 80 次浏览 • 2021-12-07 06:21
chrome插件网页抓取(ChromeSPY是一款网页元素分析工具，下载体验吧！)
Chrome SPY 是一个网页元素分析工具。该软件可以帮助用户分析网页元素，帮助用户获取引用代码、tagName、代码关键字等元素信息，方便用户根据自己的需要查询获取信息，喜欢就下载吧并体验它！
软件介绍
网页元素是您在 Internet 上浏览时看到的所有内容。页面称为网页，许多网页构成一个网站。网站 的第一个网页称为主页。
首页是所有网页的索引页。您可以通过单击主页上的超链接打开其他网页。正是由于首页在网站中的特殊作用，人们经常使用首页来指代所有网页。个人网站被称为“个人主页”，个人网站将被建立和生产。主题网站 被称为“网页创建”。
网页元素包括：文字、图片、音频、动画和视频。文字符合排版要求。图片、音频、动画、视频满足网络传输和专题需要，需要选择。
软件功能
1、Chrome SPY 提供网页元素分析功能，您可以通过该软件立即读取元素；
2、 可以提取元素属性并保存文本；
3、可以查看谷歌浏览器的网页属性；
4、可以在软件界面启动浏览器；
5、支持标签选择，查看当前网页的标签内容；
6、 显示左边的代码，查看当前元素的引用代码；
7、支持代码关键字查看，支持标签名称查看。
指示
1、打开Chrome_SPY.exe软件，快速识别谷歌浏览器；
2、 点击启动浏览器，即可立即运行，方便在浏览器中查看网页内容；
3、 访问网页时，可以在软件界面查看标签，选择标签查看内容；
4、 获取tag时，会在此处显示网页的相关内容，获取的内容可以复制，支持元素矩形，元素坐标，引用代码，tagName，code关键字；
5、 提取元素功能，在软件界面中提取您需要的数据，并保存为文本。
更新日志
1.修复已知错误
2.优化操作体验 查看全部
Chrome SPY 是一个网页元素分析工具。该软件可以帮助用户分析网页元素，帮助用户获取引用代码、tagName、代码关键字等元素信息，方便用户根据自己的需要查询获取信息，喜欢就下载吧并体验它！
软件介绍
网页元素是您在 Internet 上浏览时看到的所有内容。页面称为网页，许多网页构成一个网站。网站 的第一个网页称为主页。
首页是所有网页的索引页。您可以通过单击主页上的超链接打开其他网页。正是由于首页在网站中的特殊作用，人们经常使用首页来指代所有网页。个人网站被称为“个人主页”，个人网站将被建立和生产。主题网站 被称为“网页创建”。
网页元素包括：文字、图片、音频、动画和视频。文字符合排版要求。图片、音频、动画、视频满足网络传输和专题需要，需要选择。
软件功能
1、Chrome SPY 提供网页元素分析功能，您可以通过该软件立即读取元素；
2、 可以提取元素属性并保存文本；
3、可以查看谷歌浏览器的网页属性；
4、可以在软件界面启动浏览器；
5、支持标签选择，查看当前网页的标签内容；
6、 显示左边的代码，查看当前元素的引用代码；
7、支持代码关键字查看，支持标签名称查看。
指示
1、打开Chrome_SPY.exe软件，快速识别谷歌浏览器；
2、 点击启动浏览器，即可立即运行，方便在浏览器中查看网页内容；
3、 访问网页时，可以在软件界面查看标签，选择标签查看内容；
4、 获取tag时，会在此处显示网页的相关内容，获取的内容可以复制，支持元素矩形，元素坐标，引用代码，tagName，code关键字；
5、 提取元素功能，在软件界面中提取您需要的数据，并保存为文本。
更新日志
1.修复已知错误
2.优化操作体验 查看全部
chrome插件网页抓取(ChromeSPY是一款网页元素分析工具，下载体验吧！)
Chrome SPY 是一个网页元素分析工具。该软件可以帮助用户分析网页元素，帮助用户获取引用代码、tagName、代码关键字等元素信息，方便用户根据自己的需要查询获取信息，喜欢就下载吧并体验它！
软件介绍
网页元素是您在 Internet 上浏览时看到的所有内容。页面称为网页，许多网页构成一个网站。网站 的第一个网页称为主页。
首页是所有网页的索引页。您可以通过单击主页上的超链接打开其他网页。正是由于首页在网站中的特殊作用，人们经常使用首页来指代所有网页。个人网站被称为“个人主页”，个人网站将被建立和生产。主题网站 被称为“网页创建”。
网页元素包括：文字、图片、音频、动画和视频。文字符合排版要求。图片、音频、动画、视频满足网络传输和专题需要，需要选择。
软件功能
1、Chrome SPY 提供网页元素分析功能，您可以通过该软件立即读取元素；
2、 可以提取元素属性并保存文本；
3、可以查看谷歌浏览器的网页属性；
4、可以在软件界面启动浏览器；
5、支持标签选择，查看当前网页的标签内容；
6、 显示左边的代码，查看当前元素的引用代码；
7、支持代码关键字查看，支持标签名称查看。
指示
1、打开Chrome_SPY.exe软件，快速识别谷歌浏览器；
2、 点击启动浏览器，即可立即运行，方便在浏览器中查看网页内容；
3、 访问网页时，可以在软件界面查看标签，选择标签查看内容；
4、 获取tag时，会在此处显示网页的相关内容，获取的内容可以复制，支持元素矩形，元素坐标，引用代码，tagName，code关键字；
5、 提取元素功能，在软件界面中提取您需要的数据，并保存为文本。
更新日志
1.修复已知错误
2.优化操作体验
chrome插件网页抓取(chrome插件网页抓取工具v2.0.11.更新吧)
网站优化 • 优采云 发表了文章 • 0 个评论 • 52 次浏览 • 2021-12-06 09:00
chrome插件网页抓取(chrome插件网页抓取工具v2.0.11.更新吧)
chrome插件网页抓取工具v2.0.11.11更新
follow吧
你让我发现你们竟然都用360浏览器来抓取搜索引擎的页面！！！
follow
我用的是插件v2.1.15，各大浏览器各大插件网站，逐步在更新中。
有一个数据采集采集搜索结果
好像现在存量3000+，应该很牛。
yahoo不错,facebook不错.通常找yahoo.
我也很想知道
推荐基于前段时间谷歌浏览器版本的“神搜”，真的可以提取各大搜索引擎的抓取记录及连接，而且不用下各种插件，每次上次直接用搜索引擎（百度、必应、谷歌、搜狗、雅虎等）、迅雷等拖拽就能抓取到相关页面的抓取地址。1.隐蔽而高级，可抓取互联网上的丰富内容；2.可取得互联网从业者及创业者访问网站的推广信息，甚至账号信息；3.国内“有缘网”、“百姓网”、“58同城”等热门网站信息还可以获取到互联网对接商家和买家的各种资源。
同时对各大网站连接做分析和统计，可以分析网站受众的搜索、浏览、购买习惯，从而了解消费者的相关需求；4.谷歌、维基等搜索引擎就自带不错的数据抓取，我之前做过谷歌搜索指数的分析，但没有经验，而且价格不便宜，这方面的统计缺失有待弥补。可以看看这篇文章，深度剖析谷歌搜索搜索效果挖掘，希望能给大家一些启发，互联网广告投放效果的数据分析：网赚秘籍、运营大牛等必备技能。 查看全部
chrome插件网页抓取工具v2.0.11.11更新
follow吧
你让我发现你们竟然都用360浏览器来抓取搜索引擎的页面！！！
follow
我用的是插件v2.1.15，各大浏览器各大插件网站，逐步在更新中。
有一个数据采集采集搜索结果
好像现在存量3000+，应该很牛。
yahoo不错,facebook不错.通常找yahoo.
我也很想知道
推荐基于前段时间谷歌浏览器版本的“神搜”，真的可以提取各大搜索引擎的抓取记录及连接，而且不用下各种插件，每次上次直接用搜索引擎（百度、必应、谷歌、搜狗、雅虎等）、迅雷等拖拽就能抓取到相关页面的抓取地址。1.隐蔽而高级，可抓取互联网上的丰富内容；2.可取得互联网从业者及创业者访问网站的推广信息，甚至账号信息；3.国内“有缘网”、“百姓网”、“58同城”等热门网站信息还可以获取到互联网对接商家和买家的各种资源。
同时对各大网站连接做分析和统计，可以分析网站受众的搜索、浏览、购买习惯，从而了解消费者的相关需求；4.谷歌、维基等搜索引擎就自带不错的数据抓取，我之前做过谷歌搜索指数的分析，但没有经验，而且价格不便宜，这方面的统计缺失有待弥补。可以看看这篇文章，深度剖析谷歌搜索搜索效果挖掘，希望能给大家一些启发，互联网广告投放效果的数据分析：网赚秘籍、运营大牛等必备技能。 查看全部
chrome插件网页抓取(chrome插件网页抓取工具v2.0.11.更新吧)
chrome插件网页抓取工具v2.0.11.11更新
follow吧
你让我发现你们竟然都用360浏览器来抓取搜索引擎的页面！！！
follow
我用的是插件v2.1.15，各大浏览器各大插件网站，逐步在更新中。
有一个数据采集采集搜索结果
好像现在存量3000+，应该很牛。
yahoo不错,facebook不错.通常找yahoo.
我也很想知道
推荐基于前段时间谷歌浏览器版本的“神搜”，真的可以提取各大搜索引擎的抓取记录及连接，而且不用下各种插件，每次上次直接用搜索引擎（百度、必应、谷歌、搜狗、雅虎等）、迅雷等拖拽就能抓取到相关页面的抓取地址。1.隐蔽而高级，可抓取互联网上的丰富内容；2.可取得互联网从业者及创业者访问网站的推广信息，甚至账号信息；3.国内“有缘网”、“百姓网”、“58同城”等热门网站信息还可以获取到互联网对接商家和买家的各种资源。
同时对各大网站连接做分析和统计，可以分析网站受众的搜索、浏览、购买习惯，从而了解消费者的相关需求；4.谷歌、维基等搜索引擎就自带不错的数据抓取，我之前做过谷歌搜索指数的分析，但没有经验，而且价格不便宜，这方面的统计缺失有待弥补。可以看看这篇文章，深度剖析谷歌搜索搜索效果挖掘，希望能给大家一些启发，互联网广告投放效果的数据分析：网赚秘籍、运营大牛等必备技能。
chrome插件网页抓取(有了这9款GoogleChrome插件，设计自己专属的网络世界不再麻烦)
网站优化 • 优采云 发表了文章 • 0 个评论 • 65 次浏览 • 2021-12-04 16:06
chrome插件网页抓取(有了这9款GoogleChrome插件，设计自己专属的网络世界不再麻烦)
源 9 对网页设计师有用的 Google Chrome 扩展 | 工具
有了这9个Google Chrome插件，设计自己的网络世界不再麻烦。
与其他互联网浏览器相比，谷歌浏览器还很年轻。但是，其客户覆盖率并不逊色于其他竞争对手。在WDL（国外知名博客）中，Chrome排在Firefox之后位居第二。考虑到这一点，并且本文中的大多数博主都是自己设计网络的爱好者，我们想介绍一些谷歌插件，您可以使用它们来为读者提供信息。
Web开发
web开发插件增加了工具栏按钮，为用户提供各种开发工具。这个由火狐网开发的插件出自同一人之手。
砖块
Brick 是一个网站 数据采集工具。查看上图，Brick 已检测到此网页上使用的所有计算机技术。Brick 的目标是帮助开发人员、研究人员和设计人员找到他们可以使用的技术。
瞪大眼睛
.
Open Eyes 是谷歌浏览器和谷歌开源项目的插件。他可以让你从任何网站中丢弃你喜欢的任何颜色。这不仅对网站 开发者来说非常方便，而且还很酷。
测量它！
“量一下！” 允许您通过拿着标尺来检测 网站 上任何元素的像素高度和宽度。
网站翻译
这个插件可以改变用户网站，以满足各种程序的兼容性问题。这对于网页设计开发者解决网站外观或实现各种想法非常方便。
数据库字符集转换检测
受火狐插件CSSViewer的影响，这个谷歌插件可以让你快速抓取一个元素的基本CSS组成，而无需区分主题的网站。
随心所欲
当您在开发阶段、测试阶段、应用阶段需要随时切换时，强烈推荐“西西关”！
速度马力
极速马力是一款帮助您检测和修复网络应用问题的插件。它允许用户可视化推荐设置下的标准，并计算出最适合网页运行的设置数据。
完美的截屏工具
完美的屏幕捕获工具可帮助您捕获整个页面或其中的任何部分。可以画圆、标记箭头、画直线、文字批注，一键分享。支持PNG格式和快捷键功能。 查看全部
源 9 对网页设计师有用的 Google Chrome 扩展 | 工具
有了这9个Google Chrome插件，设计自己的网络世界不再麻烦。
与其他互联网浏览器相比，谷歌浏览器还很年轻。但是，其客户覆盖率并不逊色于其他竞争对手。在WDL（国外知名博客）中，Chrome排在Firefox之后位居第二。考虑到这一点，并且本文中的大多数博主都是自己设计网络的爱好者，我们想介绍一些谷歌插件，您可以使用它们来为读者提供信息。
Web开发
web开发插件增加了工具栏按钮，为用户提供各种开发工具。这个由火狐网开发的插件出自同一人之手。
砖块
Brick 是一个网站 数据采集工具。查看上图，Brick 已检测到此网页上使用的所有计算机技术。Brick 的目标是帮助开发人员、研究人员和设计人员找到他们可以使用的技术。
瞪大眼睛
.
Open Eyes 是谷歌浏览器和谷歌开源项目的插件。他可以让你从任何网站中丢弃你喜欢的任何颜色。这不仅对网站 开发者来说非常方便，而且还很酷。
测量它！
“量一下！” 允许您通过拿着标尺来检测 网站 上任何元素的像素高度和宽度。
网站翻译
这个插件可以改变用户网站，以满足各种程序的兼容性问题。这对于网页设计开发者解决网站外观或实现各种想法非常方便。
数据库字符集转换检测
受火狐插件CSSViewer的影响，这个谷歌插件可以让你快速抓取一个元素的基本CSS组成，而无需区分主题的网站。
随心所欲
当您在开发阶段、测试阶段、应用阶段需要随时切换时，强烈推荐“西西关”！
速度马力
极速马力是一款帮助您检测和修复网络应用问题的插件。它允许用户可视化推荐设置下的标准，并计算出最适合网页运行的设置数据。
完美的截屏工具
完美的屏幕捕获工具可帮助您捕获整个页面或其中的任何部分。可以画圆、标记箭头、画直线、文字批注，一键分享。支持PNG格式和快捷键功能。 查看全部
chrome插件网页抓取(有了这9款GoogleChrome插件，设计自己专属的网络世界不再麻烦)
源 9 对网页设计师有用的 Google Chrome 扩展 | 工具
有了这9个Google Chrome插件，设计自己的网络世界不再麻烦。
与其他互联网浏览器相比，谷歌浏览器还很年轻。但是，其客户覆盖率并不逊色于其他竞争对手。在WDL（国外知名博客）中，Chrome排在Firefox之后位居第二。考虑到这一点，并且本文中的大多数博主都是自己设计网络的爱好者，我们想介绍一些谷歌插件，您可以使用它们来为读者提供信息。
Web开发
web开发插件增加了工具栏按钮，为用户提供各种开发工具。这个由火狐网开发的插件出自同一人之手。
砖块
Brick 是一个网站 数据采集工具。查看上图，Brick 已检测到此网页上使用的所有计算机技术。Brick 的目标是帮助开发人员、研究人员和设计人员找到他们可以使用的技术。
瞪大眼睛
.
Open Eyes 是谷歌浏览器和谷歌开源项目的插件。他可以让你从任何网站中丢弃你喜欢的任何颜色。这不仅对网站 开发者来说非常方便，而且还很酷。
测量它！
“量一下！” 允许您通过拿着标尺来检测 网站 上任何元素的像素高度和宽度。
网站翻译
这个插件可以改变用户网站，以满足各种程序的兼容性问题。这对于网页设计开发者解决网站外观或实现各种想法非常方便。
数据库字符集转换检测
受火狐插件CSSViewer的影响，这个谷歌插件可以让你快速抓取一个元素的基本CSS组成，而无需区分主题的网站。
随心所欲
当您在开发阶段、测试阶段、应用阶段需要随时切换时，强烈推荐“西西关”！
速度马力
极速马力是一款帮助您检测和修复网络应用问题的插件。它允许用户可视化推荐设置下的标准，并计算出最适合网页运行的设置数据。
完美的截屏工具
完美的屏幕捕获工具可帮助您捕获整个页面或其中的任何部分。可以画圆、标记箭头、画直线、文字批注，一键分享。支持PNG格式和快捷键功能。
chrome插件网页抓取(PicMonkeyExtensionChromeExtensionChrome网页图片抓取插件轻松抓取您所在网页上的所有图片 )
网站优化 • 优采云 发表了文章 • 0 个评论 • 37 次浏览 • 2021-12-02 18:18
chrome插件网页抓取(PicMonkeyExtensionChromeExtensionChrome网页图片抓取插件轻松抓取您所在网页上的所有图片
)
PicMonkeyExtensionChrome插件是一款非常不错的Chrome网页图片抓取插件，它可以轻松抓取您所在网页的所有图片，并且可以在PicMonkey官方网站上对图片进行编辑。这是一个非常好的。插入。.
相关软件软件大小版本说明下载地址
PicMonkey Extension Chrome 插件是一款优秀的Chrome 网页图片抓取插件。它可以轻松抓取您网页上的所有图片，并在PicMonkey 官方网站 上编辑图片。这是一个非常好的插件。
特征
1、PicMonkey 插件允许您立即从任何网页抓取图像并在 PicMonkey 中打开它们进行编辑。
2、PicMonkey 是一个免费的在线照片编辑器。
3、PicMonkey 在线编辑器的精简和快速引擎允许您执行基本编辑，例如裁剪和旋转，并使用颜色效果、叠加、字体、纹理、框架和触摸工具增强您的图像。
指示
1、编辑器使用chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展，将你在本页下载的PicMonkey插件解压，拖入扩展页面。能。
2、安装完成后，试一下插件效果。
3、 进入网页后，点击界面右上角的插件图标，可以抓取页面上的所有图片。
4、 点击需要的图片后，可以在PicMonkey在线图片编辑网页对点击的图片进行编辑。
查看全部
)
PicMonkeyExtensionChrome插件是一款非常不错的Chrome网页图片抓取插件，它可以轻松抓取您所在网页的所有图片，并且可以在PicMonkey官方网站上对图片进行编辑。这是一个非常好的。插入。.
相关软件软件大小版本说明下载地址
PicMonkey Extension Chrome 插件是一款优秀的Chrome 网页图片抓取插件。它可以轻松抓取您网页上的所有图片，并在PicMonkey 官方网站 上编辑图片。这是一个非常好的插件。
特征
1、PicMonkey 插件允许您立即从任何网页抓取图像并在 PicMonkey 中打开它们进行编辑。
2、PicMonkey 是一个免费的在线照片编辑器。
3、PicMonkey 在线编辑器的精简和快速引擎允许您执行基本编辑，例如裁剪和旋转，并使用颜色效果、叠加、字体、纹理、框架和触摸工具增强您的图像。
指示
1、编辑器使用chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展，将你在本页下载的PicMonkey插件解压，拖入扩展页面。能。
2、安装完成后，试一下插件效果。
3、 进入网页后，点击界面右上角的插件图标，可以抓取页面上的所有图片。
4、 点击需要的图片后，可以在PicMonkey在线图片编辑网页对点击的图片进行编辑。
查看全部
chrome插件网页抓取(PicMonkeyExtensionChromeExtensionChrome网页图片抓取插件轻松抓取您所在网页上的所有图片
)
PicMonkeyExtensionChrome插件是一款非常不错的Chrome网页图片抓取插件，它可以轻松抓取您所在网页的所有图片，并且可以在PicMonkey官方网站上对图片进行编辑。这是一个非常好的。插入。.
相关软件软件大小版本说明下载地址
PicMonkey Extension Chrome 插件是一款优秀的Chrome 网页图片抓取插件。它可以轻松抓取您网页上的所有图片，并在PicMonkey 官方网站 上编辑图片。这是一个非常好的插件。
特征
1、PicMonkey 插件允许您立即从任何网页抓取图像并在 PicMonkey 中打开它们进行编辑。
2、PicMonkey 是一个免费的在线照片编辑器。
3、PicMonkey 在线编辑器的精简和快速引擎允许您执行基本编辑，例如裁剪和旋转，并使用颜色效果、叠加、字体、纹理、框架和触摸工具增强您的图像。
指示
1、编辑器使用chrome浏览器。首先在标签页输入【chrome://extensions/】进入chrome扩展，将你在本页下载的PicMonkey插件解压，拖入扩展页面。能。
2、安装完成后，试一下插件效果。
3、 进入网页后，点击界面右上角的插件图标，可以抓取页面上的所有图片。
4、 点击需要的图片后，可以在PicMonkey在线图片编辑网页对点击的图片进行编辑。
