之前学习爬虫的时候，如果是 HTML 的数据，通过 xpath 或是 css 选择器，就能很快的获取我们想要的数据，如果是 json 有没有类似 xpath 这种，能够直接根据条件定位数据，而不需要自行 json 解析在遍历获取。答案是有的，也就是 JSONPath。



在线测试网址 [JSONPath 在线验证](https://www.jsonpath.cn/)

所选用的环境是 Node + JavaScript，用到 jsonpath 这个包 [jsonpath - npm (npmjs.com)](https://www.npmjs.com/package/jsonpath)

> 参考链接 [JsonPath - 根据表达式路径解析 Json - 简书 (jianshu.com)](https://www.jianshu.com/p/8c0ade82891b)

## 基本语法

### 过滤器表达式

通常的表达式格式为：`[?(@.age > 18)]` 表示当前节点属性 age 大于 18

| 操作符  | 描述                                                             |
| ------- | ---------------------------------------------------------------- |
| `==`    | 等于符号，但数字 1 不等于字符 1(note that 1 is not equal to ‘1’) |
| `!=`    | 不等于符号                                                       |
| `<`     | 小于符号                                                         |
| `<=`    | 小于等于符号                                                     |
| `>`     | 大于符号                                                         |
| `>=`    | 大于等于符号                                                     |
| `=~`    | 判断是否符合正则表达式，例如[?(@.name =~ /foo.*?/i)]             |
| `in`    | 所属符号，例如[?(@.size in [‘S’, ‘M’])]                          |
| `nin`   | 排除符号                                                         |
| `size`  | size of left (array or string) should match right                |
| `empty` | 判空 Null 符号                                                   |

语法就这些，不过单单有语法，不实践肯定是不够的。下面就是一些官方简单例子操作，还有一个终极实战

## 代码演示

```js
var jp = require('jsonpath')

var cities = [
  { name: 'London', population: 8615246 },
  { name: 'Berlin', population: 3517424 },
  { name: 'Madrid', population: 3165235 },
  { name: 'Rome', population: 2870528 },
]

var names = jp.query(cities, '$..name')

// [ "London", "Berlin", "Madrid", "Rome" ]
```

如果使用 js 来遍历的话，也简单

```js
let names = cities.map(c => c.name)
```

这个数据可能还没那么复杂，在看看下面这个例子，代码来源于https://goessner.net/articles/JsonPath

```json
{
  "store": {
    "book": [
      {
        "category": "reference",
        "author": "Nigel Rees",
        "title": "Sayings of the Century",
        "price": 8.95
      },
      {
        "category": "fiction",
        "author": "Evelyn Waugh",
        "title": "Sword of Honour",
        "price": 12.99
      },
      {
        "category": "fiction",
        "author": "Herman Melville",
        "title": "Moby Dick",
        "isbn": "0-553-21311-3",
        "price": 8.99
      },
      {
        "category": "fiction",
        "author": "J. R. R. Tolkien",
        "title": "The Lord of the Rings",
        "isbn": "0-395-19395-8",
        "price": 22.99
      }
    ],
    "bicycle": {
      "color": "red",
      "price": 19.95
    }
  }
}
```

| JsonPath | Result |
| --- | --- |
| `$.store.book[*].author` | 所有 book 的 author 节点 |
| `$..author` | 所有 author 节点 |
| `$.store.*` | store 下的所有节点，book 数组和 bicycle 节点 |
| `$.store..price` | store 下的所有 price 节点 |
| `$..book[2]` | 匹配第 3 个 book 节点 |
| `$..book[(@.length-1)]`，或 `$..book[-1:]` | 匹配倒数第 1 个 book 节点 |
| `$..book[0,1]`，或 `$..book[:2]` | 匹配前两个 book 节点 |
| `$..book[?(@.isbn)]` | 过滤含 isbn 字段的节点 |
| `$..book[?(@.price<10)]` | 过滤`price<10`的节点 |
| `$..*` | 递归匹配所有子节点 |

对应的语法可直接到在 JSONPath 在线验证网站上进行测试。要提一点的是，jsonpath 是支持使用 || 与 && 进行过滤的，比如上面要获取 category 为 fiction，price 大于 10 的语法为`$..book[?(@.price>10 && @.category=="fiction")]` 结果如下

```json
[
  {
    "category": "fiction",
    "author": "Evelyn Waugh",
    "title": "Sword of Honour",
    "price": 12.99
  },
  {
    "category": "fiction",
    "author": "J. R. R. Tolkien",
    "title": "The Lord of the Rings",
    "isbn": "0-395-19395-8",
    "price": 22.99
  }
]
```

## 终极实战

也许你会觉得上面的例子太过简单了，可能没达到你预期所想要的效果，甚至还不如使用 json 遍历呢，下面我列举一个是我实战中遇到的例子（实际上这样的例子特别多），我先把部分数据展示出来（删除部分没用到的参数，实际参数远比这多），然后通过 js 遍历，以及 jsonpath 来获取我想要的数据。

### 结构

![image-20210919194116296](https://img.kuizuo.cn/image-20210919194116296.png)

### 数据

```json
{
  "role": "unit",
  "children": [
    {
      "role": "section",
      "children": [
        {
          "role": "node",
          "children": [
            {
              "summary": "{\"indexMap\": {}, \"questionsList\": []}",
              "role": "group",
              "tab_type": "text",
              "name": "Learning objectives",
              "scoreDetail": [],
              "id": "u1g2",
              "url": "u1g2",
              "tags": []
            }
          ],
          "suggestedDuration": "0",
          "name": "1-1 Learning objectives",
          "block_id": "90ed499f91084e2aa1b7032d2e4ecd76",
          "url": "u1g1",
          "tags": []
        }
      ],
      "name": "Learning objectives",
      "tags": []
    },
    {
      "role": "section",
      "children": [
        {
          "role": "node",
          "children": [
            {
              "role": "node",
              "children": [
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "Practice-1",
                  "scoreDetail": [0],
                  "id": "u1g6",
                  "url": "u1g6",
                  "tags": []
                },
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "Practice-2",
                  "scoreDetail": [1, 1, 1, 1],
                  "id": "u1g7",
                  "url": "u1g7",
                  "tags": []
                },
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "Practice-3",
                  "scoreDetail": [1, 1, 1, 1, 1],
                  "id": "u1g544",
                  "url": "u1g544",
                  "tags": []
                },
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "Practice-4",
                  "scoreDetail": [1, 1, 1, 1, 1],
                  "id": "u1g9",
                  "url": "u1g9",
                  "tags": []
                }
              ],
              "name": "Practice",
              "block_id": "f6768dc9474746b9ba071e7f211534d9",
              "url": "u1g5",
              "tags": []
            }
          ],
          "suggestedDuration": "0",
          "name": "1-2 Sharing",
          "block_id": "1c97a87a9feb4a8aa7d6ed39482d866d",
          "url": "u1g3",
          "tags": []
        },
        {
          "role": "node",
          "children": [
            {
              "role": "group",
              "tab_type": "video",
              "name": "Get the skills",
              "scoreDetail": [],
              "id": "u1g16",
              "url": "u1g16",
              "tags": []
            },
            {
              "role": "node",
              "children": [
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "Use the skills-1",
                  "scoreDetail": [0, 0],
                  "id": "u1g615",
                  "url": "u1g615",
                  "tags": []
                },
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "Use the skills-2",
                  "scoreDetail": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                  "id": "u1g18",
                  "url": "u1g18",
                  "tags": []
                },
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "Use the skills-3",
                  "scoreDetail": [0, 0, 0, 0, 0, 0, 0],
                  "id": "u1g19",
                  "url": "u1g19",
                  "tags": []
                }
              ],
              "name": "Use the skills",
              "block_id": "2d8a81799bcc44ccab2646b613557b2b",
              "url": "u1g17",
              "tags": []
            },
            {
              "role": "node",
              "children": [
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "Think and speak",
                  "scoreDetail": [0],
                  "id": "u1g21",
                  "url": "u1g21",
                  "tags": []
                }
              ],
              "name": "Think and speak",
              "block_id": "5833925c8c5e4ddab7a114b15d610983",
              "url": "u1g20",
              "tags": []
            }
          ],
          "suggestedDuration": "0",
          "name": "1-3 Listening",
          "block_id": "681817aaf75845468e464e1a8d82f2c8",
          "url": "u1g14",
          "tags": []
        },
        {
          "role": "node",
          "children": [
            {
              "role": "node",
              "children": [
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "Get a clue",
                  "scoreDetail": [0, 0, 0],
                  "id": "u1g25",
                  "url": "u1g25",
                  "tags": []
                }
              ],
              "name": "Get a clue",
              "block_id": "b332335ab3554dffb92afcae5f815b5a",
              "url": "u1g24",
              "tags": []
            },
            {
              "role": "node",
              "children": [
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "View it-1",
                  "scoreDetail": [1, 1, 1, 1],
                  "id": "u1g27",
                  "url": "u1g27",
                  "tags": []
                },
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "View it-2",
                  "scoreDetail": [1, 1, 1, 1, 1, 1, 1],
                  "id": "u1g545",
                  "url": "u1g545",
                  "tags": []
                },
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "View it-3",
                  "scoreDetail": [1, 1, 1, 1, 1, 1, 1, 1],
                  "id": "u1g29",
                  "url": "u1g29",
                  "tags": []
                }
              ],
              "name": "View it",
              "block_id": "a2ecf6464d5f480e98242ebe4431a73b",
              "url": "u1g26",
              "tags": []
            },
            {
              "role": "node",
              "children": [
                {
                  "role": "group",
                  "tab_type": "task",
                  "name": "Think and speak",
                  "scoreDetail": [0, 0],
                  "id": "u1g31",
                  "url": "u1g31",
                  "tags": []
                }
              ],
              "name": "Think and speak",
              "block_id": "120d0784e63c414793f5e648c416144b",
              "url": "u1g30",
              "tags": []
            }
          ],
          "suggestedDuration": "0",
          "name": "1-4 Viewing",
          "block_id": "765a1be83ac5437aaca8fa150ad5af2e",
          "url": "u1g22",
          "tags": []
        }
      ],
      "name": "Listening to the world",
      "tags": []
    }
  ]
}
```

### 需求

可以看到数据比一开始的例子复杂了可不是一点，不过先别管这些数据是干啥的，说说需求，从结构上也能看出来，是有很多`children`嵌套的，而需求就是**获取`role`为`group`的`children`节点数据**

### js 实现遍历

先说说 js 如何实现的，我贴一下对应的代码（当时项目的代码，稍微修改的一点），可自己粘贴运行一下。

```js
let groupList = []
for (const node of json.children ?? []) {
  if (node.role == 'group') groupList.push({ ...node })

  for (const group of node.children ?? []) {
    if (group.role == 'group') groupList.push({ ...group })

    for (const child of group.children ?? []) {
      if (child.role == 'group') groupList.push({ ...child })

      let children4 = child.children ?? []
      for (const child of children4) {
        if (child.role == 'group') groupList.push({ ...child })
      }
    }
  }
}
console.log(groupList)
```

因为这些数据中，是存在不确定性的，也就是在当前节点下，二级节点可能有`children`，而其他节点下的二级很可能没有 `children`，所以我在这边就加上 `?? []` （Typescript 中的`??`语法，你可以把 `??` 当做 `||` ）来判断是否有`children`节点，有些读者可能会思考，为啥不用递归呢。说的是挺轻松的，但是递归是很容易出问题的，万一爬取到后台数据进行了一些修改，很有可能对于的递归算法将失效，甚至导致堆栈溢出，所以我这边值循环 4 级`chilren`节点（实际遇到的貌似也只有 4 级，谁又能保证爬取到数据就一定只有 4 级呢）。

### jsonpath 获取

于是了解到 jsonpath 后，我第一个时间就开始分析这样的数据，果不其然，得到了我想要的结果 ⬇️

![image-20210919200826079](https://img.kuizuo.cn/image-20210919200826079.png)

语法：`$..children[?(@.role=="group")]`

语法意思很明确，根节点下遍历所有`children`节点，同时`role`等于`group`，呈现的效果如上图。

而回到需求，**就是获取`role`为`group`的`children`节点数据**，而 jsonpath 就帮我轻松实现我想要的效果。

## 最终思考

实际上这样的需求我已经不止遇到一次，二次了，然而我寻求百度与群友的时候，给我的结果都不尽人意。但都没有提及到 jsonpath 来进行获取。也许是我的搜索方式有问题，但千篇一律都是 js 如何解析多层 json，以及遍历所有的子元素，虽然这些办法确实能解决我的问题，但每次遇到这种数据，都需要花上长时间去编写对应的逻辑。

在回想起当时爬取 HTML 页面数据的时候（数据与上面展示的差不多，都是树结构多层），而我只接触到了正则表达式，没了解过 CSS 选择器与 xpath。怎么办，为了实现目的，只好用现有的技术去实现，于是编写一个正则表达式就花费了近一个下午的时间，而使用 CSS 选择器 10 分钟不到就达到目的。没想到竟然有这么好用的方法，早知道多去了解点技术了。可能现在的心情和当时一样，只不过 HTML 换成了 JSON，编辑器还是那个编辑器，而我依旧还是我

也许这就是编程，也许这就是人生。

使用JSONPath解析json数据

使用 axios 请求 gbk 编码的网站，将会出现乱码，原因很简单，node 默认字符编码为 utf8，如果要正常显示 gbk 数据的话就需要将 gbk 转 utf8 格式。

## 解决办法

借助`iconv-lite`，不让 axios 自动处理响应数据，添加`responseType`和`transformResponse`参数，演示代码如下

```js
import axios from 'axios'
import * as iconv from 'iconv-lite'

axios
  .get(`https://www.ip138.com/`, {
    responseType: 'arraybuffer',
    transformResponse: [
      function (data) {
        return iconv.decode(data, 'gbk')
      },
    ],
  })
  .then((res) => {
    console.log(res.data)
  })
```

或者不使用`transformResponse`，在响应结束后使用`iconv.decode(res.data, 'gbk')`，使用`transformResponse`相对优雅一点。

如果返回的是 json 格式的话，可以直接`JSON.parse`转为 json 对象（前提得确保是 json 格式，不然解析报错）

```js
return JSON.parse(iconv.decode(data, 'gbk'))
```

axios请求gbk页面乱码解决

我当时学习开发 Chrome 插件的时候，还不会 Vue，更别说 Webpack 了，所以使用的都是原生的 html 开发，效率就不提了，而这次就准备使用 vue-cli 来进行编写一个某 B 站获取视频信息,评论的功能（原本是打算做自动回复的），顺便巩固下 chrome 开发（快一年没碰脚本类相关技术了），顺便写套模板供自己后续编写 Chrome 插件做铺垫。



## 环境搭建

[Vue Web-Extension - A Web-Extension preset for VueJS (vue-web-extension.netlify.app)](https://vue-web-extension.netlify.app/)

```bash
npm install -g @vue/cli
npm install -g @vue/cli-init
vue create --preset kocal/vue-web-extension my-extension
cd my-extension
npm run server
```

会提供几个选项，如 Eslint，background.js，tab 页，axios，如下图

![image-20210916142751129](https://img.kuizuo.cn/image-20210916142751129.png)

选择完后，将会自动下载依赖，通过 npm run server 将会在根目录生成 dist 文件夹，将该文件拖至 Chrome 插件管理便可安装，由于使用了 webpack，所以更改代码将会热更新，不用反复的编译导入。

### 项目结构

```tree
├─src
|  ├─App.vue
|  ├─background.js
|  ├─main.js
|  ├─manifest.json
|  ├─views
|  |   ├─About.vue
|  |   └Home.vue
|  ├─store
|  |   └index.js
|  ├─standalone
|  |     ├─App.vue
|  |     └main.js
|  ├─router
|  |   └index.js
|  ├─popup
|  |   ├─App.vue
|  |   └main.js
|  ├─override
|  |    ├─App.vue
|  |    └main.js
|  ├─options
|  |    ├─App.vue
|  |    └main.js
|  ├─devtools
|  |    ├─App.vue
|  |    └main.js
|  ├─content-scripts
|  |        └content-script.js
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
├─.browserslistrc
├─.eslintrc.js
├─.gitignore
├─babel.config.js
├─package.json
├─vue.config.js
├─yarn.lock
```

根据所选的页面，并在 src 与 vue.config.js 中配置页面信息编译后 dist 目录结构如下

```
├─devtools.html
├─favicon.ico
├─index.html
├─manifest.json
├─options.html
├─override.html
├─popup.html
├─_locales
├─js
├─icons
├─css
```

### 安装组件库

#### 安装 elementUI

整体的开发和 vue2 开发基本上没太大的区别，不过既然是用 vue 来开发的话，那肯定少不了组件库了。

要导入 Element-ui 也十分简单，`Vue.use(ElementUI); `Vue2 中怎么导入 element，便怎么导入。演示如下

![image-20210916150154078](https://img.kuizuo.cn/image-20210916150154078.png)

不过我没有使用 babel-plugin-component 来按需引入，按需引入一个按钮打包后大约 1.6m，而全量引入则是 5.5 左右。至于为什么不用，因为我需要在 content-scripts.js 中引入 element 组件，如果使用 babel-plugin-component 将无法按需导入组件以及样式（应该是只支持 vue 文件按需引入，总之就是折腾了我一个晚上的时间）

#### 安装 tailwindcss

不过官方提供了如何使用 TailwindCSS，这里就演示一下

[在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档](https://www.tailwindcss.cn/docs/guides/vue-3-vite)

推荐安装低版本，最新版有兼容性问题

```bash
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```

创建 postcss.config.js 文件

```js title="postcss.config.js"
// postcss.config.js
module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'), // if you have installed `autoprefixer`
    // ...
  ],
}
```

创建 tailwind.config.js 文件

```js title="tailwind.config.js"
// tailwind.config.js
module.exports = {
  purge: {
    // Specify the paths to all of the template files in your project
    content: ['src/**/*.vue'],

    // Whitelist selectors by using regular expression
    whitelistPatterns: [
      /-(leave|enter|appear)(|-(to|from|active))$/, // transitions
      /data-v-.*/, // scoped css
    ],
  },
  // ...
}
```

在 src/popup/App.vue 中导入样式，或在新建 style.css 在 mian.js 中`import "../style.css";`

```vue title="src/popup/App.vue"
<style>
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;
</style>
```

从官方例子导入一个登陆表单，效果如下

![image-20210916152633247](https://img.kuizuo.cn/image-20210916152633247.png)

## 项目搭建

### 页面搭建

页面搭建就没什么好说的了，因为使用的是 element-ui，所以页面很快就搭建完毕了，效果如图

![image-20210918115438700](https://img.kuizuo.cn/image-20210918115438700.png)

### 悬浮窗

悬浮窗其实可有可无，不过之前写 Chrome 插件的时候就写了悬浮窗，所以 vue 版的也顺带写一份。

要注意的是悬浮窗是内嵌到网页的（且在 document 加载前载入，也就是`"run_at": "document_start"`），所以需要通过 content-scripts.js 才能操作页面 Dom 元素，首先在配置清单 manifest.json 与 vue.confing.js 中匹配要添加的网站，以及注入的 js 代码，如下

```json title="manifest.json"
  "content_scripts": [
    {
      "matches": ["https://www.bilibili.com/video/*"],
      "js": ["js/jquery.js", "js/content-script.js"],
      "css": ["css/index.css"],
      "run_at": "document_start"
    },
    {
      "matches": ["https://www.bilibili.com/video/*"],
      "js": ["js/jquery.js", "js/bilibili.js"],
      "run_at": "document_end"
    }
  ]
```

```js title="vue.config.js"
	contentScripts: {
          entries: {
            'content-script': ['src/content-scripts/content-script.js'],
            bilibili: ['src/content-scripts/bilibili.js'],
          },
        },
```

由于是用 Vue，但又要在 js 中生成组件，就使用`document.createElement`来进行创建元素，Vue 组件如下（可拖拽）

![image-20210917142340863](https://img.kuizuo.cn/image-20210917142340863.png)

:::warning

如果使用`babel-plugin-component`按需引入，组件的样式将无法载入，同时自定义组件如果编写了 style 标签，那么也同样无法载入，报错：Cannot read properties of undefined (reading 'appendChild')

大致就是 css-loader 无法加载对应的 css 代码，如果执意要写 css 的话，直接在 manifest.json 中注入 css 即可

:::

<details open>
   <summary>完整代码</summary>

```js title="content-script.js"
// 注意，这里引入的vue是运行时的模块，因为content是插入到目标页面，对组件的渲染需要运行时的vue， 而不是编译环境的vue （我也不知道我在说啥，反正大概意思就是这样）
import Vue from 'vue/dist/vue.esm.js'
import ElementUI, { Message } from 'element-ui'
Vue.use(ElementUI)

// 注意，必须设置了run_at=document_start此段代码才会生效
document.addEventListener('DOMContentLoaded', function () {
  console.log('vue-chrome扩展已载入')

  insertFloat()
})

// 在target页面中新建一个带有id的dom元素，将vue对象挂载到这个dom上。
function insertFloat() {
  let element = document.createElement('div')
  let attr = document.createAttribute('id')
  attr.value = 'appPlugin'
  element.setAttributeNode(attr)
  document.getElementsByTagName('body')[0].appendChild(element)

  let link = document.createElement('link')
  let linkAttr = document.createAttribute('rel')
  linkAttr.value = 'stylesheet'
  let linkHref = document.createAttribute('href')
  linkHref.value = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
  link.setAttributeNode(linkAttr)
  link.setAttributeNode(linkHref)
  document.getElementsByTagName('head')[0].appendChild(link)

  let left = 0
  let top = 0
  let mx = 0
  let my = 0
  let onDrag = false

  var drag = {
    inserted: function (el) {
      ;(el.onmousedown = function (e) {
        left = el.offsetLeft
        top = el.offsetTop
        mx = e.clientX
        my = e.clientY
        if (my - top > 40) return

        onDrag = true
      }),
        (window.onmousemove = function (e) {
          if (onDrag) {
            let nx = e.clientX - mx + left
            let ny = e.clientY - my + top
            let width = el.clientWidth
            let height = el.clientHeight
            let bodyWidth = window.document.body.clientWidth
            let bodyHeight = window.document.body.clientHeight

            if (nx < 0) nx = 0
            if (ny < 0) ny = 0

            if (ny > bodyHeight - height && bodyHeight - height > 0) {
              ny = bodyHeight - height
            }

            if (nx > bodyWidth - width) {
              nx = bodyWidth - width
            }

            el.style.left = nx + 'px'
            el.style.top = ny + 'px'
          }
        }),
        (el.onmouseup = function (e) {
          if (onDrag) {
            onDrag = false
          }
        })
    },
  }

  window.kz_vm = new Vue({
    el: '#appPlugin',
    directives: {
      drag: drag,
    },
    template: `
      <div class="float-page" ref="float" v-drag>
        <el-card class="box-card" :body-style="{ padding: '15px' }">
          <div slot="header" class="clearfix" style="cursor: move">
            <span>悬浮窗</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="toggle">{{ show ? '收起' : '展开'}}</el-button>
          </div>
          <transition name="ul">
            <div v-if="show" class="ul-box">
              <span> {{user}} </span>
            </div>
          </transition>
        </el-card>
      </div>
      `,
    data: function () {
      return {
        show: true,
        list: [],
        user: {
          username: '',
          follow: 0,
          title: '',
          view: 0,
        },
      }
    },
    mounted() {},
    methods: {
      toggle() {
        this.show = !this.show
      },
    },
  })
}
```

</details>

因为只能在 js 中编写 vue 组件，所以得用 template 模板，同时使用了 directives，给组件添加了拖拽的功能（尤其是`window.onmousemove`，如果是元素绑定他自身的鼠标移动事件，那么拖拽鼠标将会十分卡顿），还使用了 transition 来进行缓慢动画效果其中注入的 css 代码如下

```css
.float-page {
  width: 400px;
  border-radius: 8px;
  position: fixed;
  left: 50%;
  top: 25%;
  z-index: 1000001;
}

.el-card__header {
  padding: 10px 15px !important;
}

.ul-box {
  height: 200px;
  overflow: hidden;
}

.ul-enter-active,
.ul-leave-active {
  transition: all 0.5s;
}
.ul-enter,
.ul-leave-to {
  height: 0;
}
```

相关逻辑可自行观看，这里不在赘述了，并不复杂。

也顺带是复习一下 HTML 中鼠标事件和 vue 自定义命令了

### 功能实现

主要功能

- 检测视频页面，输出对应 up 主，关注数以及视频标题播放（参数过多就不一一显示了）

- 监控关键词根据内容判断是否点赞，例如文本出现了下次一定，那么就点赞。

#### 输出相关信息

这个其实只要接触过一丢丢爬虫的肯定都会知道如何实现，通过右键审查元素，像这样

![image-20210918104907148](https://img.kuizuo.cn/image-20210918104907148.png)

然后使用 dom 操作，选择对应的元素，输出便可

```js
> document.querySelector("#v_upinfo > div.up-info_right > div.name > a.username").innerText
< '老番茄'
```

当然使用 JQuery 效果也是一样的。后续我都会使用 JQuery 来进行操作

在 src/content-script/bilibili.js 中写下如下代码

```js
window.onload = function () {
  console.log('加载完毕')

  function getInfo() {
    let username = $('#v_upinfo > div.up-info_right > div.name > a.username').text()
    let follow = $(
      `#v_upinfo > div.up-info_right > div.btn-panel > div.default-btn.follow-btn.btn-transition.b-gz.following > span > span > span`,
    ).text()
    let title = $(`#viewbox_report > h1 > span`).text()
    let view = $('#viewbox_report > div > span.view').attr('title')

    console.log(username, follow, title, view)
  }

  getInfo()
}
```

重新加载插件，然后输出查看结果

```
加载完毕
bilibili.js:19 老番茄 1606.0万 顶级画质 总播放数2368406
```

这些数据肯定单纯的输出肯定是没什么作用的，要能显示到内嵌悬浮窗口，或者是 popup 页面上（甚至发送 ajax 请求到远程服务器上保存）

对上面代码微改一下

```js
window.onload = function () {
  console.log('加载完毕')

  function getInfo() {
    let username = $('#v_upinfo > div.up-info_right > div.name > a.username').text().trim()
    let follow = $(
      `#v_upinfo > div.up-info_right > div.btn-panel > div.default-btn.follow-btn.btn-transition.b-gz.following > span > span > span`,
    ).text()
    let title = $(`#viewbox_report > h1 > span`).text()
    let view = $('#viewbox_report > div > span.view').attr('title')

    //console.log(username, follow, title, view);
    window.kz_vm.user = {
      username,
      follow,
      title,
      view,
    }
  }
  getInfo()
}
```

其中`window.kz_vm`是通过`window.kz_vm = new Vue()` 初始化的，方便我们操作 vm 对象，就需要通过 jquery 选择元素在添加属性了。如果你想的话也可以直接在 content-script.js 上编写代码，这样就无需使用 window 对象，但这样导致一些业务逻辑都堆在一个文件里，所以我习惯分成 bilibili.js 然后注入方式为 document_end，然后在操作 dom 元素吗，实现效果如下

![image-20210918110958104](https://img.kuizuo.cn/image-20210918110958104.png)

如果像显示到 popup 页面只需要通过页面通信就行了，不过前提得先 popup 打开才行，所以一般都是通过 background 来进行中转，一般来说很少 content –> popup（因为操作 popup 的前提都是 popup 要打开），相对更多的是 content –> background 或 popup –> content

[content-script 主动发消息给后台 我是小茗同学 - 博客园 (cnblogs.com)](https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html#content-script主动发消息给后台)

#### 实现评论

这边简单编写了一下页面，通过 popup 给 content，让 content 输入评论内容，与点击发送，先看效果

![bilibili_comment](https://img.kuizuo.cn/bilibili_comment.gif)

同样的，找到对应元素位置

```js
// 评论文本框
$('#comment > div > div.comment > div > div.comment-send > div.textarea-container > textarea').val(
  '要回复的内容',
)
// 评论按钮
$('#comment > div > div.comment > div > div.comment-send > div.textarea-container > button').click()
```

接着就是写页面通信的了，可以看到是 popup 向 content 发送请求

```js title="src/content-script/bilibili.js"
window.onload = function () {
  console.log('content加载完毕')

  function comment() {
    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
      let { cmd, message } = request
      if (cmd === 'addComment') {
        $(
          '#comment > div > div.comment > div > div.comment-send > div.textarea-container > textarea',
        ).val(message)
        $(
          '#comment > div > div.comment > div > div.comment-send > div.textarea-container > button',
        ).click()
      }

      sendResponse('我收到了你的消息！')
    })
  }

  comment()
}
```

```html title="src/popup/App.vue"
<template>
  <div>
    <el-container>
      <el-header height="24">B站小工具</el-header>
      <el-main>
        <el-row :gutter="5">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="message"
            class="mb-5"
          >
          </el-input>

          <div>
            <el-button @click="addComment">评论</el-button>
          </div>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        message: '',
        list: [],
        open: false,
      }
    },
    created() {
      chrome.storage.sync.get('list', obj => {
        this.list = obj['list']
      })
    },
    mounted() {
      chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
        console.log('收到来自content-script的消息：')
        console.log(request, sender, sendResponse)
        sendResponse('我是后台，我已收到你的消息：' + JSON.stringify(request))
      })
    },
    methods: {
      sendMessageToContentScript(message, callback) {
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
          chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
            if (callback) callback(response)
          })
        })
      },
      addComment() {
        this.sendMessageToContentScript({ cmd: 'addComment', message: this.message }, function () {
          console.log('来自content的回复：' + response)
        })
      },
    },
  }
