Explore Safari Web Extension improvements

ハイライト

Safari 15 では、Web 拡張機能に 3 つの重要な改善が加えられています。メモリ使用量を削減する非永続的なバックグラウンドページ、高パフォーマンスのコンテンツインターセプトを実現する declarativeNetRequest API、および新しいタブページをカスタマイズする機能です。iOS と iPadOS は Web Extensions を初めてサポートします。

主な内容

ブラウザ拡張機能の開発者は長年、パフォーマンスの問題に直面してきました。バックグラウンドページが一度開かれると、ユーザーが拡張機能を数時間使用しなかったとしても、そのページは永久に実行され、メモリと CPU を消費します。

Safari 15 では、非永続的な背景ページを使用してこの問題を解決します。バックグラウンドページは必要な場合にのみロードされ、イベントの処理後に自動的にアンロードされます。これは iOS デバイスにとって特に重要です。リソースに制約のあるモバイルデバイスでは、複数のバックグラウンドプロセスを常駐させることができません。

非永続的な背景ページ

従来の拡張機能のバックグラウンドページは永続的です。

{
  "background": {
    "scripts": ["background.js"]
  }
}

これにより、バックグラウンドプロセスが永久に実行されます。非永続的なものに変更します。

{
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

（03:22）

キーポイント:

イベントリスナーはスクリプトの最上位に登録する必要があり、コールバック内に登録することはできません。
使用browser.storageAPI はグローバル変数の代わりに状態を保存します
取り除くwebRequestリスナー、イベント頻度が高すぎるため、非永続ページと互換性がありません
使用browser.alarms交換するsetTimeout/setInterval

ストレージ API を使用して状態を保存する

// background.js

// 错误：全局变量会在页面卸载后丢失
let replacementCount = 0;

// 正确：使用 storage API
let replacementCount = 0;

browser.storage.local.get('count').then(result => {
    replacementCount = result.count || 0;
});

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === 'replace') {
        replacementCount += message.count;
        browser.storage.local.set({ count: replacementCount });
    } else if (message.action === 'getCount') {
        sendResponse({ count: replacementCount });
    }
});

（06:55）

キーポイント:

browser.storage.localこれは非同期 API であり、データはディスクに保存されます。
マニフェストに追加する必要がありますstorage権限・イベントリスナーは以下に登録されています。storage.get()コールバックの外側では、ページの読み込み時にコールバックが登録されていることを確認してください。

declarativeNetRequest コンテンツのインターセプト

これは Chrome によって導入され、Safari 15 によってサポートされる API です。ルールは JSON 形式で宣言され、ブラウザーは内部でルールを照合します。拡張機能はリクエストの内容を確認するために JavaScript を実行する必要はありません。

manifest.json：

{
  "permissions": ["declarativeNetRequest"],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "ruleset_1",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
}

（08:37）

rules.json：

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "block"
    },
    "condition": {
      "regexFilter": ".*\\.(jpg|png|gif)$",
      "resourceTypes": ["image"]
    }
  },
  {
    "id": 2,
    "priority": 2,
    "action": {
      "type": "allow"
    },
    "condition": {
      "urlFilter": "||wikipedia.org",
      "resourceTypes": ["image"]
    }
  }
]

（09:49）

キーポイント:

priorityルールを適用する順序を決定し、値が大きいルールを優先します。
action.typeできるblock、allowまたはupgradeScheme
resourceTypes含むmain_frame、script、image、stylesheet待って
domainTypeファーストパーティリクエストとサードパーティリクエストを区別する
延長は必要ありませんwebRequest権限を設定してコンテンツをブロックし、プライバシーを向上させることができます。

新しいタブページをカスタマイズする

拡張機能は Safari の新しいタブページを引き継ぐことができます。

{
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  }
}

（13:34）

newtab.html：

<!DOCTYPE html>
<html>
<head>
    <title>My New Tab</title>
    <meta name="theme-color" content="#ff6b6b">
</head>
<body>
    <h1>Welcome!</h1>
    <p>Fun fact of the day...</p>
