Last active
March 26, 2019 19:57
-
-
Save tomato111/f0cbe478dc5a64b23448a1ab09812355 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Add Attributes To YouTube Live Chat | |
| // @namespace http://ashiato1.blog62.fc2.com/ | |
| // @description Add custom data attributes "data-author" to use with CSS | |
| // @author tomato111 | |
| // @version 0.0.3 | |
| // @downloadURL https://gist.github.com/tomato111/f0cbe478dc5a64b23448a1ab09812355/raw/Add_Attributes_To_YouTube_Live_Chat.user.js | |
| // @updateURL https://gist.github.com/tomato111/f0cbe478dc5a64b23448a1ab09812355/raw/Add_Attributes_To_YouTube_Live_Chat.user.js | |
| // @match *://www.youtube.com/watch* | |
| // @match *://www.youtube.com/live_chat* | |
| // @match *://www.youtube.com/*/live | |
| // @run-at document-start | |
| // @grant GM_setClipboard | |
| // @license ISC | |
| // ==/UserScript== | |
| (function () { | |
| function grabElement(doc, query, callback) { | |
| var i = 0; | |
| var grab = setInterval(function () { | |
| var element = doc.querySelector(query); | |
| element && callback(element); | |
| if (element || i++ > 30) { | |
| clearInterval(grab); | |
| } | |
| }, 500); | |
| } | |
| function addAttributes(chat_item) { | |
| var author_span = chat_item.querySelector('#author-name'); | |
| var message_span = chat_item.querySelector('#message'); | |
| if (!author_span || !message_span) | |
| return; | |
| var author = author_span.textContent; | |
| chat_item.dataset.id = chat_item.id; | |
| chat_item.dataset.author = author; | |
| author_span.dataset.author = author; | |
| message_span.dataset.author = author; | |
| author_span.onclick = function () { | |
| GM_setClipboard('[data-author="' + author + '"]'); | |
| }; | |
| } | |
| function obs(target) { | |
| Array.prototype.forEach.call(target.children, addAttributes); | |
| var observer = new MutationObserver(function (MutationRecords) { | |
| MutationRecords.forEach(function (Record) { | |
| var pre_node = Record.previousSibling; | |
| if (pre_node && pre_node.nodeType === pre_node.ELEMENT_NODE && pre_node.dataset.id && pre_node.dataset.id !== pre_node.id) { | |
| Array.prototype.forEach.call(target.children, addAttributes); | |
| } | |
| else { | |
| Record.addedNodes.forEach(function (node) { | |
| if (node.nodeType === node.ELEMENT_NODE) | |
| addAttributes(node); | |
| }); | |
| } | |
| }); | |
| }); | |
| observer.observe(target, { | |
| childList: true | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', function () { | |
| grabElement(document, '#chat div#items', obs); | |
| }, false); | |
| })(); |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
YouTube Liveのチャットコメントにdata-author属性を追加するスクリプトです。主にCSSで使用するためです。
あと、名前をクリックすると[data-author="〇〇"]の形式で名前をコピーできます。
Sample CSS
@-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;
}
}
スタイルを作成->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の適用
