结构梁配筋最牛插件_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-icon​chrome.google.com

github开源地址：

https://github.com/bugushi/youtube-translator​github.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-translator​github.com

另外我做了一套收费的前端基础入门视频，推荐一下给想入门的小伙伴呗，谢谢啦：

前端基础16课--从入门到放弃 - 网易云课堂​study.163.com