结构梁配筋最牛插件_YouTube 字幕翻译 —— Chrome 插件
“求推荐高质量的XX入门视频”
“YouTube,上面有大量制作精良的免费教程”
“英文我看不懂啊,你看得懂吗?”
“我当然没问题啊!”
这是我常吹的牛逼,其实不是的,英文我经常看不懂,英文的词汇量太多了,生有涯,词无涯。于是我常常敲下空格键,暂停视频,打开有道词典查询,再切回视频,再次敲下空格键继续播放。观影体验极差,所以我就琢磨着做了这样一个Chrome插件:
当你暂停的视频的时候,自动翻译当前英文字幕
插件地址:
https://chrome.google.com/webstore/detail/youtube-%E5%AD%97%E5%B9%95%E7%BF%BB%E8%AF%91/knncklmmdejcadilnfeabejdfekhgdhe?utm_source=chrome-ntp-iconchrome.google.com
github开源地址:
https://github.com/bugushi/youtube-translatorgithub.com
开发
以下简单讲解一下插件的开发过程,如果对开发不感兴趣就可以不用往下看了
目录结构
结构非常简单,简单说一下各个文件的作用
manifest.json 插件的配置文件,标识插件的名称、版本、图标、权限等信息
background.js 常驻脚本,浏览器启动即执行,一般用于修改浏览器默认样式,tab美化等
contentScript.js 内容脚本,加载特定url时才会执行,url在配置文件中指定
代码
1、首先,我们需要在用户打开 YouTube 时,执行内容脚本以监听视频暂停事件
我们在manifest.json
文件中做如下配置,即可在匹配到*.youtube.com
时,加载脚本
"content_scripts": [{"matches": ["https://*.youtube.com/*"],"js": ["contentScript.js"]}
]
下一步,我们计划在contentScript
中监听视频的暂停事件,但无论如何监听不到,原因是Chrome
限定了contentScript
运行在沙盒中,不能和宿主页面做交互,所以没有办法直接在contentScript
中监听pause
事件。
但Chrome
给我们留了一个口子,contentScript
可以修改宿主页面的DOM
,于是我们利用这一点,把我们的逻辑代码放到单独的 youtube.js
中,然后在contentScript
中只写注入代码:
var script = document.createElement('script');
script.src = chrome.runtime.getURL('youtube.js');
document.body.appendChild(script);
2、监听视频暂停事件,获取字幕文本
这一步比较简单,简单贴一下代码,不做过多解释:
youtube.js
const videoElement = document.querySelector('video');
videoElement && videoElement.addEventListener('pause', () => {//...
})function getCaptionLines() {let captionLines = document.querySelectorAll('.ytp-caption-segment');let captionTexts = [...captionLines].map(line => {return line.innerText;})return captionTexts;
}
3、调用谷歌API
我调用的谷歌API域名是:translate.google.cn
, 所以存在跨域问题,第一步解决跨域问题,在manifest.json
中配置:
"permissions": ["https://translate.google.cn/"
]
然后,contentScript
无法发送跨域请求,所以要借用background.js
来发送,我们在contentScript
中通知background
:
Array.prototype.forEach.call(captionTexts, (text) => {chrome.runtime.sendMessage({ contentScriptQuery: "fetchTranslation", text },translation => {addTranslationToScreen(translation);});
})
background
收到通知后,发起请求:
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {if (request.contentScriptQuery == "fetchTranslation") {var url = googleTranslateAPI + encodeURIComponent(request.text);fetch(url).then(response => response.json()).then(translation => sendResponse(translation));return true;}}
);
4、最后将翻译字幕添加到页面中,这一步没啥难点,根据自己的喜好调整样式即可,完整代码可在github查看:
https://github.com/bugushi/youtube-translatorgithub.com
另外我做了一套收费的前端基础入门视频,推荐一下给想入门的小伙伴呗,谢谢啦:
前端基础16课--从入门到放弃 - 网易云课堂study.163.com
结构梁配筋最牛插件_YouTube 字幕翻译 —— Chrome 插件相关推荐
- 2018-11-04 在线代码离线翻译Chrome插件一马v0.0.14
续前文: 在线代码离线翻译Chrome插件"一马"v0.0.8. 主要改进如下. 项目源码库: program-in-chinese/webextension_github_cod ...
- idea 划词就能翻译的插件_划词翻译插件下载-划词翻译Chrome插件-独木成林
划词翻译Chrome插件是一款强大的电脑翻译工具,它基于谷歌Chrome内核,可以帮助用户进行国内外多种语音的翻译操作,拥有百度翻译.有道翻译和谷歌翻译等多种翻译引擎,支持中外文互译,并且多种文档都有 ...
- c多语言开发,“手把手”教你开发一个多语言翻译chrome插件
多语言互译chrome插件 最近逛掘金看了下,前端必备技能项竟然有"chrome插件开发",想想了自己的英语功力(开机自启动"有道翻译"-哈哈哈),于是,话不多 ...
- React开发chrome插件系列教程之chrome插件基本介绍
文章目录 chrome插件能干什么 chrome插件的版本 chrome插件的浏览器支持 chrome插件的功能组成 manifest.json popup content script backgr ...
- 在线代码离线翻译Chrome插件一马v0.0.8 2018-10-31
续前文: Chrome插件实现GitHub代码离线翻译v0.0.4 添加了对"码云"在线代码的翻译支持, 因此改名暂为"一马". 在此贴中调研了常用的在线代码网 ...
- notepad php格式化插件下载,【PHP Notepad Chrome插件】PHP Notepad Chrome插件下载_教程_安装 - 开发者插件 - Chrome插件网...
PHP Notepad同类插件推荐 2019-03-23 21:55:54 角观察者是终极的 AngularJS 工具,它告诉你你目前有多少活跃的观察者. 它会自动更新,这样你就可以实时看到一个页面有 ...
- chrome python插件_爬虫的Chrome插件推荐
[1]Toggle JavaScript [2]JSON-handle 这个插件可以帮我们格式化Json串,从而让我们以一个更友好的方式查看Json内的信息. chrome商店下载地址:https:/ ...
- 好用的插件介绍-Clear Cache Chrome插件
clear cache插件是一款用于清理谷歌浏览器的chrome清理缓存插件,该插件支持清理应用程序缓存,缓存,Cookie,下载,文件系统,表单数据,历史,索引数据库,本地存储,插件数据,密码和We ...
- 一些实用的Chrome插件
FEHelper 简介 本插件支持Chrome.Firefox.MS-Edge浏览器,内部工具集持续增加,目前包括 JSON自动/手动格式化.JSON内容比对.代码美化与压缩.信息编解码转换.二维码生 ...
- 开源中国 Chrome 插件,你的好帮手~
大家好,我是TJ 一个励志推荐10000款开源项目与工具的程序员 今天TJ君给大家介绍一个实用的CHROME插件:开源中国 Chrome 插件 利用这个插件,可以实现直接在chrome每次打开的新选项 ...
最新文章
- 对一条常用命令(netstat结合awk统计TCP连接数)的理解
- Linux下Minigui开发环境的搭建(PC+S3C2440
- Exception.InnerException 属性的使用
- spring配置xml文件_XML配置文件中的Spring配置文件
- oracle中冗余,各位有没有检查冗余索引的脚本
- 微软谷歌出资500万美元推出 Alpha-Omega 项目,提升软件供应链安全
- 网站打不开怎么检查服务器,检查网站打不开的三种原因
- Pixelization论文与应用简介:像素艺术像素化算法
- FusionAccess桌面云
- daytime协议的服务器和客户端程序,用Socket套接字实现DAYTIME协议的服务器和客户端程序.doc...
- 计算机游戏13关gongl,密室逃脱4之恐怖电影院第13关怎么过 第13关通关攻略
- 互联网晚报 | 1月24日 星期一 | 快手与11家省市春晚达成合作;京东首个数字人客服芊言上岗;拉菲虎年限定红酒上线虹宇宙...
- 【技巧总结】位运算装逼指南
- practice是什么意思_practice是什么意思
- Scrapy模块爬取中华英才网招聘信息(分页)
- python语法错误类型_python常见报错类型和异常处理
- 性能监控命令vmstat详解【杭州多测师】【杭州多测师_王sir】
- 光环国际,做AI时代的赋能者
- Mesh Denoising via Cascaded Normal Regression文章解读
- Python上下文管理器的魔力