© 2020 みつきよ All rights reserved. Chrome拡張機能おすすめ15選！Web開発・プログラミングするなら必須 ニュース. ※スマホ対応はしてません。思うところあって今後ちゃんと形にしようと思っているんだけど、その前に下書きというか叩き台くらいの感じで一度世に出してみます。他に開発者ツールにタブを追加したり、Firefoxならサイドバーを作ったりすることもできます。拡張用のAPIがいっぱいあるのでそれらを駆使する。もちろん普通のウェブ開発の知見も再利用できるよ。IE対応の必要がない（し、たぶんEdgeも無視されるだろう）ので、Chromeだけ、あるいはChromeとFirefoxだけが対象になります。すると最新のJavaScriptの書き方をがんがん使えます。そこら辺の勉強を兼ねて挑戦してみるのはきっと良い選択だと思います。最初のブラウザー拡張を自作するまえに、一度サンプルをインストールしてみましょう。どうせ自作したらやる作業です。サンプルはこちら。zipファイルの中身をどこかに展開しておいてください。その後一覧に表示されるカードから以下の操作が可能です開発用に読み込んだ拡張機能は、次回ブラウザー起動時にも有効ですが、警告が表示されます。普通の拡張機能一覧とは違う場所で操作します。その後一覧に表示されるカードから以下の操作が可能です。開発者ツールは、ポップアップで尋ねられる “Incoming Connection” を受け入れる必要があります。それとポップアップをデバッグする場合、開発者ツール右上の、四角が四つ並んだ “Disable popup auto hide” をオンにします。開発用に読み込んだ拡張機能は、次回ブラウザー起動時には削除されるため、都度同じ手順で読み込む必要があります。その後一覧から詳細を開いて以下の操作が可能です。開発用に読み込んだ拡張機能は、次回ブラウザー起動時に警告が表示され、無効化されます。そのうち調べます。自作のもののインストールのやり方がわかったところで、安心して自分のHello Worldを作り始めます。あ、作り始める前に、さっきインストールしたサンプルはもう消しちゃってください。サンプルと同じもの、ボタンを押すとハローするやつから始めましょう。以下のように 限界HTMLです。お好みでちゃんとしたやつに書き換えてくださって結構。とりあえずここまででできあがり。さあインストールしましょう。（前項参考）インストールできました？ 動きましたね？とりあえず動いたら、少しずつ足していきましょう。まずは簡単なところから。ボタンのアイコンを設定します。書き足して上書き保存したら、ブラウザーの方で拡張を再読み込みします。しないと反映されません、当然。同様に マウスカーソルをボタンに乗せた際にツールチップとして表示されるようです。ただHTMLから読み込むだけです。かーんたーん。まず、今いる そいつを読み込むよう、既存の ポップアップを開きなおすと、見た目も変わっているはずです。ちなみに今回変更したのはポップアップの中身だけなので、再読み込みは不要です。（不安ならしてください。）（仕様は調べていない。）本格的な拡張の機能を作り始める前に、ポップアップ内で完結するごく簡単なスクリプトから始めたいと思います。わかる人はさらっと流してください。何にしようかなー。やっぱり最初はボタンを押したら何かするやつからですかねー。というわけで、ボタンを押したら “Hello World!” が出てくるやつにします。JSファイルもCSSと同様、ただHTMLから読み込むだけです。これでどうでしょうか。ポップアップを開くと “Push me!” のボタンが表示され、それを押すと “Hello World!” の文字に置き換わるはずです。というわけで、ポップアップ内で完結するものを作る分には、普通のHTML、普通のCSS、そして普通のJavaScriptを書くだけだということがおわかり頂けたかと思います。簡単でしょう？といってもそれだけじゃ何も面白くはないので、もうちょっと何かしてみましょう。ポップアップについては前述の通り「普通のHTML」なので、普通にjQueryを読み込んで使うこともできます。まあそちらが良ければそちらでも構いません。もしjQueryから離れたコードを書き始めたいのでしたら、良い機会かもしれません。ただ、脱jQueryがゴールなのか、とにかくブラウザー拡張を作りたいのか、目標を決めておきましょう。勢い付けて二つ同時に目指すと、スッ転んだときに痛いです。jQuery使うにしろ使わないにしろ、難しいところはそこら辺じゃないです。ポップアップは出てきたけれど、書いたのは普通のHTML、普通のCSS、そして普通のJavaScriptでした。次はブラウザー拡張だけの機能を使ってみましょう。何にしようかな、雰囲気に慣れるための簡単なものが良いな。Chrome、Firefox共にグローバルの Edgeは 互換性は現時点ではまだ不完全で、標準化も完了していません。有用なAPIでも一部環境でしか使えないものがあったりします。APIについてはもうちょっと、互換性とかFirefoxの とまあそういうわけでして、notification APIを使います。ウェブ標準の方のさっそくこいつをポップアップで試してみましょう。コードは簡単です。 このコードは正しいので、コピペで一度試してみて頂きたいのですが、実は、動きません。繰り返しますが、つまりともあれ、うまく動かないときはすぐコンソールにエラーが出ていないか確認してみてください。（ポップアップの中で右クリック→要素の検証とかそういうので出てきます。）Chromeであればこんなエラーが出ているはずです。Firefoxならこう。謎ですね、正しいコードのなずなのに 実はこのオブジェクトは、事前にというわけで、設定します。作業としてはこれだけです。更新後、ブラウザーの方では拡張を再読み込みしてください。 上記のように 動いて良かった良かったというところですが、もうちょっとここをこうしたいなーとか思うかもしれません。今思わなくても、将来思うかもしれません。なので、APIの仕様を軽く調べておきましょう。Firefoxの製造元であるMozillaが管理する、MDNというサイトにリファレンスがあります。現時点ではあまり日本語版がないようですが、まあAPIについて調べるくらいなら英語よりJavaScript語を読めば良いので、なんとかなるでしょう。今回のnotification APIについては、「JavaScript API 群」に並んでいるのを見つけられます。書式はこうなっているそうです。引数や戻り値がどうなってるのかわかりますね。良かった良かった。ページの下の方には「ブラウザ互換性」の項があります。ここを見れば、自分で実装して試すことなく確認することができます。どうやらEdgeでは実装されていないようです。お知らせできるようになったので、何かお知らせしたいですね。何をお知らせしましょうか。時間でしょうか。三分でしょうか。カップラーメンのできあがりでしょうか。よし、タイマーを作りましょう。とりあえず簡単な方が良いよね。またポップアップを使うとして、HTMLには同じようにボタンがひとつだけ。押すと3分後にお知らせ。これでいきましょう。またこれじゃ動かないんだけど、いったん実装します。何のひねりもなく で、ポップアップを開いて、ボタンを押して、そのまま3秒待ってください。出ましたか？……出ましたね、今回は。あれれ～じゃあこれで終わりかな～？ いいえ、これじゃ駄目です。次はボタンを押したら、すぐにポップアップを閉じてください。ポップアップの外をクリックすれば消えます。そうすると、……お知らせが出てこなくなります。なんてこった！ライフサイクルという表現で良いのかわからないんだけど、ポップアップの中身は普通のHTMLです。普通のHTMLなので、開いたらいろいろ始まって、閉じたら全て終わります。普通のウェブページで 3分後にお知らせしようとしたら、3分間ずっとポップアップを開きっぱなしにしないといけなくなります。えー。そこで使うのがバックグラウンドです。ブラウザー拡張の読み込みと同時に開始され、その後ずっと動き続けるスクリプトです。書いてみましょう。まずは 久しぶりなので全部載せました。追加した 続いて こう書いて新規作成して、再読み込みして、3秒待つと……、ポップアップを触らなくてもお知らせが出てきます！ やった！やってねえ！起動の3秒後にお知らせしても仕方がないですね。ポップアップを閉じても動かせることはわかったので、次の課題は、こいつをポップアップから操作してタイマー起動することです。通信は まず送る方。これは 続いて受ける方。こちらが さらっとやりましたが、 さてバックグラウンドのスクリプトは、前述の通り動きっぱなしです。ので、変更したら一度ブラウザー拡張を再読み込みする必要があります。お忘れなく。書き換えて、再読み込みして、ポップアップのボタンを押して、閉じて、3秒待つと、お知らせが出てくるはずです。やったね！最近こちらに書いたのでどうぞ。タイマー自体は動くようになったので、もうちょっとポップアップの見た目を整えたりしましょう。さくっと。あと機能追加として、時間を3分で固定ではなく任意に入力できるようにしたり、どうにかして残り時間を表示したり、途中でやめたり再開したりなんかができると良いかもしれません。そういえば最近タイマーといえば「ポモドーロ」というのが流行です。30分ごとに一区切り付けるやつです。これ目指してみてはどうでしょうか。さらにポモドーロのタイマーができて仕事で使えるようになったら、今度は仕事の進捗や能率を管理したくなるかもしれません。という感じでちょっとアイディアだけ。何も作りたいものが思いつかない方は、そんな感じで練習がてら作ってみてはいかがでしょうかというご提案でございます。あ、それから作るものじゃなくて作り方の方で、本格的にNPMパッケージを諸々導入して脇を固めるのも良さそうです。作ったものは公開しましょう。ブラウザーごとにストアが用意されています。Chromeの方で開発者登録するのに、初回$5かかります。身分証明みたいなもんですかね。Firefoxの方は無料です。いずれも指定サイズの画像とか、諸々の情報を入力する必要があります。Edgeは1,847円かかります。でもその後の手順がよくわからなくて、まだ公開できてません。ううむ。API一覧を眺めておもしろそうなものを見つけましょう。そのうちの一部を簡単に紹介だけ。3種類あるけど、とりあえず あと 特定のページ、あるいは全ページにJSファイルやCSSファイルを挿入する場合は、 スクリプトからコードを生成して実行する場合、あるいはJSファイルやCSSファイルを挿入する場合は 挿入したファイルからブラウザー拡張が持つファイルにアクセスする場合（画像を表示するとか）、 数字とか英単語とかなら、 オンとオフでアイコン画像を切り替えるみたいなのには 画像は事前に用意したものに限らず、Canvasとかで動的に生成したものも設定できそう？ 未調査。ちなみに 本文でもやったけど、 コンテンツスクリプトだと受信できない？っていう話をVuePressを使ってやってみたんだけど、どこで公開しようとか考えてる間に先に内容をある程度出しておこうと思ってここに置いておきます。もうちょっとページが分かれたりスクリーンショットが追加されたりする予定です。あとMDNが全然日本語になってなくて、翻訳作業したい気はあるんだけど、更新とかじゃなくて新規にやった経験はなくて、どなた様かに一度レビューしてもらいたいなと思いつつ、どこで誰に頼めばよくわからないので、なんかあれば教えてほしいです。（受け身）以上です。今後とも何卒宜しくお願い致します。 Google Chromeのせいでバッテリーが切れてしまうという悩みは、もうすぐ過去のものになりそうです。 最新の開発者向けビルドChrome Canaryでは、バックグラウンドのウェブサイトを処理する方法に大幅な変更が加えられており、バッテリーへの負担が軽減されているとのこと。