More than 1 year has passed since last update.

[Chrome拡張]　ページにアラートを表示する方法

Posted at 2023-07-06

background処理等で監視した結果をユーザーに気づいてもらいやすくするために
作業中のタブにアラートを表示する方法をご紹介します。

content scriptsにメッセージを送ってアラートを表示させる方法もありますが、
この方法だとChrome拡張インストール後にタブ更新を行わなくても利用できます。

新しく作成したchrome拡張を公開しました。
そこで使用した技術を備忘録として残し共有できればと思い、記事を書いています。
この記事ではアラートを表示させていますが、Chrome拡張ではオリジナルのダイアログを表示させています。

ちなみに、こちらがそのChrome拡張の記事です

こちらは別のChrome拡張です。合わせてどうぞ

用意するファイル

root/
 　├ manifest.json
 　├ option.html
 　└ js/
　　　　　　　　├ option.js
　　　　　　　　├ background.js
 　 　 └ jquery-3.5.1.min.js

option.html

アラートに表示させるメッセージをinput#messageに設定します。

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>アラートテスト</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/option.js"></script>
  </head>
  <body>
    <input id="message"></div>
    <button id="button">設定</button>
  </body>
</html>

option.js

ボタンが押されたらstorageにメッセージを格納します。

$(document).on("click","#button",function(){
  chrome.storage.sync.set({message:$("#message").val()});
});

background.js

タブがアクティブになったとき、タブが更新された時に
chrome.scripting.executeScriptを呼び出しています。
　args： functionで実行される関数に引数を渡します。
　function： タブ内で実行する関数を指定します。
　　　　　　ここでは、上記argsの引数を渡してalert()を呼び出しています。

function alert_test(tabId){
  chrome.storage.sync.get(null, function(value) {
  	if(!value.message)	return;

  	chrome.scripting.executeScript({
  		target: {tabId: tabId},
  		args: [value.message],
  		function: function(args){
  			alert(args);
  		}
  	});
  });
};
//タブがアクティブになった時
chrome.tabs.onActivated.addListener(function(info){
  alert_test(info.tabId);
});
//タブが読み込まれた時
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
  if (changeInfo.status==="complete") { //タブの読み込み完了
    alert_test(tabId);
  }
});

manifest.json

permissionsには、storageとscriptingを指定します。
host_permissionsには、全てのタブにアラートを表示させたいのでこう指定しています。
opitons_pageには、オプションを押された時に表示するHTMLページを指定します。
　※オプションの開き方(一例)：
　　　Chrome拡張のアイコンを右クリック　->　メニューの「オプション」をクリック

{
  "name": "アラートテスト",
  "version": "1.00",
  "description": "アラートテスト",
  "permissions": ["storage","scripting"],
  "host_permissions": ["https://*/*"],
  "options_page": "option.html",
  "background": {
    "service_worker": "js/background.js"
  },
  "action": {
    "default_icon": {
      "16": "images/icon.png"
    }
  },
  "icons": {
    "48": "images/icon.png"
  },
  "manifest_version": 3
}