2017年夏の甲子園出場校Webサイトに記念リボンをかけるChrome拡張を作りました

今夏の甲子園もついに全49代表校が出揃いました。

今年の参加校数は全国で3839校なので、大まかに78校につき1校という狭き門を勝ち抜けた学校となるわけです。すごいですねー。

こんな各校の栄誉を称える証として、学校の Web サイトに夏の甲子園出場記念リボンをかける Chrome 拡張を作ってみました。

なお、この記念リボンは春のセンバツでもやったネタでして、その時の記事はこちらになります。

あれこれ忙しいことが続くと、自分が楽しめるものでも作って現実逃避したくなりますね。というわけで、前回の記事に引き続き高校野球ネタで遊んでみま...

Chrome 拡張について

今回作成した Chrome 拡張はこちらです。

この Chrome 拡張を有効にした状態で甲子園出場校の Web サイトにアクセスすると、下記のように「第99回全国高校野球選手権大会出場」と書かれた記念リボンがページ右上に表示されます!

甲子園出場記念リボン(大阪桐蔭)

Chrome 拡張の使い方

下記ページの「Source code (zip)」というリンクから、ファイルをダウンロードし、ダウンロードした zip ファイルを展開しておきます。

次の手順で Chrome 拡張の設定をします。

  1. Google Chrome で chrome://extensions/ にアクセスします。
  2. 右上の「デベロッパー モード」をチェックします。
  3. 「パッケージ化されていない拡張機能を読み込む…」ボタンをクリックします。
  4. ダウンロードしたファイルの extension フォルダを開きます。

設定が終わったら Chrome で出場校いずれかの Web サイトにアクセスします。今大会出場校の Web サイト URL はこちらを参考にしてみてください。

「第99回全国高校野球選手権大会出場」というリボンが表示されたら OK です。

課題

実は、米子松蔭のサイトではまあうまく動作していません。

こちらのサイト、昔ながらのフレーム構造になっているんですが、フレームの読み込み先が別ドメインのページになっているため、JavaScript でソースを編集しようとしても cross domain のセキュリティ制限に引っかかってしまいます。何か回避策はないかと探ってはみましたが今のところは未解決で・・・。

ソースは GitHub にありますので、何かうまい解決策がありましたらどなたか教えてください(笑)

おわりに

以上、Chrome 拡張のご紹介でした。

もし興味のある方がおりましたら、ぜひ試してみてくださいね。

PHPが好きなWeb系エンジニアです。フリーランスでWebサイト制作やWordPressのカスタマイズ、システム開発等を雑多にこなしています。バンカラ応援好きの振り飛車党。 高校野球 / 将棋 / WordPress / ブログ / 食べること / 二児の父親 >>詳しいプロフィールはこちら



シェアする

フォローする