【第一歩】Chrome Extensionを触ってみた

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だそうですからだいぶ昔ですね。

各項目の説明は、上記公式サイトが丁寧ですので割愛します。英語ですが頑張りましょう。

manifest.json

{
  "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かな？)なので想像していたよりかなり簡単ですね。