Chrome Extensionを作りたい
ちょっとした思いつきでAPIを送るChrome Extension(Chrome拡張)を作りたくなったので少し調べてみたことをまとめます。
作ったファイル
- JavaScript
- JSON
- (将来的に)HTML
書いて今気づいたんですがintelliJじゃなくてもVS Codeとかでも書けそうですね。
src/images/icon.png
src/bg.js
src/jquery-3.4.1.min.js
src/manifest.json
それぞれのファイルについて順にご紹介です。
manifest.json
以下の公式サイトが一番分かり易かったです。
Manifest File Format: https://developer.chrome.com/extensions/manifest
もしGoogle先生で調べる場合は、調べたそのサイトがいつ書かれたものか、具体的には manifest_version が1か2か、自分が作りたいバージョンかどうか必ず確認してください。コピペしてきても全然動きません。
なお、 manifest_version: 1 はChrome 18からは deprecated(非推奨) となっています。今、私のChromeは76だそうですからだいぶ昔ですね。
各項目の説明は、上記公式サイトが丁寧ですので割愛します。英語ですが頑張りましょう。
{
"name": "xt",
"version": "0.1.0",
"manifest_version": 2,
"description": "chrome extension",
"permissions": ["tabs"],
"background": {
"scripts": [
"jquery-3.4.1.min.js",
"bg.js"
]
},
// "content_scripts": [{
// "matches": ["*://*/*"],
// "js": [
// "content.js"
// ]
// }],
"browser_action": {
"default_icon": "images/icon.png",
"default_title": "xt"
}
}
content_scripts はコメントアウトしてますが、"全てのWebページ"で適用させるための正規表現が微妙にムズかったので記載しています。
Match Patterns: https://developer.chrome.com/extensions/match_patterns
コメントアウトできる
そう、コメントアウトできるんです。
本来のjson形式にはコメントアウトはありません。
intelliJにもVS CodeにもQiitaにもおこられてますが、Chrome Extensionは優秀なようでコメントアウトできます。やってみるもんですね。
ちなみに、 content_scripts はコメントアウトしてなくても特に問題ありません。その場合はcontent.jsは空ファイルでよいので置いといてください。
bg.js
拡張機能のアイコンをクリックすると、現在のタブのURLを送信します。
普通のJavaScriptなのでこちらも特に説明はありません。
var script = function(){
chrome.tabs.getSelected(window.id, function (tab) {
console.log(tab.url)
alert(tab.url);
var url = "http://abcd.efgh/";
var JSONdata = { url: tab.url };
$.ajax({
type : 'post',
url : url,
data : JSON.stringify(JSONdata),
contentType: 'application/JSON',
dataType : 'JSON',
scriptCharset: 'utf-8',
success : function(data) {
// Success
alert("success");
alert(JSON.stringify(data));
$("#response").html(JSON.stringify(data));
},
error : function(data) {
// Error
alert("error");
alert(JSON.stringify(data));
$("#response").html(JSON.stringify(data));
}
});
});
};
(function(){
chrome.browserAction.onClicked.addListener(script);
})();
console.logの出力はどこで確認できるかというと、
拡張機能を管理 からそのChrome Extensionの ビューを検証 バックグラウンド ページ のリンクを押すと出てくる開発者ツールで確認できます。
その他のファイル
- src/images/icon.png
このChrome Extensionのアイコンです。四角です。
- src/jquery-3.4.1.min.js
Ajaxを使用しているので読み込んでます。 background.scripts 内の読み込み順は注意してください。先にjQueryを読み込む必要があります。
触ってみた、なのでここまでです。manifest.jsonも簡単だし、あとはJavaScript(とHTMLかな？)なので想像していたよりかなり簡単ですね。