HTML、CSS、Javascript で作成されている
最低レベル（機能なし）
- Chromeに拡張機能のボタンを表示
- マウスオーバーで、拡張機能名を表示
- インストール済み拡張機能の一覧に表示
必要なもの
- manifest.json ファイル
- アイコンファイル
ディレクトリを作成してそこにファイルを作成
manifestファイル
- json形式で記述
- 拡張機能に関する情報を記述
- 拡張機能のルートフォルダに配置、ファイル名は manifest.json、文字コードはUTF-8
- ◆UTF-8 以外は日本語が文字化けします
manifest.json
{
"manifest_version": 2,
"name": "で拡張１",
"description": "何もしない拡張",
"version": "0.1",
"browser_action": {
"default_title": "初めて拡張１"
}
}
Chromeへの拡張機能追加
- Chrome 設定 >> その他のツール >> 拡張機能
- 右上のデベロッパーモードをオン
- パッケージ化されていない拡張機能を読み込む 押下
- 作成した拡張機能ディレクトリを選択
確認
拡張機能のページに追加される
- manifest.json の name、version、description、
拡張機能アイコン表示
アイコンを指定しなかったので、manifest.json の name の１文字目「で」のアイコンが作成される
マウスオーバーで、manifest.json の default_title 表示
- default_title がない場合、name 表示
popup、アイコン 追加
追加するもの
- アイコンファイル
- popup.html
manifest 追加
manifest.json
{
"manifest_version": 2,
"name": "で拡張１",
"description": "何もしない拡張",
"version": "0.1",
"browser_action": {
"default_title": "初めて拡張１", // , が必要、追加
"default_popup": "popup.html", // 追加
"default_icon": "icons/FontAwesome_f005(0)_48.png" // 追加
}
}
アイコンファイル
ツール等でアイコンファイルを作成
- ◆アイコンファイルが存在しないと、拡張機能の読込エラー
ポップアップ
popup.html
<!doctype html>
<html>
<head>
</head>
<body>
<h2>拡張機能popup</h2>
</body>
</html>
機能更新
拡張機能ページで、更新マークを押下
または 拡張機能の読込を再度行う
確認
アイコン表示
ポップアップ
- 拡張機能アイコンをクリック
Browser Action と Page Acion
BrowserAction — 全てのページで拡張機能アイコンを表示
PageAction — 特定のページで拡張機能アイコンを表示（表示制御が必要）
manifest.json でどちらか一方のみを指定可能
ポップアップでjavascriptを実行するには、
ポップアップ内に、直接javascriptを記述できないので、外部ファイルとしてスクリプトを読み込む
追加/変更
- manifest ファイル
- popup2.html を新たに追加
- popup2 で読み込む popup2.js を追加、js/ に配置
cssにbulmaを使っているので、css/ に配置
manifestファイル
popup2.html に変更
{
"manifest_version": 2,
"name": "で拡張１",
"description": "何もしない拡張",
"version": "0.1",
"browser_action": {
"default_title": "初めて拡張１",
// "default_popup": "popup.html",
"default_popup": "popup2.html", // こちらに修正
"default_icon": "icons/FontAwesome_f005(0)_48.png"
}
}
popupファイル
bulma、js の外部ファイル読込、拡張機能の作成ディレクトリ配下にcss/ js/ を作成して配置
- ◆javascriptは、scriptタグで直接記述するとエラーになる
popup2.html
<!doctype html>
<html lang="ja">
<head>
<link rel="stylesheet" href="css/bulmaswatch_flatly.min.css" />
<script src="js/my_com.js"></script>
</head>
<body>
<div id="pup2">
<p class="title">拡張２</p>
<div class="field is-grouped">
<div class="control">
<input class="button is-info" type="button" value="AAA" id="b_aaa" />
</div>
<div class="control">
<input class="button is-primary" type="button" value="BBB" id="b_bbb" />
</div>
<div class="control">
<input class="button is-success" type="button" value="Clear" id="b_clear" />
</div>
</div>
<div class="field">
<div class="control">
<textarea id="tarea" class="textarea is-primary" rows="7"></textarea>
</div>
</div>
</div>
</body>
</html>
popupのjavascript
ポップアップロード時の処理を記述
ボタンにイベント時処理を追加
popup2.js
window.onload=init;
function init(){
let aa = document.getElementById('b_aaa');
aa.addEventListener('click', aaa);
let bb = document.getElementById('b_bbb');
bb.addEventListener('click', bbb);
let clr = document.getElementById('b_clear');
clr.addEventListener('click', ta_clear);
let op = document.querySelector('#tarea');
op.addEventListener('copy',
function(){
alert('copy');
}
);
}
function aaa(){
let op = document.getElementById('tarea');
op.value += 'aaa';
}
function bbb(){
let op = document.getElementById('tarea');
op.value += 'bbb';
}
function ta_clear(){
let op = document.getElementById('tarea');
op.value = '';
}
再読み込みして確認
こんな感じです
しかし、popup2.jsは、popup上しか操作できない
開いたURLページの操作は、Content Script からでないと操作不可
後ほど
参考
https://risaiku.net/archives/1653/
https://qiita.com/k7a/items/26d7a22233ecdf48fed8
環境
- Windows7 Professional 64bit
- Chrome バージョン: 79.0.3945.130（Official Build） （64 ビット）
- アイコン作成、iconion、http://iconion.com/