subtitles-octopus.js:71 Worker error:  Don't know where to render: you should give video or canvas in options.
SubtitlesOctopus.self.workerError @ subtitles-octopus.js:71
subtitles-octopus.js:77 Uncaught (in promise) Error: Worker error: Don't know where to render: you should give video or canvas in options.
    at SubtitlesOctopus.self.workerError (chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/subtitles_octopus/subtitles-octopus.js:77:19)
    at SubtitlesOctopus.self.createCanvas (chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/subtitles_octopus/subtitles-octopus.js:134:26)
    at SubtitlesOctopus.self.init (chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/subtitles_octopus/subtitles-octopus.js:94:14)
    at new SubtitlesOctopus (chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/subtitles_octopus/subtitles-octopus.js:581:10)
    at loadSub (chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/loader.js:44:25)
    at chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/loader.js:28:9

아마도 유튜브 video 태그가 달라졌기 때문으로 보입니다.

유튜브에서 영화관 모드인경우, 왼쪽으로 치우치는 현상이 발생합니다.

<div class="html5-video-container" data-layer="0"><video tabindex="-1" class="video-stream html5-main-video"
        controlslist="nodownload" style="width: 853px; height: 480px; left: 64px; top: 0px;"
        src="blob:https://www.youtube.com/7b27c30d-56bd-4f7c-9837-0d059164dccd"></video>
    <div class="libassjs-canvas-parent" style="position: relative;"><canvas class="libassjs-canvas" width="1332"
            height="748"
            style="display: block; position: absolute; width: 853px; height: 479px; top: 0.5px; left: 0px; pointer-events: none;"></canvas>
    </div>
</div>

subtitle canvas가 적용된 html 코드를 보면 video의 경우 left 속성이 64px로 지정되어있지만 canvas의 경우 0px로 적용되어있습니다.

PR#1 에서 popup창이 닫혔을때도 동작하도록 수정한 코드입니다. background.js 파일을 생성하여 background script로 추가하고, PR#1에서 추가된 코드를 해당 파일로 옮겼습니다.

추가적으로 instance 변수를 popup.js 가 그때그때 생성하는것이 아니라 contents script에서 먼저 선언하여 들고있고 popup.js 에서 인스턴스를 생성하도록 수정하였습니다.