MENU
  • ブログBlog
  • プロフィールProfile
  • ポートフォリオPortfolio
  • お問い合わせContact
  • お絵描き道場drawing dojo
「社会不適合者の生き方」
くじらいどブログ
  • ブログBlog
  • プロフィールProfile
  • ポートフォリオPortfolio
  • お問い合わせContact
  • お絵描き道場drawing dojo
くじらいどブログ
  • ブログBlog
  • プロフィールProfile
  • ポートフォリオPortfolio
  • お問い合わせContact
  • お絵描き道場drawing dojo
  1. ホーム
  2. PC
  3. chrome拡張機能をV2からV3に移行しよう

chrome拡張機能をV2からV3に移行しよう

2024 11/07
PC プログラミング
2023年6月12日2024年11月7日

どうも、くじらいどです。

今回は、Chrome拡張機能のV2からV3への移行についてお話ししたいと思います。

2023/06/12現在は、V2が使用可能ですが、Chrome拡張機能のV2が近いうちに使えなくなると思いますので、これからchrome拡張機能を作成しようとしている方は、V3(バージョン3)での開発をおすすめ致します。

また、ChatGPTでchrome拡張機能を作成してもらう場合は、V2で作成される可能性がありますので、V3で作成してくださいと追記しておきましょう。

V2からV3への変更点

  • バックグラウンド処理:
    • V2: バックグラウンドスクリプトやイベントページを使用。
    • V3: サービスワーカーが導入され、バックグラウンドタスクを実行。
  • manifest.jsonの変更:
    • V2: "background"キーでバックグラウンドスクリプトやイベントページを指定。
    • V3: "background"キーでサービスワーカーファイルを指定。
  • イベントハンドリング:
    • V2: バックグラウンドスクリプトやイベントページ内でイベントをハンドリング。
    • V3: サービスワーカー内でイベントをハンドリング。
  • パフォーマンスとオフライン動作:
    • V2: バックグラウンド処理が制限され、パフォーマンスやオフライン動作に制約がある。
    • V3: サービスワーカーにより、パフォーマンスの向上とオフラインでの動作が可能になる。
  • 追加機能の利用:
    • V2: プッシュ通知やバックグラウンド同期など、一部の高度な機能が制限されることがある。
    • V3: サービスワーカーを使用することで、より高度な機能を実現できる。
  • コードの変更:
    • V2のバックグラウンドスクリプトやイベントページ内で行っていた処理を、サービスワーカー内に移行する必要がある。
    • イベントハンドリングやバックグラウンドタスクの実装方法が変わる。
Chrome for Developers
Chrome Extensions  |  Chrome for Developers Learn how to develop Chrome extensions.
目次

manifest.jsonファイルの変更点

それでは、まずmanifest.jsonファイルの変更点をコードも交えて見ていきましょう。

V2のmanifest.json

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my extension.",
  "permissions": [
    "tabs",
    "http://*/*"
  ],
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content.js"
      ],
      "run_at": "document_idle"
    }
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "manifest_key": "value"
}

V3のmanifest.json

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "2.0",
  "description": "This is my extension.",
  "host_permissions": [
    "tabs",
    "http://*/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "scripting"
  ],
  "manifest_key": "value"
}

変更点は、いくつかあります。

V3では、manifest_versionの値は3に設定されます。


V3では、バックグラウンドスクリプトはbackgroundフィールドのservice_workerフィールドにファイル名を指定します。


V3では、ブラウザアクションはactionフィールドで定義されます。

ちなみにV2では、browser_actionでした。短くなっていますね。


  • V2では、必要なパーミッションはpermissionsフィールドに配列として指定します。
  • V3では、必要なパーミッションはhost_permissionsフィールドに配列として指定します。また、APIの特定の機能に対しては、permissionsフィールドを使用して許可をリクエストする必要があります。

上記のように、V3のmanifest.jsonに移行するには、いくつかの変更をする必要があります。

下記に公式のmanifest.jsonの移行に関するドキュメントのリンクを貼っておりますのでご確認ください。

Chrome for Developers
Update the manifest  |  Chrome Extensions  |  Chrome for Developers The manifest.json file requires a slightly different format for Manifest V3 than for Manifest V2.

メソッドの変更点

廃止されたメソッド(一部の例)

  • chrome.extension.onRequest – 代わりにchrome.runtime.onMessageを使用してください。
  • chrome.extension.getBackgroundPage – 代わりにバックグラウンドスクリプト内の関数やイベントハンドラを直接呼び出してください。
  • chrome.extension.getURL – 代わりにchrome.runtime.getURLを使用してください。

