「Tampermonkey」自体で文字化けが生じる 

文字化けが常に確実に生じるなら、対策はむしろ簡単なのですが、良く判らない理由で、たまに生じる文字化けは、何をどう対策したら良いのか困ってしまいます。

 

ここで問題にしているのは、「Tampermonkey」の「ダッシュボード」(主管理画面)のアレンジを行う「カスタムCSS」の登録枠内で文字化けする問題です。

 

これは、拡張機能の「Tampermonkey」のデザインに影響しますが、JavaScriptのページへの適用をする肝心の機能には問題はありません。 ただ、JavaScriptのコード編集を終了し難くなる程度の問題しか惹き起こさないのですが、やはりちゃんとしておきたい所です。

 

 

問題の症状 

下の赤枠の「❌」「🟠」のマークは、コード編集画面を閉じるボタンです。

 

 

このボタンデザインは、編集・加筆があった事を明瞭に示して、保存忘れを防ぐ目的があります。 ところが、「カスタムCSS」の登録枠内の文字化けが生じると、このボタンが文字化けします。

 

 

ブラウザのツールバーのポップアップも、同様に文字化けします。

 

 

どうやら、拡張機能を再インストールした際に、この文字化けが生じる様です。

 

 

文字化けが生じるCSS登録枠  

実際に文字化けが生じる場所は、「ダッシュボード」の「カスタムCSS」の登録枠の中です。

 

 

文字化けは、他の部分のデザインや機能に影響しません。 文字化を抑止するには、CSSコードのコメント行で漢字(2バイトコード)を使わないこと、また、上記のWindow絵文字(サロゲートペア)はユニコード入力で表記する事だと判りました。  今回、この対策をした上で、コードの再チェックして細部を更新しました。 

 

もし、上記の編集画面を「閉じるボタン」が、正しく表示されない時は、以下の対策コードに書換えてください。

 

 

 

 「Tampermonkey」の スキンCSS

ダッシュボード」の 設定」タブを開くと、下の 外観」の項に「カスタムCSS」の登録枠があります。 ここにCSSコードをペーストし「保存」を押すと、スキンCSSが「ダッシュボード」や「ポップアップのメニュー」に反映します。

 

 

 

●「カスタムCSS」の登録枠内に前バージョンのコードを記入している場合は、枠内をいったん空白にしてから、以下の対策済コードをペーストしてください。

 

〔コピー方法〕 右サイドバーの   マークのボタンを1度押してください。

 コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。

 

 

〔 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 メイリオで、少し大き目です。

▪ スクリプト編集枠の「フォント種」「フォントサイズ」は、上記コードの以下の項を書き変えると変更できます。

 

/* CodeMirror ******* */
.CodeMirror {
    font-family: Meiryo;
    font-size: 1.4em; }