EasySelect 1.1.0 发布，能够快速构建爬虫的浏览器插件

内容简介：一个Chrome/Firefox扩展，让你根据页面元素快速获取可读可维护的 CSS 选择器。 为什么不用浏览器自带的 "Copy selector"? 举例来说，这是浏览器自动生成的： #TopstoryContent > div > div > div > div:nth-chi...

本文转载自：https://www.oschina.net/news/116824/easyselect-1-1-0-released，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有。

一个Chrome/Firefox扩展，让你根据页面元素快速获取可读可维护的 CSS 选择器。

为什么不用浏览器自带的 "Copy selector"?

举例来说，这是浏览器自动生成的：

#TopstoryContent > div > div > div > div:nth-child(41) > div > div > h2 > div > a

这是EasySelect拿到的：

div[itemprop='zhihu:question'] > a

安装

Chrome扩展商店

Firefox附加组件

或从release手动安装

使用

首先，在浏览器中使用检查元素呼出调试工具，然后用inspector选择一个元素。

在右侧的面板选择一下“Easy Select”就能看到 工具 界面了。

界面分三个部分：

1. 层级选择面板

CSS选择器通常通过上级元素来进行辅助定位，例如：

div.items > article > a.title

最高是到 html 元素这一级，如果你不小心点多了，生成出的表达式会很长，可以使用第二排限制最终表达式的长度。

2. 元素选择面板

这个就是通过选择class还有元素属性构造选择器了。这个面板与层级选择面板是联动关系。

3. 结论面板

这里可以看到最终生成的表达式，当前页面的表达式匹配元素数量。

还可以进行高亮，以及最下面的表达式 / 语句复制。

开发

npm install # 安装环境
npm run serve # 编译并热更新
npm run build # 生产环境打包
npm run analyze # 分析包组件大小

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

为你推荐:

• Rust search extension 0.5 发布！快速搜索 Rust 文档的浏览器插件
• 使用 ClojureScript 开发浏览器插件
• OSCHINA Chrome 浏览器插件 v1.4 发布
• OSCHINA Chrome 浏览器插件 v1.6 发布

相关软件推荐:

• Web浏览器引擎 WebKit
• 最小化浏览器程序 KPBroswer
• Go 的快速 HTTP 包 fasthttp
• JavaScript 的渐进式快速开发框架 Safe.js
• PHP 实现 HTML5 的服务器发送事件 PHP SSE

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。