ChromeExtensionの作り方

chrome extension の作り方って調べたら死ぬほど出てくるけど、ちょうど周りに作ってる人がちらほらいたので自分でも書いてみるかーという気分になったので書いていく.


今回は takeokunn/test_chrome_extension を使って説明する.

このレポジトリは以前友人に作り方を教えた時に作成したものだ.

1. cloneする
2. `chrome://extensions/` を開く
3. `パッケージ化されていない拡張機能を読み込む` で追加
4. amazonの適当な商品ページを開く
5. titleの部分にアイコンが表示されるのでクリック
  1. manifest.json を作成

重要なのは content_scripts 以下.

どのURLの時にどのjsを動かすのかを記述することができる. 以下の例はどのドメインでも実行するような例だ.

{
    "name": "take test",
    "version": "0.0.1",
    "manifest_version": 2,
    "description": "",
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["script.js"]
    }],
    "web_accessible_resources": ["img/logo.jpg"]
}
  1. script.js を作成

1で指定したurlで実行するスクリプトを書く.

const main = () => alert("hogehoge");
main();

余談だが、extension内の img/logo.jpg 画像を取得するには以下のようにすれば良いみたいだ.

const extension_id = chrome.i18n.getMessage('@@extension_id');
const img_src = `chrome-extension://${extension_id}/img/logo.jpg`;
  1. chrome://extensions にアップロード

最後に パッケージ化されていない拡張機能を読み込む に追加をする.これで動く.


会社ではカオナビという人事評価システムを使っていて、「自分の顔を橋本環奈にすれば評価上がるのでは...?」という 天才的発想 アホなこと思いついて30秒くらいで作ったのでもう少し作り込みたい.