开发 Chrome 插件解放你的双手

前言

可能我是一个比较热爱做一些小 Demo 的人，之前也给做过很多小玩意，例如微信小程序、 Chrome 插件、命令行工具以及 ChatGPT 接入 WX等等。最近因为毕业答辩结束，闲着也是闲着，发现了一个生活痛点，那就是我平时吃饭或吃零食时喜欢刷网页版的抖音，然后就会发现每次都需要手动去操作鼠标或者键盘，来控制视频的上下滑动或者点赞收藏操作，这样会给我带来非常大的不便。秉持着懒人精神，我想写一个插件使我在吃饭时能够解放双手，安心刷抖音。所以 DY-语音助手 这个插件就诞生了 🥳！

因为是自己一个人独立开发的，所以难免会有没有测试到的 BUG。如果大家感兴趣可以尝试体验一下这个插件。

🎯 这个插件只适用于抖音网页版的推荐页与关注页。

快速安装

Chrome 插件商店安装

访问👉Chrome 应用商店；
点击右上角的添加至 Chrome按钮，等待安装即可。

下载 CRX 文件

访问作者的插件文档DY-语音助手，选择想要安装的版本；
将 CRX 文件添加进扩展程序页面中。

安装可信的扩展程序

当尝试安装扩展程序时，系统可能会显示一个对话框，新开发者（也就是作者我）通常需要数月的时间才能赢得信任。

如果“增强型安全浏览”功能不信任要安装的扩展程序，它会显示“增强型安全浏览功能不信任此扩展程序。”
- 如果仍要安装该扩展程序，请点击继续安装。
- 若要取消安装，请点击关闭。
如果“增强型安全浏览”功能信任该扩展程序，请点击添加扩展程序完成安装。

安装完成后在扩展程序中会出现如下卡片：

如果喜欢这个插件的话，可以点赞➕收藏➕关注吗🧐？顺便给我的插件五星好评呀！如果遇到 BUG，可以刷新页面或者刷新插件即可。

功能展示

因为上传视频比较麻烦，因此就使用 GIF 图代替了，因此有些功能展示会没有声音，但是读者们可以查看 GIF 图左下角的文字面板，显示了语音识别后的文字结果（本插件的功能之一），请见谅 🥲！

插件激活

本插件只会在抖音网页版的 推荐页面以及关注页面 进行激活使用，激活时插件的图标会从灰度图变为彩图，这样也方便用户实时知道插件是否可用。同时，如果当前页面插件不可用，点击插件图标所展示的 Popup 页面中也会进行文字提示，感觉是用户友好型的 😃。

主要分为以下三种状态：

从做到右分别为：插件未激活、插件激活、正在使用语音识别三种状态。

为了更直观的展示变化状态，我录制了一段状态切换的视频，大家主要关注一下右上角插件状态的变化情况，也可以关注一下 Popup 页面的文字。屏幕录制2024-05-23 09.37.05.gif

语音控制视频浏览

🚦 注意看左下角的文字，GIF 没有声音。该功能需要我们把 开启语音识别 这个功能打开，然后说出相应的语音指令即可，例如切换视频使用 上一个 和 下一个 指令即可。

识别结果定期消失

如果你觉得左下角一直有文字会比较影响刷抖音的体验，但是又想显示识别结果，那么你可以设置 识别结果的消失时间，这样经过指定时间后文字会消失。

屏幕录制2024-05-23 09.54.03.gif

识别结果面板参数设置

如果你觉得识别结果的背景颜色、文字颜色有点单调，你可以进行自定义颜色哦😃。同时面板的显示状态以及展示位置都可以自定义，是不是挺人性化的？

屏幕录制2024-05-23 10.09.18.gif

指令合集

支持的指令如下所示，同时，如果你不想使用具体某个指令，也可以进行关闭即可：

全屏: 当前视频将自动全屏
网页全屏: 当前视频将自动网页全屏
进入: 将自动进入直播间或者个人主页
清屏: 将自动清屏
稍后再看: 将自动添加至稍后再看
点赞: 将自动点赞或取消点赞该条视频
收藏: 将自动收藏或取消收藏该条视频
关注: 将自动关注或取消关注该条视频的博主
一键三连: 一键三连
评论: 将自动打开或者关闭评论区
复制链接: 将自动复制该条视频链接
弹幕: 将自动打开或者关闭弹幕
播放: 将自动播放当前视频
暂停: 将自动暂停当前视频
上一个: 将自动浏览上一个视频
下一个: 将自动浏览下一个视频

现在来展示一下具体一些例子(如果在手机端的话，可以点击查看)：

屏幕录制2024-05-23 13.45.24.gif 屏幕录制2024-05-23 13.48.14.gif

第一排分别是：点赞和收藏指令展示、暂停和播放指令展示；

第二排分别是：一键三连指令展示、上一个和下一个指令展示。

在使用 进入 命令时，需要设置以下权限，否则直播间页面不会被弹出：

代码实现

在这个部分展示一下核心的功能的代码，例如图标变化、指令操作等等。其中，开发插件的过程中，使用了WXT框架进行快速的开发，该框架支持热更新，同时支持不同浏览器插件的打包，使用下来体验还行。在开发 Popup 页面的时候使用了 3.x 版本Ant Design Vue

图标变化

这个功能主要使用的是onUpdated以及onActivated这两个事件，具体代码如下：

import { browser } from 'wxt/browser';

browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    changeIcon(tab);
});
browser.tabs.onActivated.addListener(() =>
    browser.tabs.query({
      'active': true,
      'windowId': browser.windows.WINDOW_ID_CURRENT
    }).then(tabs => changeIcon(tabs[0]))
);

指令操作

其实抖音网页版支持一些键盘(keydown)或鼠标事件，因此在本插件中，只要匹配到指令的文字后，派发键盘事件即可。具体代码如下：

const options = {
  key: 'xxx',
  keyCode: 'xxx',
  code: 'xxx'
};
const event = new KeyboardEvent(KEYDOWN, options);
document.dispatchEvent(event);

语音识别

该功能使用的 Chrome 浏览器自带的webkitSpeechRecognition API，具体细节不再赘述，感兴趣的可以点击链接自行查看，主要使用了 result、speechstart和speechend三个事件：

recognition = new webkitSpeechRecognition();
recognition.lang = 'zh-CN'; // 支持的语言
recognition.continuous = false; // 是否为每次识别返回连续结果，或仅返回单个结果
recognition.interimResults = true; // 是否应返回中间结果
recognition.start();
// 单词或短语已被正确识别，并且已被传达回应用程序
recognition.addEventListener("result", this.#resultFn);
// 当检测到声音被语音识别服务识别为语音时
recognition.addEventListener("speechstart", this.#speechstartFn);
// 当语音识别服务识别的语音停止被检测时
recognition.addEventListener("speechend", this.#speechendFn);

作者的话

大家如果喜欢可以下载体验一下哈！如果可以给个🌟和收藏呗🥺！如果发现了 BUG 也可以反馈。同时也欢迎一起交流新奇的想法，同时打工后要用 React，之后可能就开始学习 React 的内容了，可能会发一些学习心得体会，如果感兴趣可以点歌关注，希望能顺利通过试用期吧，一起加油，共勉！

如果大家对开发 Chrome 插件感兴趣的话，有空可以出一个开发指南 😌。

🥳 懒惰是人类进步的动力！开发抖音网页版语音助手插件，只为了在吃饭时解放双手！