Chrome拡張機能を構築する方法

今週末、私は同じタスクを繰り返し実行し、それらを自動化したいと思っていることに気付いたので、Chrome拡張機能を開発しました。さらに、私は流行を乗り切るために家にいるオタクなので、蓄積されたエネルギーを物を作ることに捧げます。私は長年にわたってChrome拡張機能をいくつか開発しましたが、この記事があなたも始めるのに役立つことを願っています。始めましょう！

マニフェストファイルを作成します

最初のステップは、 manifest.jsonという名前のファイルを作成し、プロジェクトフォルダーに配置することです。その機能はpackage.jsonに似ています。これは、名前、バージョン、必要な権限など、Chrome Web App Storeのプロジェクトに関する重要な情報を提供します。これが例です：

 {
  「manifest_version」：2、
  「名前」：「サンプル名」、
  「バージョン」：「1.0.0」、
  「説明」：「これは説明の例です」、
  「short_name」：「例の名前の略語」、
  「許可」：["ActiveTab"、 "seclarativecontent"、 "Storage"、 "<all_urls> 「]、
  「content_scripts」：[
    {
      「マッチ」：["<all_urls> 「]、
      「css」：["background.css"]、
      「js」：["background.js"]
    }
  ]、、
  「browser_action」：{
    「default_title」：「アクションを実行するときにアクションを実行する」、
    「default_popup」：「popup.html」、
    「default_icon」：{
      "16"： "Icons/Icon16.png"、
      「32」：「アイコン/アイコン32.png」
    }
  }
}</all_urls></all_urls>

いくつかの詳細に気付くかもしれません - 最初に：名前と説明は好きなように記入できます。

権限は、拡張機能を実行する必要があるものによって異なります。この例では、 ["activeTab", "declarativeContent", "storage", "<all_urls> "]</all_urls>を使用します。 ["activeTab", "declarativeContent", "storage", "<all_urls> "]</all_urls> 、この特定の拡張機能にはアクティブなタグに関する情報が必要であり、ページコンテンツを変更する必要があり、LocalStorageにアクセスする必要があり、すべてのWebサイトでアクティブにする必要があります。1つのWebサイトでアクティブである必要がある場合は、その配列の最後のインデックスを削除できます。

Chromeの拡張ドキュメントには、すべての許可とその意味がリストされています。

 「content_scripts」：[
  {
    「マッチ」：["<all_urls> 「]、
    「css」：["background.css"]、
    「js」：["background.js"]
  }
]、、</all_urls>

content_scriptsセクションは、拡張機能がアクティブになるサイトを設定します。 Twitterなどの別のWebサイトが必要な場合は、 ["https://twitter.com/*"]として書くことができます。 CSSとJavaScriptファイルは、拡張機能に必要なものすべてです。たとえば、私の効率的なTwitter拡張機能は、これらのファイルを使用して、Twitterのデフォルトの外観を上書きします。

 「browser_action」：{
  「default_title」：「アクションを実行するときにアクションを実行する」、
  「default_popup」：「popup.html」、
  「default_icon」：{
    "16"： "Icons/Icon16.png"、
    「32」：「アイコン/アイコン32.png」
  }
}

browser_actionの一部のコンテンツもオプションです。たとえば、拡張機能がその機能を実装するためにポップアップを必要としない場合、 default_titleとdefault_popupを削除できます。この場合、拡張機能のアイコンのみが必要です。拡張機能が特定のWebサイトでのみ有効である場合、Chromeは非アクティブな場合に拡張機能のアイコンを塗りつぶします。

デバッグ

マニフェストファイル、CSS、およびJavaScriptファイルの準備ができたら、 chrome://extensions/ Browserのアドレスバーにアクセスし、開発者モードを有効にします。これにより、ロード解凍ボタンがアクティブになり、拡張ファイルが追加されます。拡張機能の開発者バージョンがアクティブであるかどうかを切り替えることもできます。

この時点で、バージョン制御用のGitHubリポジトリを開始することを強くお勧めします。これはあなたの仕事を救う素晴らしい方法です。

拡張機能を更新するときは、このインターフェイスからリロードする必要があります。画面に小さな更新アイコンが表示されます。また、拡張機能が開発中にエラーが発生した場合、スタックトレースと詳細情報を備えたエラーボタンも表示されます。

ポップアップウィンドウ機能

幸いなことに、これは拡張機能が拡張機能アイコンからポップアップするポップアップを使用する必要がある場合、非常に簡単です。マニフェストファイルにbrowser_actionを使用してファイル名を指定した後、画像を含むページを構築するのが好きなHTMLおよびCSSを使用できます（インラインSVGを使用する傾向があります）。

ポップアップに機能を追加する必要がある場合があります。これにはJavaScriptが必要になる場合があるため、マニフェストファイルにJavaScriptファイルを指定し、次のようにポップアップファイルにリンクしてください。

このファイルで、最初に関数を作成し、次のようなポップアップDOMにアクセスします。

 document.addeventlistener（ "domcontentloaded"、（）=> {
  var button = document.getElementById（ "submit"）;

  button.addeventlistener（ "click"、（e）=> {
    console.log（e）;
  }）;
}）;

popup.htmlファイルにボタンを作成すると、 submitと呼ばれるIDを割り当ててからコンソールログを返す場合、実際にはコンソールにログインしているものは何もないことに気付くかもしれません。これは、私たちが異なるコンテキストにいるためです。つまり、ポップアップを右クリックして、別のDevToolsセットを開く必要があります。

これで、ログにアクセスしてデバッグできます！ただし、LocalStorageに何かが設定されている場合、拡張機能のDevTools LocalStorageにのみ存在することを忘れないでください。ユーザーのブラウザLocalStorageではありません。 （初めて試したときにこの問題に遭遇しました！）

拡張機能の外でスクリプトを実行します

これはすべて良いことですが、現在のタブ情報にアクセスできるスクリプトを実行したい場合はどうなりますか？これを行う方法がいくつかあります。私は通常、 DOMContentLoadedイベントリスナー内の個別の関数を呼び出します。

例1：ファイルをアクティブにします

function emplefunction（）{
  Chrome.tabs.executecript（（）=> {
    Chrome.tabs.executecript（{file： "content.js"}）;
  }）;
}

例2：少量のコードのみを実行します

このアプローチは、少量のコードだけを実行する必要がある場合に最適です。ただし、文字列またはテンプレートのリテラルとしてすべてを渡す必要があるため、すぐに処理するのが難しくなります。

 function emplefunction（）{
  Chrome.tabs.executecript（{
    コード： `console.log（ 'こんにちは'）;`
  }）;
}

例3：ファイルとパスパラメーターをアクティブにします

拡張機能とタブはさまざまなコンテキストで実行されることを忘れないでください。これにより、それらの間の渡されるパラメーターは簡単ではありません。ここで最初の2つの例をネストし、コードを2番目のファイルに渡します。必要なものはすべて1つのオプションに保存しますが、それが機能するためには、オブジェクトをストリング化する必要があります。

 function emplefunction（options）{
  Chrome.tabs.executecript（
    {code： "var options =" json.stringify（options）}、
    関数（） {
      Chrome.tabs.executecript（{file： "content.js"}）;
    }
  ）;
}

アイコン

マニフェストファイルは2つのアイコンのみを定義していますが、クロムWebストアに拡張機能を正式に送信するには、128ピクセルの正方形のアイコンと、128ピクセルでもあるが、画像とアイコンのエッジの間にパディングがあるicon128_proper.pngと呼ばれるアイコンを正式に送信するためにさらに2つ必要です。

どのアイコンが使用されていても、ブラウザの明るいモードと暗いモードで見栄えがする必要があることを忘れないでください。私は通常、名詞プロジェクトでアイコンを見つけます。

Chrome Web App Storeに提出します

これで、Chrome Web Store Developer Consoleにアクセスして拡張機能を送信できます。 [新しいプロジェクト]ボタンをクリックして、圧縮プロジェクトファイルをアップローダーにドラッグアンドドロップします。

Chromeは、ここで拡張機能についていくつかの質問をし、拡張機能で要求された権限とそれらのアクセス許可が必要な理由についての情報を求めます。警告： 「ActiveTab」または「Tabs」権限を要求するには、コードが悪用を実行しないことを確認するために時間がかかります。

それでおしまい！これにより、Chrome Browser拡張機能の構築を開始する準備が整うはずです！ ？

以上がChrome拡張機能を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。