LoginSignup
1

NodeREDのパレット文字の日本語化

Last updated at Posted at 2023-06-03

はじめに

NodeREDのパレットの文字を低学年向けに日本語化したい要望あり。
Chrome Extensionの勉強がてらする。

Chrome Extension

まずファイルの準備から

NodeRedJpPaletteフォルダを作り、その中にmanifest.js とcontent.jsを用意する。

manifest.json
{
  "name": "NodeRedJpPalette",
  "version": "1.0.0",
  "manifest_version": 3,
  "content_scripts":[{
    "matches":["http://localhost/*"],
	  "run_at": "document_idle",
    "all_frames": true,
    "js":["content.js"]
  }]
}
javascript
window.addEventListener("load", main, false);

function main(e) {
	const jsInitCheckTimer = setInterval(jsLoaded, 1000);

	function jsLoaded() {
		if (document.querySelector('.red-ui-palette-label') != null) {
			clearInterval(jsInitCheckTimer);
			
			let elements1 = document.getElementById('red-ui-palette');
			let elements2 = elements1.getElementsByClassName('red-ui-palette-label');
			let len = elements2.length;
			
			for (let i = 0; i < len; i++) {
				if(elements2[i].textContent=="inject")elements2[i].textContent="インジェクト";
				if(elements2[i].textContent=="debug")elements2[i].textContent="デバッグ";
				if(elements2[i].textContent=="complete")elements2[i].textContent="コンプリート";
				if(elements2[i].textContent=="catch")elements2[i].textContent="キャッチ";
				if(elements2[i].textContent=="status")elements2[i].textContent="ステータス";
				if(elements2[i].textContent=="comment")elements2[i].textContent="コメント";
				if(elements2[i].textContent=="function"){
					elements2[i].textContent="ファンクション";
					elements2[i].setAttribute('style',"font-size:smaller")
				}
				if(elements2[i].textContent=="switch")elements2[i].textContent="スイッチ";
				if(elements2[i].textContent=="change")elements2[i].textContent="チェンジ";
				if(elements2[i].textContent=="range")elements2[i].textContent="レンジ";
				if(elements2[i].textContent=="template"){
					elements2[i].textContent="テンプレート";
					elements2[i].setAttribute('style',"font-size:smaller")
				}
				if(elements2[i].textContent=="delay")elements2[i].textContent="ディレイ";
				if(elements2[i].textContent=="trigger")elements2[i].textContent="トリガー";
				if(elements2[i].textContent=="exec")elements2[i].textContent="実行";
				if(elements2[i].textContent=="filter")elements2[i].textContent="フィルター";
			}
		};
	}
}

インストール

後は ブラウザの開発者モードをONにして Edgeなら"展開して読み込む"を,
Chromeなら"パッケージ化されていない拡張機能を読み込む"押してフォルダを指定

NodeRedを起動して確認します。

項目の追加

すみません。全部の項目をしていません。
フォルダー内のcontent.jsを書き換えて、ブラウザの拡張機能で再読み込みをすれば機能が更新されます

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1