⭕「Tampermonkey」の導入方法 / JavaScript

特定のページで 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は赤」となる明瞭なデザインになります。

 

 

その他の幾つかの部分で、レイアウトを使い易く調整しています。