Google Chrome の拡張機能を作ってみる

備忘録なんで、ディレクトリは全部直下にいれちゃえ！
まずはmanifest.jsonから書いてこうかね

manifest.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "テスト拡張機能",
  "version": "1",
  "manifest_version": 2,
  "description": "テストの拡張機能だよ！",
  "permissions": [
      "tabs",
      "http://*/*",
      "https://*/*"
    ],
  "icons": {
    "16" : "sample_16.png",
    "48" : "sample_48.png",
    "128" : "sample_128.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Test extension",
    "default_popup": "popup.html"
  }
}

タブの情報を取得したいのでpermissionsに”tabs”を入れる！
次はポップアップするhtml
スタイルシートはリンクにしてもいいし、少なければheadにいれちゃえ～

popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ポップアップ</title>
<script type="text/javascript" src="popup.js"></script>
<style>
div {width:300px;padding:20px;}
</style>
</head>
<body>
<div>
テストポップアップ！<br>
<span id="popupBox"></span>
</div>
</body>
</html>

最後にポップアップ時に動くjs

popup.js
1
2
3
4
5
6
7
window.onload = function(){
chrome.tabs.getSelected(null, function(tab) {
var viewtab = tab.url;
var target = document.getElementById("popupBox");
target.innerHTML = viewtab;
});
}

このファイルが入ってるフォルダを拡張機能の「パッケージ化されていない拡張機能を読み込む」で指定して読込ませるだけ！
拡張機能のko-omアイコンをクリックすると現在セレクトされているタブのURLを表示します。

と、まぁこんな感じで作っていくらしい～
jsもextensionも素人だから、見よう見まねで作ってるけどいがいと動くよ！
次回はbackgroundで動作させるやつを備忘録しよう・・

コメントを残す