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

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

拡張機能はブラウザに追加されるもので、補足的なカスタマイズ機能を提供するように設計されています。説明します。ブラウジングを遅くする、または損なう拡張機能が、 Chrome 拡張機能の目標に反します。コーディングの一般的な習慣に加えてデベロッパーは以下のベストプラクティスに沿って、拡張機能が最高のパフォーマンスで稼働するようにする必要があります。

あらゆる可能性を遅らせる

必要になるまでリソースは読み込まないでください。ファイルを開くために必要なもののみを含めます。引数として、startup 関数内で指定します。起動時にのみ必要なものを起動時には読み込まないでください。ユーザーがボタンをクリックしたとき、またはログインしたときにのみ動作する機能できます。

重要な予定を管理する

効率的なバックグラウンドスクリプトに、ユーザーにとって重要となる登録済みイベントを含めるあります。リスナーがトリガーされるまで休止状態になり、それに応じて行動してから休止状態に戻るあります。不要なスクリプトを実行し続けるために、システムリソースが浪費されます。

バックグラウンドスクリプトをマニフェストに登録し、考えています

{
  "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 などのツールを使用して、広告表示オプションのパフォーマンスを評価し、画像表示オプションページで改善できます