なめこ栽培キットこんにちは。以前の私は「Chrome拡張を自作して、なめこの雪を降らせてみた」という記事を書きました。読み返してみると分かりやすい記事ではなかったので、改めてブラウザ拡張の入門的な記事を書いてみました。Chrome)ブラウザ拡張を動かす(Firefox)注意事項:インターネット上のHTMLを書き換えるわけではないさいごになめこで学ぶブラウザ拡張サンプルを作りました。等)で読み込むことができます。github.comなお、本サンプルですが、Googleの検索ページのロゴに、お気に入りのなめこを表示するブラウザ拡張となっております。Googleの検索ロゴは、特定の記念日によって差し替わることがありますが、自分でなめこの日を制定して差し替えてみたというわけです。ここからは技術的な解説になります。本サンプルには、以下のファイルが入っています。「jquery-3.3.1.min.js」は、jQueryの公式サイトからダウンロードしたJSであり、実質覚える必要があるのは「manifest.json」と「main.js」だけです。manifest.jsonなめこの画像は、旧なめこパラダイスの「おまけ」コンテンツで配布されている画像を使用しました。namepara.comマニフェストを書くブラウザ拡張の仕様は、とてもシンプルです。絶対に必要なのは「manifest.json」だけです。マニフェストには、ブラウザ拡張の基本情報を書きます。以下は、本サンプルにおける実際の設定ファイルです。]}content_scripts/matches「content_scripts/matches」には、どのサイトでブラウザ拡張を使いたいのかを記述します。ここをしっかり記述しないと、想定外のサイトでブラウザ拡張が発動してしまうため、慎重に書きましょう。本サンプルでは、Googleの検索ページでのみブラウザ拡張が動作する設定としています。"https://www.google.co.jp/search*"],記法は正規表現ライクのように思えますが、正確には異なりまして「URLパターンマッチング」の仕様に準拠する書き方となります。パターンにマッチするなお、ブラウザ拡張にはある程度の統一仕様があります。docs」を見ましょう。「Edge、Chrome、Firefox」をはじめとした各ブラウザの対応状況が書いてあります。MDNcontent_scripts/jsブラウザ拡張で動作するJavaScriptを設定します。ここで注意する必要があるのは、順番くらいです。JavaScriptは読み込む順番が重要でして、例えば本サンプルでは「main.js」でjQueryを使用しています。すると「main.js」はjQueryが読み込まれていない状態では、正しく動作しません。そこで、先にjQueryを読みこむ順番としているのです。"main.js"],詳しくは、以下のドキュメントを参照してください。MDN*content_scripts/run_at「run_at」は、ブラウザ拡張の起動タイミングです。document_idle」の順です。startの状態では、まだHTMLのDOMは読み込み中の状態です。多く使われるのは「document_end」や「document_idle」になるかと思います。MDNGoogle検索のロゴにお気に入りのなめこを表示するさて、いよいよ「main.js」です。jQueryを使って、Googleの検索ロゴをお気に入りのなめこに差し替えます。本記事はあくまでブラウザ拡張の入門であり、jQueryの細かい解説は行いません。平易なjQueryで記述しております。何をやっているのかは、比較的分かりやすいかと思います。重要なのは、以下のコードがブラウザ上で動きますよという点です。ブラウザ拡張というのは、このように動作するのです。Chrome」では「chrome://extensions/」にアクセスします。画面右上のデベロッパーモードを有効にするパッケージ化されていない拡張機能を読み込むこれで完了です。ブラウザ拡張を動かす(Firefox)「Firefox」では「about:debugging」にアクセスします。一時的なアドオンを読み込むサンプルの「manifest.json」を選択するこれで完了です。注意事項:インターネット上のHTMLを書き換えるわけではない本サンプルでは、Google検索のロゴをお気に入りのなめこにする実装を行ないました。このように、HTMLを書き換えるコードは、簡単に開発することができます。一点だけ注意点があります。本サンプルのコードはブラウザ上で動作し、ローカルのHTMLを書き換えています。インターネット上のHTMLを書き換えているわけではありません。この違いは混同しやすいのですが、とても重要です。インターネット上のHTMLを直接書き換え(改ざん)するような行為は、状況によっては犯罪となります。ブラウザ拡張を開発するような方であれば、何かしらのWeb系の開発に携わっている方が多いと思いますので、必ず知っておきましょう。ホームページやファイルの改ざん|不正アクセスとは?|どんな危険があるの?|基礎知識|国民のための情報セキュリティサイトさいごにブラウザ拡張は、とても簡単に開発することができます。コードによっては、一つのブラウザ拡張でクロスブラウザに対応することも可能です。困ったら、MDNのドキュメントを見ましょう。developer.mozilla.orgFirefoxの拡張機能は、クロスブラウザーの互換性が高く、さらに公式ドキュメントに各ブラウザの対応表まで記載されています。実際にブラウザ拡張を使うかどうかはともかくとして、エクセルのマクロ感覚で、ブラウザも拡張することができるという選択肢は、知っておいた方が良いと思います。ブラウザ拡張というのは、こんなにもお手軽であり、皆様の手の届くところにあるのです。--init」による「.eslintrc.json」の生成ESLintはJavaScriptのソースコードを静的解析するツールです。はてなブログProWEB系エンジニア。ブログで趣味の映画・ゲーム・読書の感想を書いたり、技術系の知見を共有しています。技術書典7にサークル参加して、技術同人誌を頒布しました。BOOTHに電子版があります。(1)月別アーカイブスポンサーリンクスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。