结构梁配筋最牛插件_YouTube 字幕翻译 —

“求推荐高质量的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

开发

以下简单讲解一下插件的开发过程，如果对开发不感兴趣就可以不用往下看了

插件逻辑

目录结构

Chrome插件目录

结构非常简单，简单说一下各个文件的作用

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每次打开的新选项 ...

结构梁配筋最牛插件_YouTube 字幕翻译 —— Chrome 插件

开发

结构梁配筋最牛插件_YouTube 字幕翻译 —— Chrome 插件相关推荐

最新文章

热门文章