「Tampermonkey」自体で文字化けが生じる
文字化けが常に確実に生じるなら、対策はむしろ簡単なのですが、良く判らない理由で、たまに生じる文字化けは、何をどう対策したら良いのか困ってしまいます。
ここで問題にしているのは、「Tampermonkey」の「ダッシュボード」（主管理画面）のアレンジを行う「カスタムCSS」の登録枠内で文字化けする問題です。
これは、拡張機能の「Tampermonkey」のデザインに影響しますが、JavaScriptのページへの適用をする肝心の機能には問題はありません。 ただ、JavaScriptのコード編集を終了し難くなる程度の問題しか惹き起こさないのですが、やはりちゃんとしておきたい所です。
問題の症状
下の赤枠の「❌」「🟠」のマークは、コード編集画面を閉じるボタンです。
このボタンデザインは、編集・加筆があった事を明瞭に示して、保存忘れを防ぐ目的があります。 ところが、「カスタムCSS」の登録枠内の文字化けが生じると、このボタンが文字化けします。
ブラウザのツールバーのポップアップも、同様に文字化けします。
どうやら、拡張機能を再インストールした際に、この文字化けが生じる様です。
文字化けが生じるCSS登録枠
実際に文字化けが生じる場所は、「ダッシュボード」の「カスタムCSS」の登録枠の中です。
文字化けは、他の部分のデザインや機能に影響しません。 文字化を抑止するには、CSSコードのコメント行で漢字（2バイトコード）を使わないこと、また、上記のWindow絵文字（サロゲートペア）はユニコード入力で表記する事だと判りました。 今回、この対策をした上で、コードの再チェックして細部を更新しました。
もし、上記の編集画面を「閉じるボタン」が、正しく表示されない時は、以下の対策コードに書換えてください。
「Tampermonkey」の スキンCSS
「ダッシュボード」の ❶「設定」タブを開くと、下の ❷「外観」の項に「カスタムCSS」の登録枠があります。 ここにCSSコードをペーストし「保存」を押すと、スキンCSSが「ダッシュボード」や「ポップアップのメニュー」に反映します。
●「カスタムCSS」の登録枠内に前バージョンのコードを記入している場合は、枠内をいったん空白にしてから、以下の対策済コードをペーストしてください。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Tampermonkey のスキンCSS 〕 2023.03.07
/* Tampermonkey Setup CSS 2023.03.07 */
/* Dashboard & Popup Menu **** */
.enabler.enabler_enabled .far.on {
color: #f00 !important; }
/* Dashboard Header ******* */
img.banner {
width: 1.8em;
height: 1.8em; }
.head {
display: flex;
align-items: flex-end; }
.version {
margin-left: 20px;
font-size: 0.6em; }
.tv_container_fit {
top: 2.8em; }
.default .tv_selected {
z-index: 0; }
/* Installed List Table ******* */
table.scripttable td:last-child .far.fa-edit {
display: none; }
table.scripttable td:last-child {
padding-right: 2.5em; }
/* Edit Tab Header ******* */
.tv_tab_close {
vertical-align: 2px;
overflow: visible; }
.modified .tv_tab_close::before {
content: "\1F534";
font-size: 0.8em;
filter: brightness(2); }
.modified .tv_tab_close:hover::before {
filter: brightness(1); }
.tv_tab_close::before {
content: "\0274C";
font-size: 0.8em;
filter: brightness(5); }
.tv_tab_close:hover::before {
filter: brightness(1); }
.script_tab_head {
position: absolute; }
.nameNicon64 {
width: 300px; }
.heading tr td:nth-child(2) {
display: flex; }
.nameNname64 {
line-height: 36px; }
.nameNicon64 > img {
margin: 0;
width: 40px;
height: 32px; }
.heading .author,
.heading .nameNname64 {
width: fit-content; }
.author {
margin-top: 14px; }
.editormenu::before {
content: "▶";
position: fixed;
top: 120px;
left: 990px;
color: #888; }
/* CodeMirror ******* */
.CodeMirror {
font-family: Meiryo;
font-size: 1.4em; }
.CodeMirror span.CodeMirror-matchingbracket {
color: #000 !important;
background: rgba(255, 153, 0, 0.4); }
.CodeMirror-search-match {
background: none;
border-top: 2px solid #f00;
border-bottom: none;
opacity: 1; }
.CodeMirror-dialog-bottom {
border: 1px solid #aaa;
right: 1em;
left: 10em; }
.CodeMirror-dialog-bottom .CodeMirror-search-field {
margin-right: -20em; }
/* Popup Menu ******* */
#action .fa-check:before {
content: "\1F4A2"; }
#action #td_aG9yX3dlc3RfdW5kZWZpbmVk {
display: flex;
flex-direction: column; }
#action #table_Ym90dG9tX3VuZGVmaW5lZA {
order: -1;
margin-top: 1px; }
#action #tr_dW5kZWZpbmVkX2Fib3V0_outer {
display: none; }
#action #tr_Y29tbWFuZHNfY29tbWFuZHM_outer {
display: none; }
.actiontable {
border-color: #ccc;
border-width: 1px 0 0 0; }
.actiontable tr {
line-height: 28px;
height: 2em; }
アレンジの要点
上記コードの主要な部分を紹介します。
▪「Tampermonkey」のロゴマーク部をコンパクトにしています。
▪ 登録スクリプトON / OFF の切替ボタンを「ON=赤色」に変更。
▪ 編集画面のタブの編集の有無を示すマーク「🟠」「❌」を明瞭化。
▪ 検索ヒット文字列の縦スクロールバー上の位置表示を明瞭化。
▪ ブラウザのポップアップメニューを「💢 有効」「✖ 無効」に変更。
編集画面のフォントサイズはユーザーにとって最適の指定に変更する必要があるかも知れません。
▪ 編集画面のフォントサイズは 19.04px メイリオで、少し大き目です。
▪ スクリプト編集枠の「フォント種」「フォントサイズ」は、上記コードの以下の項を書き変えると変更できます。