YouTube Live Chat で名前によってCSSで色付けしたり非表示にする
CSS だけではチャットの名前を拾えなかったので、ユーザースクリプトで属性を追加する必要があります。
ということで作ったのが以下のスクリプト。Tampermonkey と Violentmonkey で動作確認済み。Greasemonkey はダメ。
Add Attributes To YouTube Live Chat.user.js
導入したら後はCSSを書くだけです。(名前をクリックすると[data-author="〇〇"]の形式で名前をコピーできます。)
サンプルCSS
ということで作ったのが以下のスクリプト。Tampermonkey と Violentmonkey で動作確認済み。Greasemonkey はダメ。
Add Attributes To YouTube Live Chat.user.js
導入したら後はCSSを書くだけです。(名前をクリックすると[data-author="〇〇"]の形式で名前をコピーできます。)
サンプルCSS
・ [Stylish for Firefox]
@-moz-document url-prefix("https://www.youtube.com/live_chat"),
url-prefix("https://www.youtube.com/watch")
{
[data-author]#author-name{
color: darkgoldenrod !important;
}
[data-author*="a"]{
color: sienna !important;
background-color: papayawhip !important;
font-weight: bold;
}
}
・ [Stylish for Chrome]
スタイルを作成->Mozilla Format "Import"->上記のCSSを入力してOverwrite style
このサンプルCSSは [data-author]#author-name の部分で名前に一律に色を付けて、
[data-author*="a"] の部分で名前に"a"が含まれるチャットを色づけ+太字にしています。
例えばfooさん、barさん、bazさんといった複数人に対してスタイルを適用したい場合は
[data-author="foo"],
[data-author="bar"],
[data-author="baz"] {
}
のようにカンマで区切ります。
名前の部分のみ、メッセージの部分のみにスタイルを適用したい場合は
[data-author="qux"]#author-name や [data-author="qux"]#message と指定します。
CSSなので色を付ける他に非表示にもできます。(quuxさんを非表示にする)
[data-author="quux"]{ display: none; }
サンプルCSSの適用

ちなみに Greasemonkey をダメとしたのは
・チャットが有効なページ間の遷移だとiframeにグリモンスクリプトが走らない(2,3ページ後あたりで走り始める)
という謎現象が起こったから。
最初 Greasemonkey で作っていて、何故想定通りに動かないのか、流れを勘違いしているのかと、
計8時間くらい悩み様々な書き方を試すという無駄に大変な目にあった。
結局 Tampermonkey と Violentmonkey なら何の問題もなかった、スクリプトがおかしい訳ではなかったので
今後もう Greasemonkey は使わないかもしれない。
@-moz-document url-prefix("https://www.youtube.com/live_chat"),
url-prefix("https://www.youtube.com/watch")
{
[data-author]#author-name{
color: darkgoldenrod !important;
}
[data-author*="a"]{
color: sienna !important;
background-color: papayawhip !important;
font-weight: bold;
}
}
・ [Stylish for Chrome]
スタイルを作成->Mozilla Format "Import"->上記のCSSを入力してOverwrite style
このサンプルCSSは [data-author]#author-name の部分で名前に一律に色を付けて、
[data-author*="a"] の部分で名前に"a"が含まれるチャットを色づけ+太字にしています。
例えばfooさん、barさん、bazさんといった複数人に対してスタイルを適用したい場合は
[data-author="foo"],
[data-author="bar"],
[data-author="baz"] {
}
のようにカンマで区切ります。
名前の部分のみ、メッセージの部分のみにスタイルを適用したい場合は
[data-author="qux"]#author-name や [data-author="qux"]#message と指定します。
CSSなので色を付ける他に非表示にもできます。(quuxさんを非表示にする)
[data-author="quux"]{ display: none; }
サンプルCSSの適用

ちなみに Greasemonkey をダメとしたのは
・チャットが有効なページ間の遷移だとiframeにグリモンスクリプトが走らない(2,3ページ後あたりで走り始める)
という謎現象が起こったから。
最初 Greasemonkey で作っていて、何故想定通りに動かないのか、流れを勘違いしているのかと、
計8時間くらい悩み様々な書き方を試すという無駄に大変な目にあった。
結局 Tampermonkey と Violentmonkey なら何の問題もなかった、スクリプトがおかしい訳ではなかったので
今後もう Greasemonkey は使わないかもしれない。
| Soft & Tool | 16:27 | comments:0 | trackbacks:0 | TOP↑