中国の動画サイトBilibiliで中国語学習をしている人も少なくないと思いまして、僕もその一人なわけでありますが、
Bilibiliではニコニコ動画のコメントのような動画上を右から左へ流れる特徴的なコメントシステムを搭載していますが、
このコメントがマウスで文字選択できない、というのが長年のストレスでありました。
文字選択ができないと単語をGoogle検索や辞書検索するのにコピペもできづらいですし、Google翻訳などで翻訳にかけることもできず不便であります。
そこでJSスクリプトを書きました。
Redditに投稿したら反応が良くて少し驚きました。
RedditやQIitaの文を執筆するのは少し時間を取りますが、便利なものは多くの人に使ってもらいたいのでできる限りでシェアしています。
JavaScriptは以下だけ。
document.querySelector('div[class="bilibili-player-video-danmaku"]').style.zIndex = 69;
document.querySelectorAll('div[class="b-danmaku"]').forEach(a => {
a.style.userSelect = "text";
a.style.pointerEvents = "all";
a.style.cursor = "text";
})
20分くらいで書きました。
デベロッパーツールでどの要素がコメントなのか検証、computedと照らし合わせながらcssを付与して動作検証、z-index上部の要素の検証とz-index値の調整、最後にJSに落とし込んでユーザスクリプト形式にして完成です。
バグ要望感想等あればお聞かせください。