fixed
ogp.png

Chrome Extension(拡張機能)インストール直後ページの実装方法

この記事ではChrome Extension(拡張機能)のManifest v3のインストールページ(ウェルカムページ)の作成方法がわかります。
公開日2022.05.16
更新日2022.05.16
目次

はじめに

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を保存できます。これらは拡張機能の各ページで共通に参照できるので、インストールした後のチュートリアルをどこまでみたか、といったデータを記録させ、拡張機能のチュートリアルの案内に活用する、といったことができます。
picture
hanzochang
代表取締役 半澤勇大
慶應義塾大学卒業後、AOI Pro.にてWebプランナーとして勤務。ナショナルクライアントのキャンペーンサイトの企画・演出を担当。その後開発会社に創業メンバーとして参加。Fintech案件や大手企業のDXプロジェクトに関わり、その後個人事業主として独立。2023年にWeb3に特化した開発会社として法人化。

2017年ごろより匿名アカウントでCryptoの調査等を行い、ブロックチェーンメディアやSNSでビットコイン論文等の図解等を発信。
hanzochangはフリーランスのエンジニアです
スキルセットや特徴は下記よりご確認いただけます
fixed
© 2023 hanzochang