質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Chrome extension

Chrome拡張機能

Q&A

解決済

1回答

902閲覧

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

defeatist

総合スコア35

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Chrome extension

Chrome拡張機能

0グッド

1クリップ

投稿2018/03/16 16:07

編集2018/03/17 07:55

ニコニコ動画の外部プレイヤーを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.htmlpopup.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の中で自動再生させることができるのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

もう一段<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>

投稿2018/03/17 03:34

編集2018/03/17 03:41
turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defeatist

2018/03/17 14:33

ありがとうございます。 1つ目と2つ目のhtmlの記述場所を教えていただけないでしょうか?
defeatist

2018/03/17 14:38

すみません。理解しました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問