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

はじめに

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

想定読者

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

前提知識

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

manifest.json
service_worker
content_script
等

実装方法

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

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

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

text

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

text

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を保存できます。これらは拡張機能の各ページで共通に参照できるので、インストールした後のチュートリアルをどこまでみたか、といったデータを記録させ、拡張機能のチュートリアルの案内に活用する、といったことができます。

この記事を書いた人

Webプランナー、開発会社の創業メンバーを経て、Fintech・DX・Web3の企画・開発に従事。2021年に独立し、2023年に株式会社hanzochangを設立。現在はAIを活用した業務改善と、自社サービス「指定管理者制度AI」の開発・運用に取り組んでいます。

業務改善・AI活用支援

転記・集計・資料作成にかかる時間を減らしませんか？

現在の業務と使っているシステムを整理し、AIが役立つ作業から改善します。試作で効果を確かめ、現場で使うアプリの開発・運用まで支援します。

サービスの詳細を見る