2.快速上手油猴插件开发（实战篇二）.md · wangzhenzhou/zhufeng_plug-in components_2102

# 知乎目录（zhihu-helper）

## 一、**成品展示**

![demo1](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/demo1.gif)

安装地址：

1. 安装[油猴插件](https://chrome.google.com/webstore/detail/tampermonkey-beta/gcalenpjmijncebpfijmoaglllgpjagf?hl=zh-CN) （如果安装过则不用再安）
2. 安装 [zhihu-helper](https://greasyfork.org/zh-CN/scripts/421238-zhihu-helper)

代码地址：[wokoo/zhihu-helper](https://github.com/kinyaying/wokoo/tree/master/example/zhihu-helper)

## 二、**开发步骤**

### 1.1 项目安装 & 初始化配置

```js
npm i wokoo -g
wokoo zhihu-help
```

选择模板

- [ ] vue
- [ ] react

这里选择react，等待项目安装。项目安装完成后，根据提示执行下命令：

```shell
cd zhihu-helper
npm start
```

- 打开油猴脚本编辑器，把tampermonkey.js的内容复制进去。

![tampermonkey](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/tampermonkey.png)

![copy-tampermonkey](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/copy-tampermonkey.png)

- 打开网页[知乎专栏](https://zhuanlan.zhihu.com/mandy)，右上角出现一只猴子图标，说明项目已跑通。

**补充说明**

此处有的浏览器不会出现猴子图标。打开控制台可见报错：

![](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/zhihu-error.png)

原因是知乎使用了csp内容安全策略，只允许加载指定域名的js。具体情况可阅读 👉 [内容安全策略( CSP )](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP)

![](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/zhihu-1.png)

**如何绕过此安全策略，此处给两个方法：**

1. 安装插件[Disable Content-Security-Policy](https://chrome.pictureknow.com/extension?id=5b80153e8db143afa59310bc0f282f1f), 在调试知乎页面时开启插件，自动把content-security-policy给设置为空。

![](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/zhihu-2.png)

2. 会配置charles的同学，可以设置一条转发规则

![](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/zhihu-3.png)

![](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/zhihu-4.png)

![](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/zhihu-5.png)

这两种方法都可以绕过安全策略。

遇到这中csp内容安全策略的网页，在上线到油猴商店的时候不能用托管cdn的方式，要将代码复制到编辑框中。

### 1.2 开发基本功能

整理思路

1. 绘制左侧抽屉弹窗
2. 弹窗弹出时请求知乎列表接口，拿到列表数据
3. 下拉时实现加载更多的功能

下面我们来逐步实现吧~

**步骤1. 绘制左侧抽屉弹窗**

主要通过this.state.show控制弹窗的显示隐藏。此步骤挺简单的，可以直接看代码:[step1](https://github.com/kinyaying/wokoo/blob/master/example/zhihu-helper/src/step1.js)，可以将index.js入口里的app替换成step1查看效果。

**步骤2. 请求[知乎列表](https://www.zhihu.com/api/v4/columns)接口，获取列表数据**

- 安装axios，并引入

```shell
npm install axios
```

- 计算请求参数

分析请求的url可知，请求接口为：

```js
`https://www.zhihu.com/api/v4/columns${this.queryName}/items?limit=20&offset=${offset}`
```

其中this.queryName是专栏名称，当页面为[专栏列表页](https://zhuanlan.zhihu.com/mandy)时就是pathname; 当页面为[专栏详情页](https://zhuanlan.zhihu.com/p/348005704)时，需要通过类名为`ColumnPageHeader-TitleColumn`的a标签的href来获取。

![zhihu](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/zhihu.png)

![zhihu1](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/zhihu1.png)

通过这两张图应该更好理解getQueryName方法

```js
getQueryName = () => {
    let pathname = location.pathname
    let detailRegExp = /^\/p\/\d+/
    let queryName = ''
    // 专栏详情页
    if (detailRegExp.test(pathname)) {
      let aTage = document.getElementsByClassName(
        'ColumnPageHeader-TitleColumn'
      )
      let url = aTage[0].href
      queryName = url.slice(url.lastIndexOf('/'))
    } else {
      // 专栏列表页
      // http://zhuanlan.zhihu和http://zhihu/column两种情况都是专栏
      if (pathname.indexOf('/column') === 0) {
        pathname = pathname.slice('/column'.length)
      }
      queryName = pathname
    }
    this.queryName = queryName
  }
```

而列表页又存在两种域名：https://www.zhihu.com/column/mandy    和 https://zhuanlan.zhihu.com/mandy  所以在`else`逻辑里针对`https://www.zhihu.com/column/mandy  `做了处理，只保留/mandy

通过getQueryName方法，我们获取到了请求参数

- 发送请求，拉取目录列表

```js
getList = async () => {
    if (!this.state.hasMore) return
    let { offset } = this.state
    let { data } = await axios.get(
      `https://www.zhihu.com/api/v4/columns${this.queryName}/items?limit=20&offset=${offset}`
    )
    let list = data.data.map((i) => ({
      title: i.title,
      url: i.url,
      id: i.id,
      commentCount: i.comment_count,
      voteupCount: i.voteup_count,
    }))
    if (data.paging.is_end) {
      this.setState({ hasMore: false })
    }
    offset += limit

this.setState({
      list: [...this.state.list, ...list],
      offset,
    })
  }
```

第二步的过程实现完了，代码在这里👉[step2](https://github.com/kinyaying/wokoo/blob/master/example/zhihu-helper/src/step2.js) ，可以将index.js入口里的app替换成step2查看效果。

这时插件的效果是这样的，除了没有下拉加载功能，其他基本完工了。

![image-20210206004837608](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/image-20210206004837608.png)

**步骤3. 下拉时实现加载更多的功能**

无限滚动的组件引了第三方库[react-infinite-scroll-component](https://www.npmjs.com/package/react-infinite-scroll-component)：

```shell
npm install react-infinite-scroll-component
```

主要是在render函数里增加InfiniteScroll组件，注意InfiniteScroll的height需要通过计算给一个固定的值，否则无法触发滚动。

```js
<ul className="list-ul" onMouseLeave={this.handleMouseLeave}>
  <InfiniteScroll
		dataLength={list.length}
		next={this.handleInfiniteOnLoad}
		hasMore={hasMore}
		loader={<h4>Loading...</h4>}
    height={document.documentElement.clientHeight - 53}
		endMessage={
  		<p style={{ textAlign: 'center' }}>
    		<b>到底了，没内容啦~</b>
			</p>
		}
  >
    {list.map((i) => (
      <li className="list-li" key={i.id}>
      ...
      </li>
))}
  </InfiniteScroll>
</ul>
```

此时功能已经开发完成，具体代码查看 👉[app.js](https://github.com/kinyaying/wokoo/blob/master/example/zhihu-helper/src/app.js)

## 三、部署插件到油猴商店

**3.1 构建**

执行命令

```shell
npm run build
```

**3.2 确认油猴脚本文件tampermonkey.js**

此文件中被注释掉的//@xxx 都有含义，可以对应着 [tampermonkey开发文档 ](https://www.tampermonkey.net/documentation.php?version=4.6&ext=dhdg) 理解。

- @description 插件描述

- @match 指定某些域名下开启此插件，默认配了两条，`// @match        https://*/*`和`// @match        https://*/*`表示在所有域名下都开启。但是此处希望只在zhihu专栏里使用此插件，所以要修改@math字段。

```js
  // @match        https://zhuanlan.zhihu.com/*
  // @match        https://www.zhihu.com/column/*
  ```

- @require 油猴脚本内部帮忙引入第三方资源，比如jquery，react等。

```js
  // @require https://unpkg.com/react@17/umd/react.production.min.js
  // @require https://unpkg.com/react-dom@17/umd/react-dom.production.min.js
  ```

**3.3 发布插件到油猴市场**

发布油猴市场的优点是不用审核，即发即用，非常方便。

1. 将/dist/app.bundle.js 文件部署到 cdn 上，获取到对应 url。

**注意：**

- js文件可放到 github 上，如果托管到 github 上最好做 cdn 加速（我使用cdn.jsdelivr.net进行cdn加速）。

- 如果没有cdn服务器可跳过此步骤，在步骤4直接将app.bundle.js复制到油猴脚本编辑器中

2. 登录[油猴市场](https://greasyfork.org/)，谷歌账号或 github 账号都可使用。

3. 点击账号名称，再点击「发布你编写的脚本」

![wokoo-tamp3](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/wokoo-tamp3.png)

![wokoo-tamp4](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/wokoo-tamp4.png)

4. 进入编辑页，将 tampermonkey.js 里的内容复制到编辑框中

注意：

- 步骤1中如果托管了cdn，需要将代码中的`localhost:8080`网址替换成静态资源 url

- 步骤1中没有托管cdn，不能直接将/dist/app.bundle.js文件里的内容复制编辑框。因为编辑框内代码有最大限制，我们构建的app.bundle.js把react等三方库构建进去超过最大限制了。

需要对构建结果进行拆包

4.1 修改  tampermonkey.js ，通过@require方式引入react和react-dom

```js
     // ==UserScript==
     // @name         zhihu-helper
     // @namespace    http://tampermonkey.net/
     // @version      0.0.1
     // @description  知乎目录
     // @author       xx
     // @match        https://zhuanlan.zhihu.com/*
     // @match        https://www.zhihu.com/column/*
     // @require https://unpkg.com/react@17/umd/react.production.min.js
     // @require https://unpkg.com/react-dom@17/umd/react-dom.production.min.js
     
     // ==/UserScript==
     
     // app.bundle.js构建好的代码
     ```

4.2 修改webpack.config.base.js的entry字段

```js
     entry: {
         app: '/src/index.js',
         vendor: [
           // 将react和react-dom这些单独打包出来，减小打包文件体积
           'react',
           'react-dom',
         ],
       },
     ```

4.3 重新执行`npm run build` 构建出新的app.bundle.js，复制到油猴市场的编辑框内。

![zhihu-tampermonkey](https://gitee.com/zhufengpeixun/browser-plugin/raw/master/img/zhihu-tampermonkey.png)

5. 点击 「发布脚本」即可

wangzhenzhou/zhufeng_plug-in components_2102

简介

发行版

贡献者

近期动态