> 作者：幻好
> 
> 來源：[恆生LIGHT雲社群](https://developer.hs.net/thread/1452 "恆生LIGHT雲社群")

# 神器介紹

工作中，我們有時需要獲取某個網站中的資料作為素材，比如一些熱點排名。但是不會寫程式碼或覺得寫程式碼爬取太麻煩，那有沒有什麼高效的工具能幫助我們解決這個問題呢？需要獲取某個網站中的資料作為素材，比如一些熱點排名。但是不會寫程式碼或覺得寫程式碼爬取太麻煩，那有沒有什麼高效的工具能幫助我們解決這個問題呢？

## 神器介紹

**web scraper** 是 Chrome 瀏覽器的外掛，能夠透過影像介面的方式幫助我們抓取網頁上的資料。

這是一款免費的 Chrome 瀏覽器擴充套件，只要建立sitemap即可抓取相應的資料，無需寫程式碼即可抓取95%以上的網站資料（比如部落格列表，知乎回答，微博評論等）

![image-20211017105844174.png](https://developer.hs.net/storage/attachments/2021/10/17/O5LD6Md9ppBO4d7hzsXsQv9F5O8fM9UL4PbugtKh_thumb.png "3366")

（下載連結：[國內](https://chrome.zzzmh.cn/info?token=jnhgnonknehpejjnehehllkliplmbmhn)， [國外](https://chrome.google.com/webstore/detail/web-scraper-free-web-scra/jnhgnonknehpejjnehehllkliplmbmhn)）

![image-20211017110105980.png](https://developer.hs.net/storage/attachments/2021/10/17/wXA4PkfZbG5F5jfO19UUtZfFY1fmr9OAGg3c2NDq_thumb.png "3367")

## 使用教程

以 B 站的排行榜為例，我們需要抓取排行榜的資料。（地址：https://www.bilibili.com/v/popular/rank/all）

![image-20211017110312099.png](https://developer.hs.net/storage/attachments/2021/10/17/Q9NR4kJgIuiFx7aYhYAwXYVz377TLBobSbVXo7HR_thumb.png "3368")

1.首先我們已經安裝好 **web scraper** 外掛，透過 F12 開啟開發工具，找到外掛頁面。

![image-20211017110504324.png](https://developer.hs.net/storage/attachments/2021/10/17/M4ISTuSbhNXGKntNyFv9E7vJHnLsP2P7Mn3F2anw_thumb.png "3369")

2.可以看到多了個 web scraper 標籤，下面有 `sitemaps`，`sitemap`，`create new sitemap` ，點選 `create` 新建一個爬蟲抓取任務。name 隨意填一個，url 填入網頁訪問地址即可。

![image-20211017110851277.png](https://developer.hs.net/storage/attachments/2021/10/17/Tum6CkuHPd3LSN3oK8YS9ILi0ulkGWvp4ekhWo5b_thumb.png "3370")

![image-20211017111327079.png](https://developer.hs.net/storage/attachments/2021/10/17/7LWlwAL3pftZV7ZoF3WDGlpHpsR5Nwge1lOUTvIo_thumb.png "3371")

3.然後點選add new selector 新增新的選擇器，給id起個名，type為 element ，點選 select 選中需要爬取的頁面元素，可以看到網頁標紅了。

然後再選擇第二條，可以看到下面的內容都選中了，點選 done selecting 就好了。

![image-20211017111357317.png](https://developer.hs.net/storage/attachments/2021/10/17/qS88ApM1fFCwv38drxuW8Xl7x54WMPEUycGhZjTt_thumb.png "3372")

![image-20211017111726208.png](https://developer.hs.net/storage/attachments/2021/10/17/7aapbAUoweBJUyDiBwMww0Jd8ZtyLH3D4396tOnd_thumb.png "3373")

![image-20211017111801075.png](https://developer.hs.net/storage/attachments/2021/10/17/75a4R9CfFkdXDi6PBA31DDE2N8vzCZUpLMMFi8SK_thumb.png "3374")

接著點選 element preview 預覽下可以看到頁面元素都抓取到了，還要選中  Multiple 。然後儲存選擇器。

![image-20211017111909049.png](https://developer.hs.net/storage/attachments/2021/10/17/wQGQU8lnUBlGJlYBOKIIcx4H8d4fEsNYyYWxsd9k_thumb.png "3375")

4.然後透過以上方式新建選擇器，將排名，標題，播放量，評論量，簡介圖，連結等資料抓取。點選 selector graph 可以看到抓取的選擇器關係圖。

![image-20211017121740969.png](https://developer.hs.net/storage/attachments/2021/10/17/A6IxF5XR2afQ6cjZP1M2nLEWGAPu7BfwnTttz2lB_thumb.png "3376")

![image-20211017122122642.png](https://developer.hs.net/storage/attachments/2021/10/17/xqRGBQ5tlcv9XkdOCfjv43zKOA2NZii6S3h1DefG_thumb.png "3377")

5.然後選擇器都建好後點選 scrape 開始抓取資料，等待抓取完成，重新整理資料預覽。

![image-20211017122308059.png](https://developer.hs.net/storage/attachments/2021/10/17/wsRmSjEu7kedFTJBhjyACKQHBZxe3EoMNCWbx96O_thumb.png "3378")

![image-20211017122326634.png](https://developer.hs.net/storage/attachments/2021/10/17/IlfCTYdb4ENpilxdESRQfkbbuCPvMksIUPDiBZFX_thumb.png "3379")

![image-20211017122439686.png](https://developer.hs.net/storage/attachments/2021/10/17/x5rOAfw5pU0CThY5ETA1CPxwj76s3Ny6bn5LiQ6a_thumb.png "3380")

6.最後可匯出 CSV 檔案，用excel檢視抓取資料。

![image-20211017122535265.png](https://developer.hs.net/storage/attachments/2021/10/17/3TXs9285h3boDWo7eeWIbw8O4CSxyuoPWnGZazbj_thumb.png "3381")

![image-20211017122726908.png](https://developer.hs.net/storage/attachments/2021/10/17/cOfZYDehz2czVnBnx2AmheufOc2lyB4sQk8ZgcIl_thumb.png "3382")

## 總結

最後，附上我的抓取指令碼，匯入即可爬取資料。

```json
{"_id":"bilibili","startUrl":["https://www.bilibili.com/v/popular/rank/all"],"selectors":[{"id":"bilibili_rank","parentSelectors":["_root"],"type":"SelectorElement","selector":"li.rank-item","multiple":true,"delay":0},{"id":"-排名","parentSelectors":["bilibili_rank"],"type":"SelectorText","selector":" div.num","multiple":true,"delay":0,"regex":""},{"id":"-標題","parentSelectors":["bilibili_rank"],"type":"SelectorText","selector":"a.title","multiple":false,"delay":0,"regex":""},{"id":"播放量","parentSelectors":["bilibili_rank"],"type":"SelectorText","selector":".detail > span:nth-of-type(1)","multiple":false,"delay":0,"regex":""},{"id":"評論量","parentSelectors":["bilibili_rank"],"type":"SelectorText","selector":"span:nth-of-type(2)","multiple":false,"delay":0,"regex":""},{"id":"簡介圖","parentSelectors":["bilibili_rank"],"type":"SelectorImage","selector":"img","multiple":false,"delay":0},{"id":"-連結","parentSelectors":["bilibili_rank"],"type":"SelectorText","selector":"a.title","multiple":false,"delay":0,"regex":""}]}
```

「無程式碼」高效的爬取網頁資料神器

相關文章