</script>
```

代码就不解读了，调用 sendMessageToContentScript 方法即可。相关源码可自行下载查看

实现类似点赞功能也是同理的。

## 相关模板

[vitesse-webext](https://github.com/antfu/vitesse-webext)

[plasmo](https://www.plasmo.com/)

## 整体体验

当时写 Chrome 插件的效率不能说慢，反正不快就是了，像一些 tips，都得自行封装。用过 Vue 的都知道写网页很方便，写 Chrome 插件未尝不是编写一个网页，当时的我在接触了 Vue 后就萌发了使用 vue 来编写 Chrome 的想法，当然肯定不止我一个这么想过，所以我在 github 上就能搜索到相应的源码，于是就有了这篇文章。

如果有涉及到爬取数据相关的，我肯定是首选使用 HTTP 协议，如果在搞不定我会选择使用 puppeteerjs，不过 Chrome 插件主要还是增强页面功能的，可以实现原本页面不具备的功能。

本文仅仅只是初步体验，简单编写了个小项目，后期有可能会实现一个百度网盘一键填写提取码，Js 自吐 Hooke 相关的。（原本是打算做 pdd 商家自动回复的，客户说要用客户端而不是网页端（客户端可以多号登陆），无奈，这篇博客就拿 B 站来演示了）

使用Vue开发Chrome插件

## 前言

在写资源导航的时候，我在将资源分类为一个文件的时候，发现如果我每定义一个分类，那我就需要创建一个文件，然后又要通过`import form`导入，就很烦躁。

![image-20210912080353288](https://img.kuizuo.cn/image-20210912080353288.png)

突然想到貌似 vue-element-admin 中的路由好像也是这样的，而 store 貌似定义完就无需再次导入，于是就开始研究代码，果不其然，发现了`require.context`

![image-20210912080429237](https://img.kuizuo.cn/image-20210912080429237.png)

[依赖管理 | webpack 中文文档 (docschina.org)](https://webpack.docschina.org/guides/dependency-management/)

## 实现

require.context：是一个 webpack 提供的 api,通过执行 require.context 函数遍历获取到指定文件夹（及其下子文件夹）内的指定文件，然后自动导入。

语法：`require.context(directory, useSubdirectories = false, regExp = /^.//)`

- directory 指定文件
- useSubdirectories 是否遍历目录的子目录
- regExp 匹配文件的正则表达式，即文件类型

而上图代码中对应的代码也明确表达要指定`./modules`目录下的，所有 js 文件

```js
const modulesFiles = require.context('./modules', true, /\.js$/)
```

输出一下看看 modulesFiles 到底是什么(console.dir 输出)

![image-20210912081146031](https://img.kuizuo.cn/image-20210912081146031.png)

返回一个函数，但该函数包含三个属性 resolve()、keys()、id

其中`modulesFiles.keys()`则是指定目录下文件名数组

```
 ['./app.js', './permission.js','./settings.js', './tagsView.js', './user.js']
```

接着看下 vue-element-admin 中的下一行代码

```js
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
```

这边先输出一下 modules，看下结果是什么

![image-20210912081553729](https://img.kuizuo.cn/image-20210912081553729.png)

没错，正对应着 modules 下的所有文件，以及所导出的对象

其中在循环体中还调用了`const value = modulesFiles(modulePath)`，其中 value 是 Module 对象，有个属性`default`，通过`value.default`便可获取到对应模块所导出的内容。

就此便可以实现自动导入模块。不过由于导出的是 store 对象，所封装的代码也有点过于复杂，这边我贴下我是如何自动导入数组对象的

```typescript
const modulesFiles = require.context('./modules', true, /\.ts$/)

let allData: any[] = []

modulesFiles.keys().forEach((modulePath) => {
  const value = modulesFiles(modulePath)
  let data = value.default

  if (!data) return
  allData.push(...value.default)
})
```

## 参考链接

> [前端优化之 -- 使用 require.context 让项目实现路由自动导入 - 沐浴点阳光 - 博客园 (cnblogs.com)](https://www.cnblogs.com/garfieldzhong/p/12585280.html)

使用 require.context 实现模块自动导入

## 安装 Go

[golang.org](https://golang.org/)

[go 下载地址](https://studygolang.com/dl)

[GoLand](https://www.jetbrains.com/go/download/download-thanks.html)

下载安装包，选择路径，默认下一步即可

## 配置环境变量

**GOROOT 即为 GO 的安装目录。**设置为 `E:\Go`

**GOPATH 即为存储 Go 工具依赖的路径**，可以自己进行设值，我放在了 GoWorks 自己建的，里面需要包含 src、pkg、bin 三个目录。 设置为 `E:\GoWork`

## 配置 Go 代理

[GOPROXY.IO - 一个全球代理 为 Go 模块而生](https://goproxy.io/zh/)

windows

```bash
# 设置goproxy.io代理
go env -w GOPROXY="https://proxy.golang.com.cn,direct"
# 设置GO111MOUDLE
go env -w GO111MODULE="on"

```

临时设置(不推荐)

```bash
# 配置 GOPROXY 环境变量
$env:GOPROXY = "https://proxy.golang.com.cn,direct"
# 还可以设置不走 proxy 的私有仓库或组，多个用逗号相隔（可选）
$env:GOPRIVATE = "git.mycompany.com,github.com/my/private"
```

mac/linux 下

```bash
# 配置 GOPROXY 环境变量
export GOPROXY=https://proxy.golang.com.cn,direct
# 还可以设置不走 proxy 的私有仓库或组，多个用逗号相隔（可选）
export GOPRIVATE=git.mycompany.com,github.com/my/private
```

### 常用的 go 代理

- goproxy [https://goproxy.io/zh/](https://goproxy.io/zh/)
- 阿里云 [https://mirrors.aliyun.com/goproxy/](https://mirrors.aliyun.com/goproxy/)
- 七牛云 [https://goproxy.cn](https://goproxy.cn)

可输出 go env 查看环境

## 配置 VSCode 开发环境

[VsCode 中 Golang Tools 使用 · 语雀 (yuque.com)](https://www.yuque.com/flipped-aurora/gqbcfk/lidsv6)

这里使用的是 VSCode 进行开发，在扩展程序中安装 Go 插件，输入

- `command` + `shift` + `p` 输入 Go:Show All Commands 选择 Go:Install/Update Tools，选择所有工具，并确定安装。

![image-20210901044224765](https://img.kuizuo.cn/image-20210901044224765.png)

控制台输出安装结果

![image-20210901044323709](https://img.kuizuo.cn/image-20210901044323709.png)

或者打开命令提示符（以管理员身份打开）输入

```bash
go get -v github.com/mdempsky/gocode
go get -v github.com/uudashr/gopkgs/v2/cmd/gopkgs
go get -v github.com/rogpeppe/godef
go get -u github.com/ramya-rao-a/go-outline
go get -v github.com/sqs/goreturns
```

安装 go 的开发依赖，比如语法提示，包提示等等。安装完成后，就此配置完成 Vscode 的 Go 开发环境。

## Goland

没什么好说的，大部分配置无需操作即可使用，不过个人还是倾向于使用 VSCode。