やりたいこと
閲覧しているYouTube動画のVIDEO_IDを1クリックでサーバーに送信したい。
VIDEO_IDは「https://www.youtube.com/watch?v=LIlZCmETvsY」の場合だと「LIlZCmETvsY」の部分。
ブラウザはChromeを使用する。
やり方
Chromeの拡張機能を作ってなんとかする。
必要なもの
・Chrome拡張用のソースファイル一式(後述)
・サーバー側のVIDEO_ID取得用スクリプト(後述)
作成するChrome拡張機能の内容
YouTube動画閲覧時にOmnibox(URL入力欄)の右端の方にアイコンを表示させる。
このアイコンをクリックすると、サーバーへVIDEO_IDを送信する。
Chrome拡張用のソースファイル一式
以下のディレクトリ構成で各ファイルを格納する。
jsやjsonファイルはUTF-8で保存すること。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
youtubevideoid/ |-- img/ | |-- icon16.png | |-- icon19.png | |-- icon32.png | |-- icon38.png | |-- icon48.png | `-- icon128.png | |-- js/ | |-- background.js | `-- jquery-2.1.4.min.js | `-- manifest.json |
img/icon*.png
Chromeの拡張機能設定画面やOmniboxに表示させるアイコンファイル。
今回は使わないファイルもありそうだが、とりあえず16×16, 19×19, 32×32, 38×38, 48×48, 128×128ピクセルの画像があればOK。
各サイズの用途は「chrome 拡張機能 アイコン サイズ」とかでググると出てくる。
各pngファイルは↓のURLから保存で。
icon128.png
icon48.png
icon38.png
icon32.png
icon19.png
icon16.png
manifest.json
Chrome拡張機能の定義ファイル
各項目は Manifest File Format を参照。
「permissions」の「WWW.EXAMPLE.JP」の箇所はVIDEO_IDを送信するサーバーのドメインに変更すること。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{ "manifest_version": 2, "name": "vId", "description": "Ajaxing YouTube VIDEO_ID to the server.", "version": "0.1", "permissions": [ "tabs", "*://WWW.EXAMPLE.JP/" ], "page_action": { "default_icon": "img/icon19.png", "default_title": "Post VIDEO_ID" }, "background": { "scripts": ["js/jquery-2.1.4.min.js", "js/background.js"], "persistence": false }, "icons": { "16": "img/icon16.png", "19": "img/icon19.png", "32": "img/icon32.png", "38": "img/icon38.png", "48": "img/icon48.png", "128": "img/icon128.png" } } |
js/background.js
拡張機能の実体部分
YouTubeのサイトを開いた時にアイコンを表示したり、Omniboxのアイコンをクリックした際の挙動を記述する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { if (changeInfo.status === 'complete') { //URLが「https://www.youtube.com/」で始まる && VIDEO_IDが取得できた場合にアイコンを表示する。 if (tab.url.indexOf('https://www.youtube.com/') === 0) { if (getVideoIdFromUrl(tab.url)) { /* * アイコンがクリックされた場合の挙動を設定する。 * 念のためremoveListener()しておく。 * listenerが複数回設定されているような挙動を取ったことがあったため。 */ chrome.pageAction.onClicked.removeListener(clickOmniboxIcon); chrome.pageAction.onClicked.addListener(clickOmniboxIcon); //アイコンを表示する。 chrome.pageAction.show(tabId); } } } }); /** * URLをパースし「v=」で始まるGETパラメータを返す。 */ function getVideoIdFromUrl(url) { var p = (new URL(url)).search.substr(1).split('&'); var l = p.length; for (var i = 0; i < l; i++) { if (p[i].substr(0, 2) === 'v=') { return p[i].substr(2); }; } return ''; } /** * Omniboxのアイコンがクリックされた場合の処理 * VIDEO_IDが取得できたらサーバーに送信する。 */ function clickOmniboxIcon(tab) { var videoId = getVideoIdFromUrl(tab.url); if (videoId) { post({'videoId': videoId}); } } /** * サーバーへの送信処理 * http://WWW.EXAMPLE.JP/PATH/TO/RECEIVER は受信するスクリプトを指定する。 */ function post(obj) { $.ajax({ type : 'post', url : 'http://WWW.EXAMPLE.JP/PATH/TO/RECEIVER', data : JSON.stringify(obj), contentType : 'application/json' }) .done(function(data){ console.log('OK'); console.log('YouTube VIDEO_ID is ' + data + '.'); }) .fail(function(data){ console.log('NG'); }) .always(function(data){ //console.log('complete'); }) ; } |
js/jquery-2.1.4.min.js
サーバー送信時にjQueryを使用するのでダウンロードしておく。
jquery-2.1.4.min.js
サーバー側のVIDEO_ID取得用スクリプト
上記「js/background.js」で指定した「http://WWW.EXAMPLE.JP/PATH/TO/RECEIVER」の部分のスクリプト。
今回は同一ディレクトリ内の「log」というファイルにVIDEO_IDを書き込むだけのPHPスクリプト。
1 2 3 4 5 6 7 8 9 10 |
<?php $json = json_decode(file_get_contents('php://input'), true); $videoId = $json['videoId']; file_put_contents('./log', $videoId . PHP_EOL, FILE_APPEND); echo $videoId; exit; |
拡張機能を有効にするには?
Chromeの「設定」-「拡張機能」-「パッケージ化されていない拡張機能を読み込む」で、上記「ディレクトリ構成」の「youtubevideoid」ディレクトリを指定する。
動作確認
YouTubeの動画を開いてOmniboxのアイコンをクリックし、サーバー側に送信されていることが確認できればOK。
↓のアニメーションGIFで黒背景になっているウインドウがサーバー側。ブラウザ側は動画領域は見えないように隠してあります。
※クリックして再生(アニメーションGIF)