Build Typescript into Chrome extension and Userscript
MIT License
TypescriptからChrome拡張とUserscriptへ簡単にビルド
create-crx-monkey
を使って簡単に設定できます。
npm create crx-monkey
プロンプトに従ってセットアップしてください。
Project name? any projectname...
Select a Language? Typescript / Javascript
npx crx-monkey dev
開発スクリプトが自動的にリロードされるようになります。
npx crx-monkey build
バンドルされているスクリプトと拡張機能がビルドされる。
設定ファイル crx-monkey.config.js
をプロジェクトに作成してください。
設定ファイルではデフォルトでオブジェクトをエクスポートします。 (全ての項目が必須というわけではないので、undefinedでも大丈夫です)。
[!Note] create-crx-monkeyを使用した場合、自動的に生成されます。
// @ts-check
/** @type {import('crx-monkey').NonLoadedCrxMonkeyConfig} */
const config = {
manifestJsonPath: './manifest.json',
chromeOutputDir: './dist/chrome',
userscriptOutput: './dist/userscript.user.js',
importIconToUserscript: true,
esBuildOptions: {
// ESbuild options
minify: true,
},
devServer: {
port: 3000,
host: 'localhost',
websocket: 3001,
},
publicDir: './public',
userScriptHeader: [
['@author', 'me'],
['@grant', 'unsafeWindow'],
],
userscriptInjectPage: ['src/contentScript/contentScript.ts'],
prettier: {
format: true,
options: { parser: 'babel' },
},
};
export default config;
manifest.json
へのパスを指定出来ます。
使用できるmanifest_version
は3
のみです。
詳しいmanifestの形式はChrome for Developersを確認してください。
Chrome拡張機能がビルドされるディレクトリを指定できます。
Userscriptがビルドされるファイルパスを指定できます。
esbuildのオプションを追加で指定できます。 詳しいオプションの形式はesbuild - APIを確認してください。
開発モード時に使用するサーバーのホストとポートを指定できます。
devServer: {
port: 3000, // ファイルサーバーのポート番号
host: 'localhost', // 共通のホスト
websocket: 3001, // 自動リロード用サーバーのポート番号
}
publicフォルダーのディレクトリパスを指定できます。
そのディレクトリはビルド時にchromeOutputDir
で指定されたパスにコピーされます。
追加のuserscriptのヘッダーを指定できます。
詳しいヘッダーの形式はDocumentation | Tampermonkeyを確認してください。
manifest.json
に指定された48ピクセルのiconをbase64に変換してuserscriptのiconに設定します
userscriptとして読み込む際にunsafeWindowからアクセスしたbodyへ直接scriptタグを使用して挿入するcontentscriptを指定できます。
prettier: {
format: true, // フォーマットを実行するか?
options: { parser: 'babel' },
},
Userscriptビルド後に実行するPrettierを使用したフォーマットを構成します。
CRX-MONKEYはコンテントスクリプトから使用できるさまざまなユーティリティ関数を提供します。
[!Note] Connector requiredの機能は
manifest.json
にconnection_isolated
を設定してください。"content_scripts": [ { "js": ["src/contentScript/contentScript.ts"], "connection_isolated": true } ]
スクリプトが拡張機能として実行されているか、Userscriptとして実行されているかを取得します。
Is executable? | Method |
---|---|
✅ | Chrome Extension running in MAIN |
✅ | Chrome Extension running in ISOLATED |
✅ | Userscript |
import { getRunningRuntime } from 'crx-monkey';
const runtime = getRunningRuntime();
console.log('Running by:', runtime);
拡張機能のID(chrome.runtime.id
の値)を取得します。
Is executable? | Method |
---|---|
✅ | Chrome Extension running in MAIN |
✅ | Chrome Extension running in ISOLATED |
❌ | Userscript |
import { getExtensionId } from 'crx-monkey';
getExtensionId().then((id) => {
console.log('id:', id);
});
メッセージの受信(chrome.runtime.onMessage.addListener
)をバイパスします。
Is executable? | Method |
---|---|
✅ | Chrome Extension running in MAIN |
❌ | Userscript |
import { bypassSendMessage } from 'crx-monkey';
bypassMessage((msg) => {
console.log('Receved a message.', msg);
});
メッセージの送信(chrome.runtime.sendMessage
)をバイパスします。
Is executable? | Method |
---|---|
✅ | Chrome Extension running in MAIN |
❌ | Userscript |
import { bypassSendMessage } from 'crx-monkey';
bypassSendMessage({ msg: 'Hi' });