youtube動画を勝手に埋め込む拡張機能

記事タイトルはこんなものですがメインはJSでクリックイベントを実行することです。
その結果これが一番やりやすかったということ。

さて、JSを使えばクリックイベントも自動化することができますが
どのようなサンプルで拡張機能に組み込むとその効果が伝わりやすいだろうか？

と考えた結果、「youtubeの動画広告の仕組み」記事で少し触れた
共有埋め込みコードを取得する話をしようかと思い至り。

まずクリックイベントの発火はElement要素にclick()するだけではできません。
※勘違いであり、click()メソッドでもイベントは発火しました。
　ただよくわからない挙動もしたので次の記事にまとめています。
クリックイベントを作成し、要素にそれをアタッチすることで再現します。
そのコードが以下

const clickEvent = new MouseEvent('click', {
	bubbles: true,
	cancelable: true,
	view: window
});
Element要素.dispatchEvent(clickEvent);

どのElementがどんなイベントを持っているかは
デベロッパーツールの「Element」タブで要素を選択し、
恐らく中段に出てくる「EventListeners」から確認できます。

ただyoutubeのような大型サイトになるとイベント数が非常に多かったり
独自イベントを多数設定していたりと拡張機能からは拾えないものも存在します。

そんなyoutubeさんも動画再生に関係ない部分であれば殆どの場合ただのクリックイベントになっています。
なので共有ボタンを無理やり指定してクリックイベントを実行させることもできます。

let button_all = document.querySelectorAll('.ytSpecButtonViewModelHost.style-scope.ytd-menu-renderer');
button_all[0].querySelector('button').dispatchEvent(clickEvent);

なおyoutubeの共有用のURLは別の場所でも指定されており、
それはクリックイベントを使わなくても取得できます。

では何故わざわざこんな回りくどいことをしているかというと、
これを使って初めて埋め込み用のクエリパラメータが生成されるから。
何らかの対策が必要になったのか、どうか。

拡張機能の機能紹介

拡張機能アイコンをクリック→サイドパネル展開して使います。

・Getボタンで埋め込み用URLを取得します。
なお共有ボタンをJSでクリックしてるので、当然共有用モーダルウインドウが表示されます。
あと広告中に実行しても大丈夫です。
因みに埋め込み動画は広告が出にくい。あとは分かるね？

・EmbedボタンはEmbedURLの動画を現在開いているサイト内に無理やり埋め込みます。
ただしyoutubeドメイン内で埋め込むとエラーになるので他のサイトで実行してください。
他のサイトであればGoogle検索などでも大丈夫。(オフラインのHTMLだと不可)

また上記からの推察ですが、
iframeプレイヤーは動作時に埋め込まれたページURLを確認していると思われます。
そのサイトの持ち主が知らぬ内にyoutubeにリファラが残る(かもしれない)ということです。
色々とご注意ください。

今後について

この機能を今後拡張していくことはないのですが、やれそうなこととしては
・storageを使って取得した情報を保存する
・保存している内容から埋め込み動画を作る機能を用意する
とするとyoutubeを使わないでお気に入り動画を保存、閲覧できるかもしれませんね。