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

拡張機能は、補完的でカスタマイズされた機能を提供するために設計された、ブラウザへの追加機能です。ブラウジング エクスペリエンスを遅くしたり、損なったりする拡張機能は、ユーザーにとって問題であり、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 などのツールを使用して、拡張機能のパフォーマンスを評価し、ビジュアル拡張機能ページで改善できる領域を特定します。