このページは Cloud Translation API によって翻訳されました。

最高のパフォーマンスを達成する

拡張機能はブラウザに追加されるもので、補足的な機能やカスタマイズされた機能を提供するように設計されています。ブラウジング体験を遅くしたり、低下させたりする拡張機能は、ユーザーにとって問題となり、Chrome 拡張機能の目的に反します。拡張機能が最高のパフォーマンスで実行されるように、開発者は一般的に適切なコーディング習慣に加えて、これらのプラクティスに従う必要があります。

可能な限り延期する

必要になるまで、リソースを読み込まないようにします。起動関数には、拡張機能を開くために必要なもののみを含めます。ユーザーがボタンをクリックした場合にのみ必要となるものや、ユーザーがログインしたときにだけ機能する機能は起動時には読み込まないでください。

重要なイベントを管理する

効率的なバックグラウンドスクリプトには、拡張機能にとって重要な登録済みイベントが含まれます。リスナーがトリガーされるまで休眠状態になり、それに応じて行動し、休止状態に戻ります。不要なスクリプトを実行し続けると、システムリソースの消耗につながります。

バックグラウンドスクリプトは、可能であれば、永続性を false に設定してマニフェストに登録する必要があります。

{
  "name": "High Performance Extension",
  "description" : "Sleepy Background Script",
  "version": "1.0",
  ...
  "background": {
   "scripts": ["background.js"],
   "persistent": false
  },
  ...
}

バックグラウンドスクリプトを永続的にアクティブにする唯一の方法は、拡張機能が chrome.webRequest API を使用してネットワークリクエストをブロックまたは変更する場合です。webRequest API は、永続的でないバックグラウンドページとは互換性がありません。

{
  "name": "High Performance Extension",
  "description" : "Persistent Background Script",
  "version": "1.0",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://<distracting social media site>.com/*"
  ],
 ...
}

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {redirectUrl: "/"};
  },
  {urls: ["https://social.media.distraction.com/*"]},
  ["blocking"]
);

コンテンツスクリプトを含む

コンテンツスクリプトは、拡張機能のシークレットエージェントとして機能し、ウェブページを軽く読み取ったり、変更したりしますが、高度なロジックを拡張機能のコアに任せます。明確なターゲットを設定して、関連性の低いページでの侵襲的なアクティビティを避ける必要があります。意図的な動作を除き、ブラウジングエクスペリエンスでコンテンツスクリプトが気づかれないようにするのが理想的です。

ターゲットを宣言する

拡張機能が不要な場所や不適切なタイミングでコンテンツスクリプトを実行すると、ブラウザの動作が遅くなり、機能エラーが発生する可能性があります。これを回避するには、マニフェストで一致パターンを指定し、document_start ではなく document_idle でスクリプトを実行します。

{
  "name": "High Performance Extension",
  "description" : "Superfly Superlight Content Scripts",
  "version": "1.0",
  ...
  "content_scripts": [
    {
      "js": ["content_script.js"],
      "matches": ["/*"],
      "run_at": "document_idle"
    }
  ]
  ...
}

ユーザーの操作があるウェブページにのみ拡張機能がアクセスする必要がある場合は、プログラムによって挿入します。プログラムによるインジェクションは、ユーザーが起動したときにのみ実行されます。

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'document.body.style.fontSize="100px"'
  });
});

コンテンツスクリプトは必要な場合にのみ使用する

拡張機能の多くは、目的の機能を実現するためにコンテンツスクリプトをまったく必要としない場合があります。declarativeContent API を使用すると、関連条件が満たされたときに拡張機能が認識するルールを設定できます。この方法は、コンテンツスクリプトよりも効率的であり、使用するコードも少なくて済みます。

拡張機能で、HTML5 の <video> 要素を含むサイトにアクセスしたユーザーにページアクションを表示する必要がある場合は、宣言的なルールを指定できます。

chrome.runtime.onInstalled.addListener(function() {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            css: ["video"],
          })
        ],
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

コードの効率の評価

ウェブサイトのパフォーマンスに関する一般的なベストプラクティスは、非同期プログラミングの手法や、コードを最小限かつコンパクトにする手法など、拡張機能にも応用できます。

Lighthouse などのツールを使用して、拡張機能のパフォーマンスを評価し、ビジュアル表示オプションのページを改善できる部分を特定します。