# <chrome extension>次の動画を通知してくれる拡張作った

思いつきから作りましたはい。

1.作ったもの

今回はchromeでyoutubeを自動再生中に次の動画タイトルを通知してくれる拡張を作りました。
ターゲットとしてはyoutubeをバックグラウンドで再生して作業する人ですかね。

f:id:poolbooyer:20190707233557p:plain — 作成した拡張機能(画像内赤枠)

2.実際のコード

そもそもchrome extensionって何使って作るだって感じあるじゃないですか、少なくとも僕にはありました。
調べたじゃないですか
なんと、なぁんとですねぇ、

HTML
CSS
JavaScript
JSON
の4つなんですねぇ、なんかびっくりです

というかJSONがキモでそれに関連して機能に応じてhtml,CSS,JSを使うって感じです。
なんかいけそうな気がしませんか。
僕はあんまりそんな気がしなかったのでサンプルを改造して目的のものを完成させました。

今回参考にしたサンプル
Water Popup

これをベースにしてググりながらごりごりやりました
今回やりたいことを踏まえて必要なコードはJSON,JS,HTMLでした

2.1 JSON

今回のキモのJSONからです。
この、拡張機能を機能させるときに必ず必要になるのがmanifest.jsonというものです。
どういう拡張機能かを表すファイルですね。
拡張機能の名称とかを書いていきます。
以下のような感じです。

{
  "name": "Next Movie is...",
  "description": "バックグラウンドで再生してるそのyoutube、次に流れる映像を通知します！",
  "version": "1.0.1",
  "manifest_version": 2,
  "permissions": ["tabs","https://www.youtube.com/*", "notifications"],
  "background": {
    "presitent": true,
    "page":"popup.html"
  },
  "icons": {
    "16": "icons/icon_16.png",
    "32": "icons/icon_32.png",
    "48": "icons/icon_48.png",
    "128": "icons/icon_128.png"
  }
}

詳しい記法は書きませんがざっくりした説明

name	value
name	拡張機能名
description	拡張機能の説明
manifest_version	書式のバージョン(基本的に2)
permissions	拡張機能がアクセスすることのできる権限
background	拡張機能がバックグラウンドで動くのを許可するやつ(くらいに思ってる)
icons	拡張機能のアイコン

2.2HTML

すごいよ、びっくりするよ、見ちゃう？？見ちゃう？？？？？

<script src="background.js"></script>

だけ、やば、終わり

2.3JavaScript

今後修正が多少入りそうなので公開されてる状態というよりは最低限こんな感じで動くよってコードを載せときます。
まずはトリガーまわり

//tabが読み込まれた(更新された時のトリガー)
chrome.tabs.onUpdated.addListener(function(tabId, props,tab) {
  //読み込み状態の判別
  if (props.status != "complete"){
    //タブのタイトル、urlを取得
    var ttl=tab.title;
    var url=tab.url;
    //動画再生画面の時に通知を発生
    if(url.match(/watch/)!=null){
      //動画名称の部分を抜き出し
      ttl=ttl.slice(0,-10);
      //通知を出す関数にタイトルを渡す
      send_notification(ttl);
    }
  }
});

読み込み状態の判別については何度か試したのですが、==にして実行すると前に再生していた動画が出てきてたので今回はこれでいきます。
からの通知生成

function send_notification(ttl) {
  
  chrome.notifications.create({
    //通知のタイプ
    type:     'basic',
    //通知につけるアイコン
    iconUrl:  'icons/icon_32.png',
    //通知のタイトル
    title:    'Next Movie is',
    //通知の内容(動画タイトル)
    message:  ttl,
    priority: 0
  });
}

こんな感じのコードを実装すると目的の機能ができました。

3.動作確認の方法

まずはchromeを起動して
more tools->extensionsを開きます
開いたらdeveloper ModeをONにします。
そうすると"Load unpacked","pack extension","update"が出てきます。
その中で、"load unpacked" を開いて、マニフェストファイルのあるフォルダを選択します。
そうすると拡張機能が読み込まれます。