ブラウザの拡張子

私はちょうどgithubのUIからコードツアーを実行することができますクロムとFirefoxの新しい拡張機能を公開しました.コード旅行とこのブログ柱の拡大に関する詳細情報.

Githubを離れることなくコードツアーを実行する

クェンティンM・ Jan 18・ 1分読む

#news #chrome #firefox #extension

私は、あなたがステップで正確に同じことをする方法についてのシリーズを書くのが楽しいと思いました.
この2番目のブログ記事は、ブラウザの拡張機能を開発する環境を設定する方法に焦点を当てます.

マニフェストファイル

前の投稿で見たことは、ブラウザに読み込まれるようにまとめてください.そうするためには、フォルダを持っている必要がありますextension ) ロードされる別のスクリプト、エクステンション用のアイコン、およびマニフェストファイルを読み込み、ブラウザに何を読み込むか、どこで見つけるかを指定します.拡張モジュールのマニフェストは次のようになります.

{
  "name": "Code tours Github",
  "version": "0.0.1",
  "description": "Allows to run code tours in your browser",
  "manifest_version": 2,
  "minimum_chrome_version": "60",
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["https://render.githubusercontent.com/*", "https://github.com/*"],
  "icons": {
    "128": "code-tour.png"
  },
  "content_scripts": [
    {
      "run_at": "document_start",
      "matches": ["https://github.com/*/*"],
      "js": ["github.js"]
    }
  ]
}

別のプロパティに深くダイビングしましょう.

拡張モジュールの説明

プロパティname , description and version ここでは拡張モジュールを説明します.The name ChromeのWebストア(またはFirefoxのアドオンストア)に表示されるときには、拡張アイコンの上にホバー.The description また、デフォルトでは、ストアに表示されます.拒絶の原因が悪い説明として適切にあなたの拡張子に名前をつけるべきです(私たちは、次のブログ記事で拡張を提出することについてもっと見ます).
The version 新しいバージョンをリリースするときにのみインクリメントする必要があります.

いいロゴ！

The icon プロパティは、ブラウザの拡張ツールバーで表示する素敵なイメージへのパスです.また、ストアページに表示されますので、それのためのまともな解像度を持っていることを確認します.

スクリプトの起動

The backgrounds and content_scripts セクションでは、ロードする別のスクリプトを一覧表示します.マニフェストファイルからスクリプトへの相対パスを与えるだけです.コンテンツスクリプトの場合は、明示的にどのページに含める必要がありますmatches (or exclude_matches ) プロパティ.

パーミッション

拡張モジュールから実行するアクションに応じて、必要なものが必要になりますpermissions . マニフェストファイルに一覧表示する必要があります.例えば、

bookmarks ブラウザのブックマークを管理することができる

nativeMessaging 外部プログラムを起動したい場合は

認証をしている人にも問い合わせをすることができます.(認証なしで簡単に取得できますが、クッキーを必要とする内容を問い合わせる場合は、宣言する必要があります).

また、動的にバックグラウンドスクリプトからそれらを必要とすることもできますが、拡張モジュールに必要なすべてのアクセス許可をマニフェストファイルで動作させることを推奨します.したがって、ユーザーはそれらを拒否することはできません(それらを受け入れるか、拡張モジュールをインストールしない).
つの重要な注意:あなたが必要とするより多くの許可を求めないでください、あなたがあなたの拡張を提出するとき、あなたはレビュープロセスの間、彼らのすべてを正当化しなければなりません、そして、これは拒絶のもう一つの原因です.

最小限の作業拡張

を実行するには、extension その中に3つのファイルがあります.
マニフェスト.JSON :

{
  "name": "My extension",
  "version": "0.0.1",
  "description": "A small test!",
  "manifest_version": 2,
  "minimum_chrome_version": "60",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "run_at": "document_start",
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content_script.js"]
    }
  ]
}

スクリプト.js

console.log('content script loaded')

背景.js

console.log('background script loaded')

さあ、ブラウザにロードしましょう!

拡張モジュールの読み込み

今我々はコンテンツのスクリプト、背景、およびマニフェストを持つフォルダを持って、我々は我々のブラウザにそれを読み込むことができます.

クロム

クロムのために、ちょうど行ってください.まず、右上隅にある開発者モードをアクティブにします.

左上にある“読み込みアンパック”を選択します.

これは、ファイルのピッカーをプロンプトが表示されます.選択extension フォルダ(manifest.json ファイル).あなたの拡張はロードされて、この同じページから再ロードされることができます.
拡張モジュールに関連するバックグラウンドスクリプトがある場合は、「検査ビュー:背景ページ」リンクが表示されます.これにより、バックグラウンドスクリプトにリンクされているdevツールが開き、ログをチェックできます.

ファイルを編集し、拡張モジュールを再読み込みするたびに、再読み込みボタンをクリックできます.

ファイアフォックス

Firefoxの場合、それは簡単です.ページに移動してください.

次に、「一時的な負荷を読み込む」をクリックします.

chromeと同じように、ファイルにプロンプトが表示されます.選択manifest ファイル(フォルダではない)と拡張子が読み込まれます.
あなたはバックグラウンドページのdevtoolsへのアクセスを許可する“検査ボタン”にアクセスする必要があります.

結果

どちらの場合も、バックグラウンドスクリプトを検査するとき、コンソールに「バックグラウンドスクリプトがロードされている」ことが表示され、あなたが訪問するすべてのページで、「コンテンツスクリプトロード」が表示されます.

更なる

私の場合、私はTypesScriptを使って行きました.これは私が以前に述べたものを生成するためにコードを転送する必要があり、異なったスクリプトファイルを生成するためにWebPackを使用します.結果コードを見つけることができますhere .
より速く開始するには、などのリポジトリを使用する準備ができてリソースの多くを見つけることができますchrome-extension-typescript-starter を入力します.それはすぐに始めるために良い方法です.

結論

我々は深く、どのようにセットアップをテストし、ブラウザの拡張機能をテストに飛び込んだ.次のポストでは、いくつかの本当の機能の実装を開始します!次の1つをチェックアウトしたい場合はこちらをご覧ください.
-アクションボタン
バックグラウンドカラー:けっこうffffff!重要
色:千円!重要
ボーダーカラー:こっち重要
｝

クェンティンM

Engineering Manager @Doctolib – Mostly writing about TypeScript / JavaScript
写真でRicardo Gomez Angel on Unsplash