Chrome Extension(拡張機能)をInstallした直後のウェルカムページを実装する

はじめに

Chrome Extension(拡張機能)をInstallした直後のウェルカムページの実装方法を説明します。

想定読者

• Chrome Extensionでアプリを開発している人
• Manifest v3で実装中

前提知識

Chrome Extensionの開発の基本構造を理解している。

• manifest.json
• service_worker
• content_script
• 等

実装方法

インストールページの設置

パッケージ内部の任意の場所にhtmlを設置します。 この記事では、pages/installed.htmlに設置した前提とします。

ServiceWorker内部に下記記述します。

chrome.runtime.onInstalled.addListener(() => {
  chrome.tabs.create({
    url: "chrome-extension://" + chrome.runtime.id + "/pages/installed.html"
  });
});

chrome.runtime.onInstalledがインストール時にのみに発火するイベントです。インストール時に新しいタブが立ち上がり、pages/installed.htmlが立ち上がります。

以上です。

余談

上記のインストールページでなにかアクションをさせ、その状態を保持したい場合は、chrome.storage.localやchrome.storage.syncを活用すると良いです。文字列や配列、JSONを保存できます。これらは拡張機能の各ページで共通に参照できるので、インストールした後のチュートリアルをどこまでみたか、といったデータを記録させ、拡張機能のチュートリアルの案内に活用する、といったことができます。