</body>
</html>

ユーザーが拡張機能を開くと、Safari は拡張機能が新しいタブページを引き継ぐことを許可するかどうかを尋ねます。この選択は、Safari の設定でいつでも変更できます。

＃＃詳細

非永続的なバックグラウンドページのデバッグ

Safari の [開発] メニューに新しい [Web 拡張機能の背景ページ] オプションがあり、背景ページの読み込みステータスを表示できるようになります。

// 检查后台页面是否已加载
browser.runtime.getBackgroundPage().then(page => {
    if (page) {
        console.log("Background page is active");
    } else {
        console.log("Background page is unloaded");
    }
});

キーポイント:

getBackgroundPage()ページがアンロードされている場合は null を返し、ページは自動的に起動されません。
背景ページを起動するには、メッセージを送信するだけです
[開発] メニューの背景ページをクリックすると、すぐにロードされます。

iOS に関する特別な考慮事項

iOS 拡張機能では、非永続的なバックグラウンドページを使用する必要があります。マニフェストで省略された場合persistentフィールド、デフォルトはtrue、iOS で拡張機能の読み込みに失敗します。

{
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions": ["storage", "declarativeNetRequest"]
}

ルールセットの動的更新

// 启用或禁用特定规则集
browser.declarativeNetRequest.updateEnabledRulesets({
    disableRulesetIds: ['ruleset_1'],
    enableRulesetIds: ['ruleset_2']
});

// 获取当前规则集状态
browser.declarativeNetRequest.getEnabledRulesets().then(ids => {
    console.log("Enabled rulesets:", ids);
});

重要ポイント

1. iOS 用の広告/コンテンツブロック拡張機能を開発

declarativeNetRequest API を使用して軽量のインターセプターを構築すると、ルールファイルをレビューのために App Store に送信せずにリモートで更新できます。入口API:declarativeNetRequest + updateEnabledRulesets()。

2.クロスプラットフォームのパスワードマネージャー拡張機能を作成します

非永続的なバックエンドページとストレージ API を使用してユーザーの認証情報を保存し、コンテンツスクリプトを通じて Web フォームに自動的に入力します。入口API:browser.storage.local + content_scripts。

3.生産性クラスの新しいタブページ拡張機能を開発します

Safari の新しいタブを引き継いで、ToDo、天気、またはその日の言葉を表示します。使用theme-colorメタタグは、タブバーの色を拡張機能のスタイルと統一します。入口API:chrome_url_overrides + newtab。

4.開発者ツール拡張機能の構築

Web ページにコンテンツスクリプトを挿入して、要素のレイアウト情報、カラー値、またはパフォーマンスデータを表示します。使用browser.runtime.sendMessageバックグラウンドページと通信してデータを集約します。入口API:content_scripts + browser.runtime.onMessage。

5. Web ページにダークモードの強制切り替えを実装します

コンテンツスクリプトを使用して Web ページの現在のテーマを検出したり、declarativeNetRequest を通じて CSS ファイルリクエストをインターセプトして変更したり、JavaScript を直接使用して色を反転するスタイルを挿入したりできます。入口API:content_scripts + CSS注射。

Explore Safari Web Extension improvements

ハイライト

主な内容

非永続的な背景ページ

ストレージ API を使用して状態を保存する

declarativeNetRequest コンテンツのインターセプト

新しいタブページをカスタマイズする

非永続的なバックグラウンドページのデバッグ

iOS に関する特別な考慮事項

ルールセットの動的更新

重要ポイント

関連セッション

コメント

ハイライト

主な内容

非永続的な背景ページ

ストレージ API を使用して状態を保存する

declarativeNetRequest コンテンツのインターセプト

新しいタブ ページをカスタマイズする

非永続的なバックグラウンド ページのデバッグ

iOS に関する特別な考慮事項

ルールセットの動的更新

重要ポイント

関連セッション

コメント

新しいタブページをカスタマイズする

非永続的なバックグラウンドページのデバッグ