やりたいこと

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

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

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

img/icon*.png

Chromeの拡張機能設定画面やOmniboxに表示させるアイコンファイル。

今回は使わないファイルもありそうだが、とりあえず16×16, 19×19, 32×32, 38×38, 48×48, 128×128ピクセルの画像があればOK。
各サイズの用途は「chrome 拡張機能 アイコン サイズ」とかでググると出てくる。

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

js/background.js

拡張機能の実体部分
YouTubeのサイトを開いた時にアイコンを表示したり、Omniboxのアイコンをクリックした際の挙動を記述する。

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

拡張機能を有効にするには?

Chromeの「設定」-「拡張機能」-「パッケージ化されていない拡張機能を読み込む」で、上記「ディレクトリ構成」の「youtubevideoid」ディレクトリを指定する。

動作確認

YouTubeの動画を開いてOmniboxのアイコンをクリックし、サーバー側に送信されていることが確認できればOK。
↓のアニメーションGIFで黒背景になっているウインドウがサーバー側。ブラウザ側は動画領域は見えないように隠してあります。

※クリックして再生(アニメーションGIF)

動作確認
動作確認
YouTubeのVIDEO_IDをサーバーに送信する方法
このエントリーを Google ブックマーク に追加
LinkedIn にシェア
[`evernote` not found]
Pocket


Post navigation