# 基于puppeteer抓取网站内容,在线词典添加的另一种方式。

**URL:** <https://forum.freemdict.com/t/topic/12897>\
**Category:** 软件经验交流展望\
**Tags:** 抓取, goldendict, 在线词典\
**Created:** [2022 年5 月 9 日 11:59 UTC](https://forum.freemdict.com/t/topic/12897 "2022-05-09T11:59:49Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![xiaoyifang](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/x/df788c/32.png) [@xiaoyifang](https://forum.freemdict.com/u/xiaoyifang)\
发布日期： [2022 年5 月 9 日 11:59 UTC](https://forum.freemdict.com/t/topic/12897/1 "2022-05-09T11:59:49Z")

</div>

# puppeteer简介

> Puppeteer是什么
> 
> Puppeteer 是一个Node库， 它提供高级API，通过DevTools Protocol 来控制Chrome 或 Chromium。 Puppeteer 默认运行为headless ，但是可以配置为运行为non-headless 。
> 
> ### 可以做什么
> 
> - 生成页面截图或PDF
> - 抓取SPA 并生成预渲染内容（SSR）
> - 自动化表单提交、UI测试，键盘输入 等
> - 创建最新的自动化测试环境。 使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中运行测试。
> - 捕获站点的时间线跟踪，以帮助诊断性能问题。
> - 测试Chrome扩展程序。
> 
> 作者：金刚\_30bf  
> 链接：[https://www.jianshu.com/p/679f07ba474b](https://www.jianshu.com/p/679f07ba474b)  
> 来源：简书  
> 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

# 安装

1. 安装nodejs
2. npm install -g cnpm --registry=[https://registry.npmmirror.com](https://registry.npmmirror.com)
3. cnpm install -g puppeteer

# 创建一个js脚本（以百度翻译为例,也可以使用浏览器的自动录取功能，可以生成脚本[https://developer.chrome.com/zh/blog/new-in-devtools-101/）](https://developer.chrome.com/zh/blog/new-in-devtools-101/%EF%BC%89)

```auto
const puppeteer = require('puppeteer');
 
const args = process.argv.slice(2);
const word=encodeURIComponent(args[0]);
 (async () => {
   const browser = await puppeteer.launch()
   const page = await browser.newPage()
   await page.goto('https://fanyi.baidu.com/#en/zh/'+word)
     const name = await page.$eval('div.simple-dict', el => el.innerHTML)
     const style="<style>"+`xxxx(replaced with real value)`+"</style>"
     console.log(style)
     console.log("<div>"+name+"</div>")
   await browser.close()
 })()

```

# 其中selector是要抓取的页面内容。此处只抓一部分作为示例

 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/2/8/28ef9c203ff80f3d6bd01e3fe9319ee0d60d5321.png)

# (可选)style样式的取值

可以使用chrome extension snipcss获取页面的css，（注：此扩展对于太大的html标签，会内存溢出。）

> **[SnipCSS - Chrome 应用商店](https://chromewebstore.google.com/detail/snipcss/hbdnoadcmapfbngbodpppofgagiclicf?hl=zh-CN)**
>
> Extract the CSS/HTML for any element on any page, only take the styles you want

 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/0/f/0f4bfc4df8f1edaa366e322eb3dcee4ed5fbf5aa.png)

# 测试

将style和selector的值填充进上面的js后。  
可以执行 `node example.js`看下返回的效果。

# （可选）可以添加到goldendict的词典中

 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/c/a/caad3e37a688893d0f0cec4d5854514906173b33.png)

# 最终效果

 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/c/6/c6d6c41e56720d75f98fb2a0a0646d2a59869f9d.png)

参考：

[http://nodejs.cn/learn/nodejs-accept-arguments-from-the-command-line](http://nodejs.cn/learn/nodejs-accept-arguments-from-the-command-line)

> <https://github.com/checkly/puppeteer-examples/blob/master/1.%20basics/get_text_value.js>

附件example.js供参考。  
[example.7z](https://forum.freemdict.com/uploads/short-url/1GOzNM7QSjOVzQoxCsCG9A2NZSg.7z) (7.1 KB)