開発環境
chromeの拡張機能は基本的にhtml,javascriptで書きます。
私はvscodeを使って編集しています。(フォルダ階層がややこしいのでvscodeで編集することをお勧めします)
拡張機能の説明書(マニフェスト)を作成
ルートのフォルダに、「manifest.json」を作成してください。
そして、次のコードをコピーしましょう
manifest.json
{
"name": "サンプル",
"version": "1.0.0",
"manifest_version": 3,
"description": "サンプルの拡張機能です"
}
nameは拡張機能の名前を、descriptionは拡張機能の説明を表しています。
ポップアップ(html)を表示させるパターン
拡張機能でポップアップを表示させたい場合は、新たにhtmlのファイルを作りましょう。
popup.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ポップアップ</title>
<style>
body{
width:500px;
height:300px;
}
</style>
</head>
<body>
ポップアップのhtmlです
</body>
</html>
この場合は、manifest.jsonに新たに次のように更新しましょう
manifest.json
{
"name": "サンプル",
"version": "1.0.0",
"manifest_version": 3,
"description": "サンプルの拡張機能です",
"action": {
"default_popup": "popup.html"
}
}
これでポップアップを表示させることをできます
Javascriptを実行させるパターン
chromeの拡張機能では、Javascriptを実行させることができます。(何らかのページが開かれたときに実行されます)
script.js
console.log("実行されたよ!")
この場合は、manifest.jsonに新たに次のように更新しましょう
manifest.json
{
"name": "サンプル",
"version": "1.0.0",
"manifest_version": 3,
"description": "サンプルの拡張機能です",
"content_scripts": [
{
"matches": [
"https://*/"
],
"js": [
"script.js"
]
}
]
}