前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >我写了一款谷歌浏览器插件

我写了一款谷歌浏览器插件

原创
作者头像
壹言
修改2019-08-06 10:23:05
1.4K0
修改2019-08-06 10:23:05
举报
文章被收录于专栏:WorldhelloWorldhello

一款可随意调节百度网盘在线播放视频速度的谷歌浏览器插件。

图 版本V1.0.2

前言

最近一直在看百度云盘上的网课,当想倍速播放的时候却发现没有这个功能。然后就在网上找到了一段可以调整播放速度的 JS 代码。

代码语言:javascript
复制
//调整播放速度为 1.5xvideojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(1.5)

将这段代码拷贝到浏览器的 Console 中按下回车键确实可以使用。但是当我用了两次之后就发现,实在受不了这种重复而且相当不灵活的操作。还有一个问题是计算机相关专业的大多数同学会使用这种办法,但是应该还有很大一部分同学并不知道怎么用。然后我就考虑自己做个谷歌浏览器插件来灵活的调节播放速度,不但可以方便自己也能够方便他人。尽管我当时还不知道浏览器插件的工作机制,但是看到各种各样的插件都实现了相当复杂的功能后,我认为技术上应该是可以的。那么接下来就要找谷歌浏览器插件开发文档去学习了。

展示

一个半小时后做出来了特别low的 V1.0.1 版本,下面红框中的部分为插件面板。

图 版本V1.0.1

现在是可以用了,但是有轻微强迫症的我想再完善一下。从产品体验上来说这一版本是很差劲的,因为调节一次速度既需要键盘又需要鼠标。一个好的产品使用起来怎么可能这么麻烦,能一只手完成的事情绝不用两只手来做。

又半个小时后,V1.0.2 出来了,下面是视频演示(视频大约9M,有声音)

(视频无法添加,观看请点击这里

原理

为插件面板上的进度条绑定事件,当滑动时将数值传递给后台的 controlVideo.js 文件.然后将数值与上述关键代码拼接后插入到当前页面中,视频播放速度就会相应变化。当然还有许多细节方面的处理,包括当再次打开插件面板时会将当前视频播放速度的大小体现在进度条上等。

注:有想自己做插件的同学可以把这款插件当作Demo,不是因为代码写的有多好,而是程序中用到的方法应该适用于大多数简单插件的开发。)

下载

安装使用

  1. 将下载的文件解压。
  2. 打开谷歌浏览器,点击窗口右上角的三个小点,然后点击「更多工具」,接着点击「扩展程序」。这时你在界面上应该可以看到「加载已解压的扩展程序」按钮(如果看不到就把右上角的「开发者模式」打开,如果打开之后仍然看不到那就打开百度,搜索“附近有哪些眼科医院?”哦,不行!这种问题还是问谷歌比较安全一些。如果发现谷歌不能用,那你一定没看我这篇文章 【推荐】不访问外国网站如何免费使用谷歌搜索引擎?… ...)。
  3. 看到「加载已解压的扩展程序」后然后点击它,在弹出的窗口中选择你刚刚解压后的文件。 (注:解压后的文件就不要动了,一旦删除或移动位置那么谷歌浏览器中的插件将不能使用。所以一开始的时候就应该放置一个比较“安全”的地方。)
  4. 使用方法,参考上面演示视频即可。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 展示
  • 原理
  • 下载
  • 安装使用
相关产品与服务
云点播
面向音视频、图片等媒体,提供制作上传、存储、转码、媒体处理、媒体 AI、加速分发播放、版权保护等一体化的高品质媒体服务。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档