chrome拡張機能の開発を始めてみる

投稿日 | In

約一ヶ月半ぶりのブログ更新になる。
この一ヶ月半は、ポスター論文を2本投稿 -> 2本採用:smile:　->　査読対応&掲載用原稿準備を行っていた。
そのため、大きく空いてしまった、学会発表まで一ヶ月あるためしばらくは多めに更新していきたい。

さて、とあるchrome拡張機能を作りたくなったため、どのように開発すればよいのかを調べた。

調べると、開発に必要なフレームワーク等はなく、シンプルなものであれば簡単に作れるということがわかってきた。
まず、必ず必要なものがmanifest.json これは、拡張機能の名前や説明にとどまらず、chromeに許可してもらうAPI機能の定義やファイルの定義等に用いる。

chrome拡張機能の公式ドキュメントは Chrome Developers にあるが、英語なのでとりあえず入門系のサイトで簡単な拡張機能を作ってみた。

作成したファイルはmanifest.jsonとcontent.jsである。

manifest.json

1
2
3
4
5
6
7
8
9
10
11
 
{
    "name": "Sample",
    "version": "1.0.0",
    "manifest_version": 3,
    "permissions": ["activeTab","scripting"],
    "description": "Sample Chrome Extension",
    "background": {
        "service_worker": "src/content.js"
    },
    "action": {}
  }

content.js

1
2
3
4
5
6
7
8
9
10
 
function showAlert(){
    alert("こんにちは！！！！！！！！");
}

chrome.action.onClicked.addListener((tab) => {
	chrome.scripting.executeScript({
		target: { tabId: tab.id },
		function: showAlert
	});
});

chrome右上から拡張機能のボタンを押すとアラートが出現するだけのプログラムである。 サイトは次の2つを参考にした。

つぎはポップアップでなにかウィンドウを表示させたい。