使いにくい ScombZ のサイドメニューやテストを修正したり、ADFS ボタンの自動スキップができます。よりユーザビリティに優れた ScombZ を提供します。
このプロジェクトは 旧 ScombZ Utilities からのリニューアル版です。 旧コードは以下のリポジトリにあります。
https://github.com/scombz-utilities/scombz-utilities-legacy
環境構築は、ローカルで Node.js 環境を構築する方法と、Dockerを使った方法があります。
パフォーマンス上の理由からローカルでの開発を推奨しますが、環境構築の手間を省くためにDockerを使うこともできます。
ローカルでの環境構築
注意: Nodeのバージョンは必ず.node-version記載のものに合わせること
nodeのバージョンは20.11.1で固定とします。
.node-versionファイルでバージョンを指定しているため、対応したバージョン管理ツールを使ってインストールしてください。
asdfやnodenvなどのバージョン管理ツールを使うとよいでしょう。
このreadmeではnodenvを使ったガイドを載せます。
asdfで実行する際の注意
asdf の場合は.node-versionを標準では読み込まないため、~/.asdfrcに以下の記述を追加してください。
legacy_version_file = yesnodenvのインストール for Mac
① HomeBrewでnodenvのインストールを行います。
$ brew install nodenv② ~/.zshrcの最終行にhookを追加します。以下のコマンド2つを実行してください。
（echoではなく、vim等で直接書き込んでも問題ありません）
$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.zshrc$ echo 'eval "$(nodenv init -)"' >> ~/.zshrc③ このままでは .zshrcが読み込まれていないので、再読み込みを行います。
$ source ~/.zshrc④ .node-versionに記載されているnodeのバージョンを確認して下さい。
(記事確認時点では v20.11.1)
確認したバージョンをnodenvでインストールします。
( .node-versionに記載されているのがv20.11.1でない場合はコマンドを適切に変更してください)
$ nodenv install 20.11.1⑤ nodenvをリフレッシュします
$ nodenv rehash⑥ インストールされたnodeのバージョンが合っているかを確認します
$ node -vnodenvのインストール for Windows (Ubuntu)
ここからは必ずWSL Ubuntuを使用してください
① ビルドツールが無いかもしれないのでインストールします(あればスキップで構わない)
$ sudo apt install build-essential② 公式の手順でnodenvのインストールを行います(公式)。さらに、 nodenv install を有効にするため、node-buildもインストールします(野良記事)。
$ git clone https://github.com/nodenv/nodenv.git ~/.nodenv
$ cd ~/.nodenv && src/configure && make -C src
$ git clone https://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build③ ~/.bashrcの最終行にhookを追加します。以下のコマンド2つを実行してください。
（echoではなく、vim等で直接書き込んでも問題ありません）
（bash以外のシェルを使っている場合は出力先を適宜変更してください）
$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bashrc$ echo 'eval "$(nodenv init -)"' >> ~/.bashrc③ このままでは .bashrcが読み込まれていないので、再読み込みを行います。
$ source ~/.bashrc④ .node-versionに記載されているnodeのバージョンを確認して下さい。
(記事確認時点では v20.11.1)
確認したバージョンをnodenvでインストールします。
( .node-versionに記載されているのがv20.11.1でない場合はコマンドを適切に変更してください)
$ nodenv install 20.11.1
$ nodenv global 20.11.1⑤ nodenvをリフレッシュします
$ nodenv rehash⑥ インストールされたnodeのバージョンが合っているかを確認します
$ node -vこのレポジトリでは基本的にパッケージ管理にはnpmを用います。
以下のコマンドを実行して依存関係をインストールしてください。
$ npm i以下のコマンドで開発サーバーを立ち上げられます。
build/chrome-mv3-devを読み込んでください。
tsxファイル等を更新するとライブローディングされます。
[!TIP] WSL上での開発において、Killedと表示されて完全に終了しない場合、wslの割り当てメモリが少ない可能性があります。
初期の割り当ては搭載メモリの50%なので、.wslconfigファイルを作成、または編集し、それ以上を割り当ててください。
$ npm run dev以下のコマンドでビルドできます。 ChromeとFireFoxに対応したビルドがそれぞれ生成されます。
$ npm run buildDockerでの環境構築
- (まだの場合は)Docker Desktopをインストールしてください。
- 以下のコマンドを実行して必要なモジュールをインストールしてください。makeコマンドが使えない場合は、makeをインストールするか、直接docker-composeコマンドを実行してください。
$ make i
or
$ docker compose run --rm app npm i以下のコマンドで開発サーバーを立ち上げられます。
build/chrome-mv3-devを読み込んでください。
tsxファイル等を更新するとライブローディングされます。
$ make dev
or
$ docker compose run --rm app npm run dev以下のコマンドでビルドできます。 ChromeとFireFoxに対応したビルドがそれぞれ生成されます。
$ make build
or
$ docker compose run --rm app npm run buildScombZ utilitiesでは、Chrome Web Store、Firefox Add-ons、Microsoft Edge Add-onsにて一般用に配布しています。 全てのストアで自動的に公開するために、publish-browser-extensionを利用しています。
.env.submit.templateファイルをコピーして.env.submitファイルを作成します。- 開発リーダーに
.env.submitファイルの内容を共有してもらい、必要な情報を入力します。 - 以下のコマンドを実行して、ストアへの公開を行います。
npm run publishを実行すると、各ストアに自動的に公開されます。
開発においてコーディングルールをeslintに定義しています。
VScodeでは自動的にルールに合っているか解析+ルールに合ったように整形を行うことができるため、以下の拡張機能をインストールしてください。
VScodeのユーザー設定は.vscodeディレクトリ内に定義済みのため特に変える必要はない(はず)です。
- 基本的にすべてのコードは
src、すべての外部ファイルはassets内に記載します。 - content_scriptはなるべくページ単位で
contentsディレクトリ直下に記載してください。 contentsファイル直下に1機能につき1つのtsもしくはtsxファイルを設置し、コンポーネントや共通モジュールを定義する場合はcomponentsやutil内に記載してimportで読み込んでください。- Plasmoとの相性が悪いためLintではあえて指定していませんが、基本的に変数名はキャメルケースで統一します。特別な事情がない限りスネークケースは使わないでください。
- DOM操作は可読性のために
tsxではなくtsファイル内に記述してください。同じ機能でtsとtsxの両方が必要になる場合、tsxでPlasmoの読み込みを行いuseEffect等でtsを読み込みます。 - ライブラリを追加する場合、共同開発者は全員が再度
npm iをする必要が生じます。影響範囲も大きいので必ず相談をしてください。 - 関数定義の際
functionは使わずアロー関数で定義します。 - 基本的にはJSX構文ではMUIコンポーネントを使ってください。