ファイル構成

2つのファイルで構成できます。

manifest.json : 拡張機能についての定義ファイル
やりたいことのプログラムファイル : jsやhtml etc...

API

上から、APIを確認できます。
MV2(Manifest V2)のものもあったりして、利用できないものもあるので注意が必要です。

試してみた

コード

manifest.json

{
	"name": "apa",
	"manifest_version": 3,
	"version": "1.0",
	"permissions": ["activeTab","scripting","tabs"],
	"background": {
		"service_worker": "apa.js"
	},
	"action": {
        "default_title": "apa"
    }
}

manifest_versionは、最新の３を記述。ここで、MV2(Manifest V2)を使用するのであれば、別を記述すれば良いはず（3で良い）。
permissionsは、APIを使う際に必要なものを記述します。

apa.js

var apa = (function(){
	alert("count up apa~");
});

var cnt = 0;

chrome.action.onClicked.addListener((tab) => {
    console.info(tab);
	chrome.scripting.executeScript({
		target: { tabId: tab.id },
		function: apa
	},
    ()=>{
        console.info("conosole print apa~");
    });

    cnt++;
    chrome.action.setBadgeText({ text: String(cnt) });
    chrome.action.setBadgeBackgroundColor({
        color: '#FFC0CB'
    });
});

内容は、検索バー横の拡張機能アイコンをクリックすると、アイコンのバッチがカウントアップしていくものです。

拡張機能登録

Chrome設定 > 拡張機能 > ディベロッパーモードオン > パッケージ化されていない拡張機能を読み込む
から、準備したディレクトリをアップする。

動作

クリック前

クリック後

つまずいたこと

`Unchecked runtime.lastError: Cannot access a chrome:// URL`

拡張機能の一覧ページchrome://extensionsで、実行するとエラーが出るようです。
コードに不備があるかと思ってしまいましたが、↑以外のページであれば問題ないです。

console.logが出ない

Chromeの検証ツールで、ログが出るかと思っていたが、拡張機能のログはそこには出ないです。
登録した拡張機能の詳細 > ビューを検証 > Service Worker で起動する検証ツールでログが確認できます。

感想

コード修正後に更新するだけで動作確認できるので、ローカルでも開発速度が落ちなくてスゴいと感じました。
触ってみた程度でしたが想像以上に手軽に開発できたので、何か作りたいものが見つかれば公開までのレベルで開発してみたいです。

Chrome拡張機能さわってみた