通过从弹出窗口上传文件来设置content-script <track> src

时间:2019-07-07 16:12:55

标签: javascript html dom google-chrome-extension

我正在尝试通过弹出窗口和通过使用

上传字幕文件
popup.js

...
function inputChange(event) {
  if (this.files[0]) {
    var path = this.files[0].name
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      chrome.tabs.sendMessage(
        tabs[0].id,
        { type: "SUBTITLE_ADDED", payload:path},
        function(response) {}
      );
    });
  }
}
...

此脚本,我正在发送内容脚本的文件路径。在内容脚本中,我正在生成track元素,而在上一个脚本中,我正在设置src path。但是我认为它存在一些问题,因为当我将鼠标悬停在src属性上时,它还会包含

这样的域名
  

www.google.com/samplevideo /../ subtitle.vtt

。这可能就是为什么我没有获得视频播放器任何字幕的原因。我应该如何通过从弹出脚本发送文件位置来设置src属性?

content-script.js

const $videoPlayer = document.getElementsByTagName("video")[0];

function generateSubtitles(src, srclang = "en") {
  const $track = document.createElement("track");
  $track.setAttribute("kind", "subtitles");
  $track.setAttribute("label", "English");
  $track.setAttribute("default","");
  $track.setAttribute("src", src);
  $track.setAttribute("srclang", srclang);
  $videoPlayer.appendChild($track);
}

chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
        switch (message.type) {
            case "SUBTITLE_ADDED":
                console.log(message.payload);
                generateSubtitles(message.payload)
                break;

            default:
                break;
        }
    }
);

0 个答案:

没有答案