【SHOWROOM】星集めを自動化してみた【Chrome拡張】

タイトルの通り、星集めを自動化してみました。石油王でもないし、星集めは大変、でも応援はしたい！というテンションで勉強がてら作りました。 といっても、配信中のURLを取得して20タブ開くだけの雑なシンプルなものです。

追記：特に理由はありませんがクラス名は消しておきます。

Chrome拡張機能は３種類

まずはChrome拡張機能について。拡張機能の種類は、以下のものがあります。

Browser actions

ツールバーの右上に表示され、クリックすると機能を実行するもの。

Page actions

以前は、アドレスバーの中にアイコンが表示されていましたが、現在はこちらもツールバーの右上に表示されます。 特定のページで動作するタイプのもの。

Override Pages

Chromeの内部のページを代替することができるもの。

今回実装したのは、PageActions です。 Browser actionsでjsファイルを読み込ませる方法がわからなかったので、content_scriptsに書きましたが、chrome.tabs.executeScriptをネストして複数のjsファイルを実行させることができることを後から下記リンクから知りました。そのうち直したいです。

アレの★を集めるChrome拡張 - XXXannex

ディレクトリ構成は以下の通り。

collectionStar_0.1
├── star.png
├── jquery-2.1.1.min.js
├── manifest.json
└── myscript.js

manifest.json

拡張機能を定義するためのjsonファイルです。 拡張機能の作者や名前、アイコン、権限などのメタ情報を定義します。

{
  "manifest_version": 2,
  "name": "CollectionStar",
  "description": "Chrome extension for collecting stars",
  "version": "0.1",
  "icons": {
    "16": "star.png"
  },
  "permissions": [
      "tabs", "http://*/*", "https://*/*"
    ],
   "content_scripts": [
       {
           "matches": ["https://www.showroom-live.com/onlive"],
           "js": [
                "jquery-2.1.1.min.js",
                "myscript.js"
           ]
        }
    ]
}

Content Scripts - Google Chrome

content_scripts

matches

一致するURLを指定。SHOWROOMの配信中ルーム一覧が表示される画面で実行します。

js

実行するjsを指定。jqueryも同じディレクトリにおいています。

myscript.js

一覧画面が読み込まれた後に、確認のポップアップを表示してOKをクリックすると、配信中のルームのリンクを取得して、最大20タブ開きます。

$(function() {
    if( confirm("配信中の画面を開きますか？（最大20タブ）") ) {
        setTimeout(() => {
            var url = "";
            var domain = "https://www.showroom-live.com";
            var list = $('xxxxxxx'); //「入室」のクラス名

            for(var i=0, l=list.length; i<l; i++) {
                url = domain + document.getElementsByClassName('xxxxxxx')[i].getAttribute('href');
                window.open(url);

                // 最大20タブ開く
                if (i > 20){
                    break;
                }
            };
            console.log("配信中の番組数 :" + list.length); 
            console.log(list); 
        }, 3500);
    }
});

呼び出しのタイミング

一覧画面のリンクが全て表示された後に、処理を呼びたかったのにできませんでした。 下記のコードで画像ファイルなども含めて、読み込みが完了した後に呼ばれると思っていましたが、なぜか読み込み完了前に呼ばれます。

$(window).on('load', function(){…};
window.onload = function() {…};

対策としてsetTimeout()で3.5秒待たせています。

感想

処理が実行された後に開いたタブを見に行かなくても、放置しておけば勝手に星が貯まってくれることが確認できたので、星集めが楽になりました。一気にタブは開くのに、星が増えるのは数十秒おきのようです。

適当に作ってみましたが、Twitterへpostする機能やアマチュア枠の判定、配信終了してないかどうかの判定も実装できそうなので、気が向いたら実装してみたいと思います。

以下、参考にさせていただいたサイト

Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | 株式会社LIG

Chrome拡張の開発方法まとめ その1：概念編 - Qiita

もしよければ、この記事にもお星様（はてなスター）を投げていってくださいね！←