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

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

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

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

[ちなみに、こちらがそのChrome拡張の記事です](https://qiita.com/doran/items/8c3ca80de3f149dce0e0)

[こちらは別のChrome拡張です。合わせてどうぞ](https://qiita.com/doran/items/6613ea2d92b330bae2c9)
:::

#### 用意するファイル
```
root/
 　├ manifest.json
 　├ option.html
 　└ js/
　　　　　　　　├ option.js
　　　　　　　　├ background.js
 　 　 └ jquery-3.5.1.min.js
```
### option.html
アラートに表示させるメッセージをinput#messageに設定します。
```html
<!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にメッセージを格納します。
```js
$(document).on("click","#button",function(){
  chrome.storage.sync.set({message:$("#message").val()});
});
```
#### background.js
タブがアクティブになったとき、タブが更新された時に
***chrome.scripting.executeScript***を呼び出しています。
　***args：*** functionで実行される関数に引数を渡します。
　***function：*** タブ内で実行する関数を指定します。
　　　　　　ここでは、上記argsの引数を渡してalert()を呼び出しています。
```js
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拡張のアイコンを右クリック　->　メニューの「オプション」をクリック
```json
{
  "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
}
```
#### 実行結果
1.アラートが表示されていない状態で。。。
<img width="240" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/5da315b8-2b14-c2e5-1035-10e13fdd80d7.png">　　<img width="240" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/4c6cd47c-2c1d-28fc-1288-69daa2430cc3.png">
2.メッセージを入力して、設定ボタンを押下。
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/b54c9e57-3b1c-fa34-81a0-d40a9c8486ea.png">
3.先ほどのタブを開いてみると。。。アラートが表示された！
<img width="240" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/eab2e424-4a26-a883-aebb-84bd5b0bd1d4.png">　　<img width="240" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/5d2ca57d-4274-62e3-b2d1-7aa77d2d8b90.png">
おしまい。。

#### その他のChrome拡張の実装方法
以下はこれまでに投稿したChrome拡張の記事です。用途に応じてご覧ください。
[[Chrome拡張]　ツールバーのアイコンをクリックしてHTMLページを表示する方法](https://qiita.com/doran/items/743f687eb413c41432e1)
[[Chrome拡張]　Chrome拡張メニューからページを操作する方法](https://qiita.com/doran/items/9203789b570632e2456e)
[[Chrome拡張]　Webページ(content scripts)からChrome拡張画面へメッセージを送る方法](https://qiita.com/doran/items/faf21f816b168606cfbe)
[[Chrome拡張]　Chrome拡張画面でタイマー(定期実行処理)を使用する方法](https://qiita.com/doran/items/c2c5c225691fd423b2e6)
[[Chrome拡張]　Content Scriptsでタイマー(定期実行処理)を使用する方法](https://qiita.com/doran/items/2620b2c8f2ac2c5548b6)
[[Chrome拡張]　Chrome拡張メニューからWebページを操作する方法](https://qiita.com/doran/items/8045701ba688f50d6295)
[[Chrome拡張]　Chrome拡張メニューからWebページを操作する方法(jQueryを使う)](https://qiita.com/doran/items/817432932bf77c781002)
[[Chrome拡張]　Chrome拡張メニューとWebページでやりとりする方法](https://qiita.com/doran/items/7ccf10bb310ab46478d4)
[[Chrome拡張]　Chrome拡張メニューとWebページでやりとりする方法(Content Scriptsを使う)](https://qiita.com/doran/items/e69ba19cbd2f5049bc97)
[[Chrome拡張]　Chrome拡張メニューから開いていないWebページの情報を取得する方法](https://qiita.com/doran/items/c2d3249c53b97ddeed0d)
[[Chrome拡張]　ポップアップメニューを表示する方法](https://qiita.com/doran/items/6684c939c5dc2b9d091a)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法](https://qiita.com/doran/items/c34be1c03353a02cd04f)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法(jQueryを使う)](https://qiita.com/doran/items/6b7181e369cd1be7dfc4)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法(スタイル変更)](https://qiita.com/doran/items/00ea4f88862031811ed4)
[[Chrome拡張]　ストレージ(chrome.storage.local)を利用する方法](https://qiita.com/doran/items/38a89bcaf4b89c758725)
[[Chrome拡張]　オプションページを表示する方法]()