特定のページで JavaScriptを実行する拡張機能
「Tampermonkey」は定評のあるブラウザ拡張機能で、これをブラウザに導入すると、ユーザーは自作スクリプトを必要な選択したページで実行することが出来ます。
「Tampermonkey」の入手先と設定
拡張機能「Tampermonkey」は、複数のブラウザに対応しています。
Chrome、Firefox、Edge、Safari、Opera Next、Dolphin Browser に対応する版があり、それぞれのブラウザから提供サイトを探して入手出来ます。
◎ Chrome版は以下のリンク先にあります。 Edgeは Chrome版を導入します。
◎ Firefox版は以下のリンク先にあります。
お勧めの「Tampermonkey」のスキン
以下の「スキン」は若干のデザインの変更ですが、おそらく使い易いと感じる方が多いと思います。
スキンの設定手順
●「新参者」「初心者」「上級者」の選択で、❶「上級者」を選択します。
● 外観の欄に「カスタムCSS」❷ の記入枠が表示されます。 ここに、以下のCSSをコピ―&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔注:以下のコードは 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; }
● CSSをペーストしたら ❸「保存」を押します。
登録したUserScriptのリストで、スクリプトをON/OFFするスイッチの色が不明瞭です。 これをアレンジして、下の様に「ONは赤」となる明瞭なデザインになります。
その他の幾つかの部分で、レイアウトを使い易く調整しています。