YouTubeのVIDEO_IDをサーバーに送信する方法

やりたいこと

閲覧している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拡張機能

Chrome拡張用のソースファイル一式

以下のディレクトリ構成で各ファイルを格納する。
jsやjsonファイルはUTF-8で保存すること。

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

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 拡張機能アイコンサイズ」とかでググると出てくる。

icon

各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を送信するサーバーのドメインに変更すること。

{
    "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"
    }
}

{

"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のアイコンをクリックした際の挙動を記述する。

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');
    })
    ;
}

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スクリプト。

<?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;

<?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）

動作確認