簡単youtubeサーフィンプラグインを作成しました。

# 概要
このプラグインは、webページを渡り歩いて、youtubeサーフィンを繰り返すプラグインです。
Webページにある文字列を選択(*1)してクリックすると、その文字列でyoutubeサーチし、リストを生成して再生するプラグインを作成しました。文字列をなぞるだけで、youtubeサーチの入力ボックスへクェリーが入り、検索がスタートします。文字入力が面倒なときは便利です。
このプラグインを一言で表すと「簡単youtubeサーフィンプラグイン」というになります。
# 典型的な例として
例えば、一つの例として、Yahoo! JAPANというサイトページがありますが、ここで、気になるキーワードがあると、そのテキストをマウスカーソルで選択し、Ctrlキー+Clickするとポップアップ画面が表示します。
そこで、youtubeサーチボタンをクリックすると、youtubeサーチページと再生ページが立ち上がります。youtubeサーチページでリストが生成されると再生ページへリストが送信され、そのリストで再生がスタートします。これらの一連の処理は自動化されています。
同じような操作は、一般的なwebサイトでも実行できます。この繰り返し動作を「簡単youtubeサーフィンプラグイン」と言えるのではないでしょうか。



# 主な特長
今、見ているwebページで、気になるキーワードの動画を見たいと思ったときに簡単に動画検索して再生することができます。以下にその特長を列挙します。
(1)プレーヤーがないWebページやブログからでもサーチ&再生ができます。ない場合はプーレーヤータブをオープンします。
(2)Webページで文字列選択(*1)してyoutube動画のリストを自動生成
(3)約100件の動画リストを生成
(4)リストの先頭から連続自動再生
(5)音楽でもなんでもリスト生成
(6)自分のブログから文字列選択してスタート
(7)ブログにプレーヤーがなくても、別タブでプレーヤがスタート
(8)2つのタブ(youtube,プレーヤー)がオープンして、連携動作
(9)文字列セレクトから2クリックで、リスト生成して動画の再生まで、自動処理します。youtubeのリストサーチ中は自動スクロールします。



# 準備
2つのプラグインをインストールします。
(1)[Yahoo連動検索プラグイン 3.8](https://chrome.google.com/webstore/detail/yahoo%E9%80%A3%E5%8B%95%E6%A4%9C%E7%B4%A2%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3-37/onedekeknehkcfhfpaafjnjihdihgjen?hl=ja&authuser=0)
(2)[YouTubeリスト作成(シングル)プラグイン 3.5](https://chrome.google.com/webstore/detail/youtube%E3%83%AA%E3%82%B9%E3%83%88%E4%BD%9C%E6%88%90%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3-34/fkjolmdggoajciaanapehmhooajklebi?hl=ja&authuser=0)
デモ
プラグインがインストール済みであれば、ここで、Ctrlキーを押しながら任意の文字列を選択するとポップアップ画面が表示されます。
youtubeサーチボタンをクリックすると再生がスタートします。



# スタート時の画面
文字列を選択するときにCtrlキーを押しておきます。そのままの状態でマウスのClickボタンを押すと以下の画面が表示されます。
この場合の選択した文字列は「レンタルサーバーファイヤバードって?」という文字列です。
![プラグインポップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/ab2b511e-151d-c6b0-192b-035b746769d4.png)
3つのボタンが表示されています。
(1)yahooサーチ
   選択した文字列でyahooサーチします。 
(2)youtubeサーチ
   選択した文字列で、youtubeサーチします。 
(3)キャンセル
   何もせずにリターンします。
ここでは、(2)のyoutubeサーチボタンについて説明いたします。
youtubeサーチボタンをClickすると、youtubeサーチページで動画の検索をします。この時、別タブでtoutubeサーチがスタートします。
しばらく、そのままにしておくと、約100件程の動画を検索してリストを生成します。生成したリストは、同時にスタートした、プレーヤーページのリストに更新され、リストの先頭から再生がスタートします。
# 文字列の選択画面
任意のページにある文字列を選択します。以下のバフ委は、リバースエンジニアリングを選択しています。このとき、Ctrlキーは押したままにしておきます。次にClickボタンを押します。

![リバース.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/be4e5e72-b9c7-a9ca-fa4f-0849ef6301d5.png)
# youtubeサーチの実行
Clickボタンを押すと、2つの画面が表示されます。始めに、プレーヤー画面がスタートします。次にyoutubeサーチ画面がスタートします。

![再生画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/bdc6fde4-be31-bfcc-ef19-dc7ef1353af8.png)
# youtubeサーチ画面
動画のサーチは約100件まで行います。この時、スクロールしながらサーチを続けます。そのため、10数秒かかりますが、自動的に行いないます。100件ほど検索すると、リストを再生し、プレーヤ画面のリストを更新し、再生がスタートします。


![再生画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/1bb425fc-e905-7fc1-ab74-487752bb5027.png)
# 再生画面
検索した結果のリバースエンジニアリングのリストで再生が再生します。

![再生2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/48e9b205-5295-59cf-31e6-3df8a754c2a7.png)
# 不具合対策
文字列の選択は、テキスト部分のみです。強調表示などのhtml要素が含まれている文字列は除外します。
このプラグインを実行したときに、たまに発生する不具合に出会うことがあります。その主な現象は、以下になります。
エラーメッセージもなく、うんともすんとも言わない。
### 現象
(1)ポップアップでyoutubeサーチをクリックしたが、youtubeサーチページをオープンしない。
(2)youtubeサーチでスクロール処理が途中で停止する。
(3)youtubeサーチを終了してプレーヤページに移るが、リストが更新されず、再生しない。
### 暫定対策
あいにく、原因はつかみ切れていませんので、暫定対策として、履歴削除するか、一度、タブの移動をしてからやり直すかブラウザーを再立ち上げするとうまく実行することができます。







 

# プラグイン作成上の注意点
このプラグインで最も苦労した点と言えば、「タブid」の管理です。
複数の様々なタブがあると、どのタブへメッセージを送ればいいのかを調べなければなりません。メッセージの送信先にはそのタブのtabidが必要になります。確実な方法は、文字列を選択しているページのcontent.jsでdocument.URLを送り、background.js側ではその、document.URLデータを保存しておきます。その後に、background.js側で、document.URLのtabidを調べて、そのtabidで文字列を選択しているページのcontent.js側へメッセージを送信します。これにより、文字列を選択しているページのtabidを特定することができます。同様な方法で再生ページへもyoutubeサーチページで作成したリストを送信することができます。



# あとがき
このプラグインの特長は、タブの連携とプラグインの連携が協調して
動作することです。
さらに、Webページを問わず動作します。但し、Webページによっては、文字列の選択がうまくできないページも存在しますのでそのようなページは除外します。
使い方としては、Webサーフィンをしていて、この言葉の意味はどういうことかと思ったときに、yahooサーチとyoutubeサーチでその意味を知ることができます。
学習サイトとしても活用することができます。
# 補足
このプラグインではプレーヤーサイトとyoutubeサイトを使用していますが、いずれも使用している文字コードはutf-8です。それため、文字セレクトするページがShift-JISコードの場合は、クェリー文字が文字化けしています。

*1 https://,http://,で始まるurlのページで、テキスト選択が可能な要素