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 拡張のご紹介でした。

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

この記事を書いた人

ko31

岩手県出身、群馬県在住のフリーランスWeb系エンジニアです。
Webシステム・アプリ、Webサービス、WordPress開発等を雑多にこなしています。バンカラ応援好きの振り飛車党。
PHP / WordPress / 高校野球 / 将棋 / WordPress / ブログ / 食べること / 二児の父親

>>もっと詳しいプロフィールはこちら

お仕事のご相談・お問い合わせ

当ブログの管理人は、Gosign(ゴーサイン)という屋号でフリーランス Web エンジニアとして活動しています。
ブログの掲載内容はもちろん、Web サイト制作や Web アプリケーション開発などのご相談・ご質問がありましたら、どうぞお気軽にお問い合わせください!

合わせて読みたい記事