One night I worked as an XPath Terminator: XPath Helper Plus

Preface

As a senior 『xpath』 Extraction Engineer , Want to get data from the page quickly , There must be some tools ,
And the first contact is xpath-helper This browser plug-in . After a period of use , It is found that the author has some special needs , I want to expand on this basis .
So I learned how to develop chrome plug-in unit ？ How to use your own attributes vue To develop ？ After a two-day weekend 、gayhub After understanding , With such a tool .

problem

xpath-helper2.0.2 Native is to support pressing and holding shift Then use the mouse to locate and select the element , And the output xpath grammar , But in this way xptah Grammar is not friendly .

For example, I want to pick up the title of an article about nuggets ：

/html/body/div[@id=‘__nuxt’]/div[@id=‘__layout’]/div[@id=‘juejin’]/div[@class=‘view-container container’]/main[@class=‘container main-container with-view-nav’]/div[@class=‘view timeline-index-view’]/div[@class=‘timeline-container’]/div[@class=‘timeline-content’]/aside[@class=‘index-aside aside’]/div[@class=‘signin-tip signin’]/div[@class=‘first-line’]/button[@class=‘btn signin-btn’]/span[@class=‘btn-text’]

It came out one xpath grammar , This xpath Grammar comes from DOM The root node starts to go down one by one ( The source code is from bottom to top ) To put together . This will become very redundant .
Although it can accurately locate the elements we want , But once you put this xpath The syntax is copied into the code , It's terrible .

Of course, some programmers are keen to choose to use chrome The original elements are copied into xpath.

The result is ：

//*[@id=“juejin”]/div[1]/main/div/div/div/aside/div[1]/div[1]/button/span

Obviously, the above two schemes have their own problems ： Grammatical redundancy 、 No readability .

solve

The solution given by the author is in xpath-helper On the basis of , Add an auxiliary function , It maximizes streamlining xpath grammar , Once it is found that its syntax can recognize the element, it will not continue to look up . It's about returning immediately .

//span[@class=‘btn-text’]

And it can also be friendly to css Selector syntax ：

span.btn-text

We can do it in chrome Check this syntax in the element of ：

• xpath:
  
• css:
  

Realization

xpath-helper-plus Its core API All come from xpath-helper.

On this basis, the author adds some additional functions , such as ： Streamlining xpath sentence 、 conversion CSS Selectors .

With the original xpath helper The difference is , This time, chrome The plug-in uses Vue3+vite To develop , Component oriented , adopt vite Pack it up chrome File directory structure of plug-in specification .
More functions may be provided in the future . Or develop other plug-ins on this basis .

Open source

https://github.com/mic1on/xpath-helper-plus