Skip to content

这是一个xpath开发者的工具,可以帮助开发者快速的定位网页元素。

License

Notifications You must be signed in to change notification settings

mic1on/xpath-helper-plus

Repository files navigation

xpath helper plus

这是一个xpath开发者的工具,可以帮助开发者快速的定位元素。

其核心API均来自于xpath helper,在此基础上增加了一些额外的功能,比如:精简xpath语句。

精简xpath语句

原来的方式是从根节点,一般是html开始逐一向下进行元素定位,这种方式唯一缺点在于整个xpath语句会很长,比如:

/html/body/div[@id='__nuxt']/div[@id='__layout']/div[@id='juejin']/div[@class='view-container']/main[@class='container main-container']/div[@class='view column-view']/div[@class='sidebar sidebar top sticky']/div[@class='sticky-block-box']/nav[@class='next-article']/div[@class='next-article-header']/div[@class='next-article-title']

当然还有一部分程序员依赖于chrome自带的元素定位,在选中元素右击-复制xpath,这种方式会很长,而且不可读。

//*[@id="juejin"]/div[1]/main/div/div[3]/div[4]/nav/div[1]/div

经过精简后的xpath语句,可以很短的,比如:

//div[@class='next-article-title']

程序会自动查找dom结构中是否该xpath语句是唯一指向元素,如果是,则会自动精简,否则,则会继续向上查找,直到最精简且唯一的xpath语句。

重构

与原有的xpath helper不同的是,这次chrome插件采用Vue3+vite来开发,面向组件进行开发,通过vite打包成chrome插件规范的文件目录结构

安装

clone项目后,进入本项目:

cd xpath-helper-plus

安装依赖:

npm install

打包插件:

npm run build

生成的插件文件在dist目录下,可以直接chrome浏览器中加载此目录。

使用

安装完扩展后,在浏览器右上角会出现本插件的图标,点击后会弹出一个窗口。

姿势1:你可以和xpath helper一样在左侧编辑xpath语句。

姿势2:你也可以按住shift键,鼠标在网页元素中选择定位的元素。

最后

本项目是一个使用vue3+vite开发chrome插件的开端,未来可能会提供更多的功能。或者在此基础上开发其他插件。

About

这是一个xpath开发者的工具,可以帮助开发者快速的定位网页元素。

Resources

License

Stars

Watchers

Forks

Packages

No packages published