前回からのつづき

前回から引き続き、 manifest.json の項目の説明を行います。

permissions とは？

拡張機能で利用したい、 Chrome API権限 を定義します。

"permissions": [
  "storage",
  "tabs",
  "activeTab"
]

ブラウザ拡張は強力です。

例えば：

  • タブ監視
  • ダウンロード
  • 通知
  • ページ操作

などができます。

👉 そのため ブラウザは、 ここで許可されたAPIのみ使用可能 という設計になっています。

permissions で、「この機能を使います」という事前申告を行います。

👉 不要な権限については、下記の理由から定義しないことが望ましいです。

  • セキュリティ警戒
  • Chrome審査不利
  • ユーザー不信

尚、permissions には多くの種類があります。以降ではよく利用されるものを紹介します。

① storage

拡張機能専用の保存領域である chrome.storage を使用するための権限です。

"permissions": [
  "storage"
]

例えば、

  • ユーザー設定保存
  • テーマ保存
  • APIキー保存
  • お気に入り保存
  • キャッシュ保存

などに利用できます。

サンプル

await chrome.storage.local.set({
  theme: "dark"
});

const result = await chrome.storage.local.get("theme");

console.log(result.theme);

定義しないと chrome.storage.local 利用時にエラーになります。

IndexedDBとの違い

よく混同されます。

項目 storage IndexedDB
保存量 小～中 大
構造 Key-Value DB
用途 設定保存 アプリデータ

② activeTab

ユーザーが拡張アイコンをクリックするなど、拡張機能を明示的に操作したタイミングで、現在表示中のタブへ一時的にアクセスする権限です。

"permissions": [
  "activeTab"
]

例えば：

  • 現在ページのURL取得
  • 現在ページへスクリプト注入
  • 現在ページのDOM取得

などに利用できます。

サンプル

chrome.action.onClicked.addListener(async (tab) => {
  console.log(tab.url);
});

host_permissionsとの違い

  • activeTab → 現在のタブだけ一時許可
  • host_permissions → 指定サイト全体継続許可

③ tabs

タブ管理APIを使用するための権限です。

"permissions": [
  "tabs"
]

例えば：

  • タブ一覧取得
  • URL取得
  • タブ作成
  • タブ移動
  • タブ削除

などに利用できます。

サンプル

const tabs = await chrome.tabs.query({});

console.log(tabs);

定義しないと chrome.tabs の一部機能が利用できません。

例えば、開いている全タブを検索するような拡張を作成する際に使えます。

④ scripting

JavaScript や CSS を後からページへ注入するための権限です。

"permissions": [
  "scripting"
]

通常の content_scripts は、manifest.json に固定定義します。

"content_scripts": [...]

しかし、今表示中ページだけに実行したい場合があります。

そのような場合に使用します。

サンプル

await chrome.scripting.executeScript({
  target: {
    tabId: tab.id
  },
  files: ["inject.js"]
});

例えば：

  • 選択ページのみ実行
  • ボタンクリック時のみ実行
  • 条件による動的注入

などに利用できます。

👉 多くの場合、host_permissions に下記の定義も必要になります。

"host_permissions": [
  "<all_urls>"
]

⑤ contextMenus

右クリックメニューを追加する権限です。

"permissions": [
  "contextMenus"
]

例えば：

  • 選択テキストを翻訳
  • 画像URLをコピー
  • ページを保存

などに利用できます。

サンプル

chrome.contextMenus.create({
  id: "save",
  title: "保存する",
  contexts: ["page"]
});

例えば

  • 翻訳ツール
  • スクリーンショット
  • Webクリッパー

などに利用できます。

⑥ notifications

デスクトップ通知を表示する権限です。バックグラウンド処理の結果をユーザーへ知らせたい時に、使います。

"permissions": [
  "notifications"
]

サンプル

chrome.notifications.create({
  type: "basic",
  iconUrl: "icon.png",
  title: "完了",
  message: "保存しました"
});

例えば：

  • ダウンロード完了
  • バックアップ完了
  • タスク通知

などに利用できます。

⑦ downloads

ブラウザのダウンロード機能を制御する権限です。

"permissions": [
  "downloads"
]

サンプル

chrome.downloads.download({
  url: "https://example.com/file.zip"
});

例えば：

  • ファイルダウンロード
  • ダウンロード状況監視
  • ダウンロードキャンセル
  • 画像保存
  • PDF保存
  • バックアップ出力

などに利用できます。

（つづく）