新しく導入されたメソッド(一部の例)

  • chrome.scripting.executeScript – Content Scriptを実行するための新しいメソッドです。
  • chrome.scripting.insertCSS – CSSを注入するための新しいメソッドです。
  • chrome.tabs.query – タブをクエリ(検索)するための新しいメソッドです。

今後、廃止されるメソッドが追加になったり、新しいメソッドが追加されたりするばあいがありますので詳しくは、公式ドキュメントをご覧ください。

Chrome for Developers
Update your code  |  Chrome Extensions  |  Chrome for Developers The first of three sections describing changes needed for code that is not part of the extension service worker.

まとめ

いかがでしたでしょうか。V3になって間もない事もあり、まだV4が誕生するのが結構先かと思いますので、この際にchrome拡張機能開発に入門してみるのも良い機会かなと思います。

普段、私たちがよく使うchromeブラウザで動作するので、結構役に立つchrome拡張機能も作れるかと思います。

もっとchrome拡張機能の中身について知りたい方は以下の記事ご覧いただければ幸いです。

あわせて読みたい
手軽に始めるchrome拡張機能開発 V3対応 chrome拡張機能は、chromeウェブストアでダウンロードできますが、自分で拡張機能を作成してローカルで使用したり、chromeウェブストアに公開して一般のユーザーに使っ…
あわせて読みたい
手軽に始めるchrome拡張機能開発V3 メッセージパッシング 今回は、chrome拡張機能のバックグラウンドやアクション、コンテンツスクリプトを連携(値を送ったり、受け取ったり)するのに必要なメッセージパッシングについて解説…
PC プログラミング
Chrome拡張機能 JavaScript プログラミング
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • PythonのTkinterのpady・padxで上下左右で異なる余白量を設定する
  • ChatGptで作る最速chrome拡張機能開発

この記事を書いた人

くじらいどのアバター くじらいど

アラサー社会不適合者のくじらいどです。

普段は、youtubeで動画投稿やこのサイトでブログ投稿をしています。

喘息、アトピー、鼻炎持ち
教育失敗の世間知らず

自分にできることをやるだけ

関連記事

  • Google Chrome 最新バージョンに更新する方法
    2024年11月17日
  • Google Chromeで動作が遅くなる原因と対処法
    2024年10月18日
  • Googleドライブの容量を節約する方法とは?
    2024年10月16日
  • 無料で便利!定番オンラインバックアップサービス5選
    2024年10月16日
  • Windows 10 隠しファイルを表示する簡単な方法
    2024年10月15日
  • Microsoft Edgeのフィードを非表示にする方法、背景画像の変更方法、テーマ設定方法
    2024年10月11日
  • Windows10 で既定のアプリを変更する方法
    2024年10月11日
  • Windows 10 ファイルの拡張子を表示させる方法
    2024年10月9日

コメント

コメントする コメントをキャンセル

CAPTCHA

最近の投稿

  • くじランドに遊びに来てね!【くじランド】
  • ぬらりひょんとは? わしが解説する【くじランド】
  • チャンネル登録者数10人を達成しました!
  • チャンネル登録者数1人を達成しました!
  • Youtube投稿始めました!

最近のコメント

  1. 深夜セルフガソリンスタンド監視アルバイトの当たり現場と外れ現場 に Chet Garfinkel より
  2. Google Apps Script (GAS) 初回実行時のアクセス権限の承認方法 に くじらいど より
  3. Google Apps Script (GAS) 初回実行時のアクセス権限の承認方法 に tlover tonet より
  4. Google Chromeのホーム画面の背景を変更する方法(好きな画像に変更) に くじらいど より
  5. Google Apps Script (GAS) シートの値を削除する方法 に くじらいど より

アーカイブ

  • 2025年3月
  • 2025年1月
  • 2024年12月
  • 2024年11月
  • 2024年10月
  • 2024年6月
  • 2024年5月
  • 2024年4月
  • 2024年3月
  • 2024年2月
  • 2023年7月
  • 2023年6月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月

カテゴリー

  • PC
  • お知らせ
  • デザイン
  • プログラミング
  • 体験談
  • 日常
くじらいど
社会不適合者 / 趣味クリエイター
アラサー社会不適合者のくじらいどです。

普段は、youtubeで動画投稿やこのサイトでブログ投稿をしています。

喘息、アトピー、鼻炎持ち
教育失敗の世間知らず

自分にできることをやるだけ

プロフィール
目次
  • X
  • YouTube
  • Mail
  • 運営者情報
  • プライバシーポリシー
  • お問い合わせ

© くじらいどブログ.

  • メニュー
  • 検索
  • 目次
  • トップへ
目次