开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

场景

看网课记笔记时，操作会比较繁琐。

切换焦点到视频播放页面
点击暂停
切换焦点到笔记软件写笔记
写完笔记切换到视频播放页面点击继续

使用此插件之后的步骤

按快捷键视频暂停
记笔记
按快捷键视频继续

使用周期内，光标始终在笔记软件中，输入顺畅，体验很棒～

步骤与实现

创建工程

创建 chrome 插件工程只需要新建个目录，然后在目录下新建文件 manifest.json

{
    "manifest_version": 3,
    "name": "video_controller",
    "version": "1.0.0",
    "description": "通过快捷键控制视频暂停和开始",
    "icons": {
        "48": "imgs/logo.png"
    },
......

    "background": {
        "service_worker": "js/background.js"11111
    },阿塞
......
}

开启 chrome 的开发者模式后，可以本地打开 manifest.json 所在目录。

全局快捷键

插件监听系统快捷键是通过 chrome 中转的。

需要通过 manifest.json 向 chrome 注册快捷键，见 commands

{
"manifest_version": 3,
...
"commands": {
        "playorpause": {
            "description": "Video: playorpause"
        }
    },
...

}

在 chrome的插件配置页 chrome://extensions/shortcuts 可以看到插件设置快捷键，设置为全局，设置快捷键需要用户手动操作。

既然设置为全局快捷键，则在后台时也能响应快捷键。所以需要在 service_workder 中所对应的 js 文件中进行监听。

这里命名为 backgroud.js 监听快捷键命令的方式如下

chrome 是插件环境中的全局系统变量，可以在任意地方获取

chrome.commands.onCommand.addListener(function (command) {
		if (command === 'playorpause') {
			// 做业务处理
    }
})

获得当前页面的 tab

let queryOptions = { active: true };
let activeTabs = await chrome.tabs.query(queryOptions);

query 方法可以传很多参数，具体的参见

developer.chrome.com/docs/extens…

获取当前页面的元素

得到激活的tab后，可以在特定页面执行 javascript 代码。

activeTabs.forEach(tab => {
    if (tab.url?.startsWith("chrome://")) return undefined;
    chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: injectedFunction
    });
});

function injectedFunction() {
    document.querySelectorAll('video').forEach(video => {
       //TODO 
    });
}

上面的步骤即可以得到当前页面的 Video 标签的元素了。

获得的播放状态

Video 标签默认是没有获取播放状态的方法的，所以需要在页面加载时向标签注册获取正在播放的方法。

这时需要在 manifest.json 中定义每个页面加载时需要执行的 js 文件

{
    "manifest_version": 3,
....
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "js/content-script.js"
            ],
            "css": [
                "css/custom.css"
            ],
            "run_at": "document_start"
        }
    ],
    ....
}

因为需要页面加载前就就注册，所以设置了 run_at 为 "document_start"。

content-script.js 注册 playing 方法

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})

控制的暂停与播放

在 background.js 中进行视频的暂停和播放

document.querySelectorAll('video').forEach(video => {
        if (video.playing) {
            video.pause();
        } else {
            video.play();
        }
});

资料

developer.chrome.com/docs/extens… 英文 Chrome 官方文档，最全的资料，适合深入学习 github.com/sxei/chrome… 中文的资料，比较全，但比较旧，三四年未更新，是基于 chrome 插件规范版本 2 的，最新的 chrome 规范是版本3 的。适合上手时翻翻看看

最后

整体流程为

注册全局快捷键
获得激活的 tab
通过 document 获取 video 标签进行操作

这样的一整套的开发流程就做完了。从查询 api 到可以使用一共花了两小时。开发个简单可用的 chrome 插件还是很顺利的。

如果有多人要代码并点赞，说明这代码可能有点用，我就整理下把完整代码放到 github 上供参考。

谢谢，有问题请指正

愉快的边看网课边做笔记 - 两小时从零搞个Chrome插件

场景