ニコニコ動画の外部プレイヤーを自動再生させたい(popup.htmlのなかで)

ニコニコ動画の外部プレイヤーをchrome拡張のpopup.htmlの中で自動再生させようと思い、以下のコードを書きました。
参考にさせていただいたサイト①
######manifest.json

json
1{
2  "manifest_version": 2,
3  "name": "test",
4  "version": "0.0.0.1",
5  "description": "ニコニコ動画の外部プレイヤーをchrome拡張のpopup.htmlの中で自動再生させる",
6  "browser_action": {
7    "default_title": "test",
8    "default_popup": "popup.html"
9  },
10  "permissions": [
11    "<all_urls>",
12    "tabs",
13    "background",
14    "contextMenus"
15  ],
16  "content_security_policy":"script-src 'self' https://embed.nicovideo.jp; object-src 'self'"
17}

######popup.html

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>test</title>
6        <link rel="stylesheet" type="text/css" href="popup.css">
7        <script src="jquery-3.3.1.js"></script>
8        <script src="popup.js"></script>
9    </head>
10    <body>
11        <iframe src="http://embed.nicovideo.jp/watch/sm9?jsapi=1" id="nicovideoPlayer-1" frameborder="0" allowfullscreen></iframe>
12    </body>
13</html>

######popup.js

javascript
1$(function() {
2  let player1 = document.getElementById('nicovideoPlayer-1');
3    player1.contentWindow.postMessage({
4        sourceConnectorType: 1,
5        eventName: 'play'
6    }, 'http://embed.nicovideo.jp');
7
8    window.addEventListener('message', (e) => {
9        if (e.origin === 'http://embed.nicovideo.jp') {
10            console.log(e.data.eventName);
11        }
12    });
13});

このpopup.htmlとpopup.jsはローカルサーバで動作することが確認できました。
しかし、この2つをchrome拡張にぶっこんでみると以下のエラーが出ました。

watch.ja.js

この辺が自分の知識不足でよく分かっていないのですが、このサイトでは

window.postMessage は chrome コードで実行される JavaScript で利用可能です（例：拡張内及び特権コード）。しかし、伝達されるイベントの source プロパティはセキュリティ上の制限から常に null です（他のプロパティは期待された値です）。現在、chrome: URL のウィンドウに送られるメッセージに対する targetOrigin 引数は "" だけであると誤って解釈されます。この値はターゲットウィンドウが悪意あるサイトによって別の場所に誘導され得るという危険なものですから、現在は postMessage を chrome:ページと通信するために用いないことを推奨します。chrome ウィンドウと通信するには（ウィンドウが開かれたときのクエリ文字列のような）別の方法を用いてください。最後に、file: URL のページへのメッセージを送るには targetOrigin 引数を "" にする必要があります。file:// はセキュリティ上の制限のために用いることはできません、この制限は将来修正されるかもしれません。

とあるので、おそらくchrome-extension://というスキームが原因だと思うのですが、上の引用部分にある別の方法がよく分からなかったので、自分なりの別の方法を試してみました。
参考にさせていただいたサイト②
######popup.html

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>test</title>
6        <link rel="stylesheet" type="text/css" href="popup.css">
7        <script src="jquery-3.3.1.js"></script>
8        <script src="popup.js"></script>
9    </head>
10    <body>
11        <div id="frame"></div>
12    </body>
13</html>

######popup.js

javascript
1$(function() {
2  var html = '<iframe src="http://127.0.0.1:3000/debug" frameborder="0" height="200"></iframe>';
3  //`http://127.0.0.1:3000/debug`は1つ目の方法のpopup.htmlの<body>の部分を記述したhtmlファイルの場所です
4  $("#frame").html(html);
5
6  let player1 = document.getElementById('nicovideoPlayer-1');
7    player1.contentWindow.postMessage({
8        sourceConnectorType: 1,
9        eventName: 'play'
10    }, 'chrome-extension://ghhpggjmpggclfhmeifnkpkkdifnlfgl');
11
12    window.addEventListener('message', (e) => {
13        if (e.origin === 'http://embed.nicovideo.jp') {
14            console.log(e.data.eventName);
15        }
16    });
17});

すると以下のエラーが出ました。

どうすればニコニコ動画の外部プレイヤーをchrome拡張のpopup.htmlの中で自動再生させることができるのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

もう一段<iframe>を間に挟めばとりあえずできました。
ただし、ポップアップにスクロールバーが表示されてしまいます。その辺はどうにか調整してください。
https://turbographics2000.github.io/iframe は、アドレスからわかる通りGitHub Pagesです。

html
1    // popup.htmlの<iframe>
2    <iframe src="https://turbographics2000.github.io/iframe?vid=sm9" id="nicovideoPlayer-1" frameborder="0" allowfullscreen></iframe>

https://turbographics2000.github.io/iframeのソース

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <title>nicoplayer</title>
6    <meta charset="UTF-8">
7    <style>
8        html,
9        body {
10            width: 100%;
11            height: 100%;
12            margin: 0;
13        }
14    </style>
15</head>
16
17<body>
18    <iframe id="nicoplayer"></iframe>
19    <script>
20        const bc = new BroadcastChannel('popup_nicoplayer');
21        bc.onmessage = evt => {
22            nicoplayer.contentWindow.postMessage(evt.data);
23        };
24        const url = new URL(location.href);
25        const vid = url.searchParams.get('vid');
26        nicoplayer.src = `https://embed.nicovideo.jp/watch/${vid}?jsapi=1`;
27        window.addEventListener('message', evt => {
28            /*if (evt.origin === 'https://embed.nicovideo.jp') {
29                bc.postMessage(evt.data);
30            }*/
31            nicoplayer.contentWindow.postMessage({
32                sourceConnectorType: 1,
33                eventName: 'play'
34            }, 'https://embed.nicovideo.jp');
35        });
36    </script>
37</body>
38
39</html>