こんにちは。
Micro Connectのリーダー、naoyukiと申します。よろしくお願いします。

さて、皆さん「Google Chrome(グーグルクローム)」というものはご存知でしょうか？
かなり有名なブラウザですが、実はChromeには拡張機能というものがありまして、その拡張機能は簡単に作れちゃうんです！

ということで今回は、Chromeの拡張機能を作ってみたいと思います！

Chromeの拡張機能とは？

拡張機能は、ブラウザの機能をよりよくするためのものです。
お天気を表示したり、ページを翻訳したりなど様々な拡張機能が広まっています。
公開されている拡張機能は、Chromeウェブストアでダウンロードできます。ぜひ試してみてくださいね！
Chrome ウェブストア - 拡張機能
この2つです。
それでは、早速作っていきましょう！

必要事項の記入

まずフォルダをお好みの所に作成します。私は「ドキュメント > ChromeExtension > textext」に作成しました。
作成したらその中に「manifest.json」ファイルを作成します。今回の記述はこちら

HTMLファイルを作成

先程のmanifest.json内の"default_popup"に記述したURLのHTMLファイルを作成します。

GitHub内で「index.html」ファイルを作成し、その中に以下の記述をしていきます。これをGitHub Pagesで公開します。

簡単な拡張機能を読み込む

それでは、必要なファイルをフォルダに入れてChromeで読み込みます。左上の「パッケージ化されていない拡張機能を読み込む」を押して、
出てきたダイアログから「testext」フォルダを選択して「フォルダの選択」を押します。
そうすると上のようなものが表示されます。Chromeに追加されました。
右上のパズルマークから「無限擬似ポチポチ」を押して表示するんですが、

ここで事件発生。

なんと押しても反応がないんです...！
これじゃあただの飾りやん・・・
しらべてみると、ウェブのHTMLファイルは読み込めないらしいです。残念...
ということなので仕方なくローカルにHTMLファイルを保存することにしました。
そうすると...？
ちゃんと表示されました！

音をつける

作ったのはいいんですが、音が無いので少し寂しいですね...
ということで、今度はクリック時に音を出す処理を追加していきます。
使うスクリプトは「JavaScript」です。

「potisoundjs.js」ファイルに以下のような記述をします。さらに「potipage.html」を以下のように修正します。

これで完成です！
動きを確認してみましょう。
ちゃんと動いてますね！

さいごに

今回は、Chromeの拡張機能で無限ポチポチを作ってみました。皆さんも是非作ってみてくださいね！

それでは今回はこの辺で。