前端花园
0%

5分钟上手开发浏览器插件——油猴脚手架wokoo(使用篇)

发表于 更新于

油猴插件是什么？

油猴插件(Tampermonkey) 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于 Chrome, Edge, Safari等多个浏览器。油猴脚本本质上是在网页上插入一段 JavaScript(JS) 代码，开发者在代码中编写内容，开发插件。此外，它还提供Userscript Header和Application Programming Interface给开发者，用来实现原生 JS 无法实现的功能。

油猴插件的开发文档请看这里 👉 [油猴插件开发文档]

为什么要开发wokoo脚手架

油猴插件的基本原理是支持用户使用js编写脚本代码，再在网页的环境上下文运行。

在油猴插件生成的基础项目中，可以看到什么都没有配置，它只支持原生js开发。这对于我们熟悉vue或react的FEer来说影响效率。我们需要自己搭建一个基础的项目工程，进行开发。还要配置油猴脚本内容，确保油猴插件引入了我们开发的js代码，比较麻烦。而wokoo则是为了解决这个问题。

img

先介绍下wokoo脚手架的成果：

wokoo脚手架github仓库

安装油猴插件：油猴插件安装地址

安装demo插件: wokoo-demo （详细安装过程可查看 ➡️ wokoo-demo/readme）

安装完成后的效果如下：

img

wokoo是什么

一款油猴插件的脚手架。如果直接开发油猴插件，开发者需要费时搭建vue或react基础项目，还需要对油猴脚本区域做对应的配置，开发体验差。

wokoo可以一键式生成基础项目，并且提供基础Tampermonkey配置。

主要提供的功能有：

  • 命令行式创建脚手架初始项目
  • 根据用户选择，生成vue、react的基本项目
  • tampermonkey.txt 文件中提供Tampermonkey配置

项目设计图

img

wokoo脚手架的设计参考了create-react-app，我也曾经写过一篇分析cra源码的文章，感兴趣的同学可以阅读这篇👉create-react-app核心源码解读。

wokoo主要使用lerna进行包管理，在packages里维护了两个模块：wokoo-scripts 和 wokoo-template。

wokoo-scripts：

分析终端用户输入的命令行，根据用户输入的选项生成对应的初始化项目

wokoo-template：项目模板

  • 分为vue和react
  • 支持基础的webpack配置
  • tampermonkey.txt 文件中是油猴编辑器内容，用户不必自己编写油猴脚本的配置。并且此处做了优化，在tampermonkey.txt中使用动态引入js脚本的方案，而不是@require引入js文件方式，解决开发时静态资源缓存问题。

wokoo工作流如下图👇：

img

wokoo脚手架使用

  1. 安装 
1
2
npm i wokoo -g
复制代码
  1. 创建my-plugin项目
1
2
wokoo my-plugin
复制代码
  1. 选择框架：控制台出现提示 ➡️ which template do you prefer?

[ ] vue

[ ] react

  1. 选择完毕后自动初始化项目

  2. cd my-plugin 能够看到生成的原始项目

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.
├── README.md 
├── package-lock.json
├── package.json
├── public                    静态文件
│   ├── favicon.ico
│   ├── icon.jpg
│   └── index.html            html文件
├── src
│   ├── app.less
│   ├── app.js
│   └── index.js             项目入口
├── tampermonkey.txt         油猴脚本入口文件
├── webpack.config.base.js
└── webpack.config.js        webpack 配置
复制代码

此处展示的是react项目的目录结构，vue项目的结构类似，不再展示。

其中tampermonkey.txt文件内是油猴脚本配置，需要将里面的内容复制到Tampermonkey编辑器里。

开发&调试

  1. 启动

进入项目目录后，在命令行中输入：

1
2
npm start
复制代码

  1. 打开浏览器，输入localhost:8080，查看页面展示是否正常。

  2. 打开油猴插件编辑界面，将 tampermonkey.txt 里的内容复制到编辑框中，保存。（此步骤默认你已经安装了油猴插件，没安装的话就安装下 👉油猴插件安装地址）

img

img

tampermonkey.txt 中的js逻辑是给html拼上script标签来获取外部js文件，在开发过程中不要担心缓存问题，开发完代码后能直接在浏览器看到最新的效果。

  1. 打开任意一个网页，比如www.baidu.com
  • 查看油猴 icon 是否有一个 1 的数字标志，如果有说明油猴脚本已经成功激活
  • 网页的右上角会出现一只猴子，说明代码已经跑通

img

  1. 接下来可以修改业务代码进行自定义的插件开发啦~ 🎊🎊

构建

执行命令

1
2
npm run build
复制代码

发布插件到油猴市场

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

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

注意：

  • js文件可放到 github 上，如果托管到 github 上最好做 cdn 加速

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

  1. 登录油猴市场，谷歌账号或 github 账号都可使用。

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

    img

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

注意：

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

  • 步骤1中没有托管cdn，则将/dist/app.bundle.js文件里的内容复制到下图红框位置

    img

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

参考

create-react-app核心源码解读

油猴市场

油猴插件开发文档

——

未来wokoo脚手架也会持续更新，如果有相关问题或建议可以在github上提issue或者联系我 email: kinyaying@gamil.com。