質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

291閲覧

YouTubeのミニサイドメニューに追加もしくは変更

consommemiso

総合スコア2

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2024/09/04 18:58

実現したいこと

  • YouTubeのミニサイドメニューに後で見るを追加もしくはマイページを後で見るに変更

前提

Violentmonkeyを使ってます
他のボタンと同じようにアイコンとテキストを表示させたい

試したこと

JavaScriptで以下のコードを試したりもしましたが後で見るが縦書きになるなどうまくいきませんでした

JavaScript

1(function() { 2 'use strict'; 3 4 function addWatchLaterLink() { 5 const offlineEntry = document.querySelector( 6 'ytd-mini-guide-entry-renderer[aria-label="マイページ"]'); 7 if (offlineEntry && !document.querySelector('a[href="/playlist?list=WL"]')) { 8 const link = document.createElement('a'); 9 link.href = '/playlist?list=WL'; 10 link.textContent = '後で見る'; 11 link.style.cssText = 12 'padding: 10px; font-size: 10px; color: #fff; text-decoration: none; display: flex; align-items: center;'; 13 14 // アイコンの追加(SVGデータURLを使用) 15 const icon = document.createElement('img'); 16 icon.src = 'data:image/svg+xml;base64,' + btoa(` 17 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> 18 <path fill="#FFF" d="M14.97 16.95 10 13.87V7h2v5.76l4.03 2.49-1.06 1.7zM12 3c-4.96 0-9 4.04-9 9s4.04 9 9 9 9-4.04 9-9-4.04-9-9-9m0-1c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2z"/> 19 </svg>` 20 ); 21 icon.alt = '後で見るアイコン'; 22 icon.style.cssText = 'width: 24px; height: 24px; margin-right: 8px;'; 23 24 25 // アイコンをリンクの前に追加 26 link.insertBefore(icon, link.firstChild); 27 28 // リンクを挿入 29 offlineEntry.parentNode.insertBefore(link, offlineEntry.nextSibling); 30 } 31 }; 32 33 // DOMの変更を監視するMutationObserverを作成 34 const observer = new MutationObserver(function(mutations) { 35 for (const mutation of mutations) { 36 if (mutation.type === 'childList') { 37 console.log('DOMが変更されました'); 38 addWatchLaterLink(); 39 } 40 } 41 }); 42 43 // ドキュメントボディの変更を監視開始 44 observer.observe(document.body, { 45 childList: true, 46 subtree: true 47 }); 48})();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

どうぞ

javascript

1// ==UserScript== 2// @name New script youtube.com 3// @namespace Violentmonkey Scripts 4// @match https://www.youtube.com/* 5// @grant none 6// @version 1.0 7// @author - 8// @description 2024/9/5 4:55:49 9// ==/UserScript== 10 11function waitTargetElement(){ 12 return new Promise(resolve => { 13 setInterval(() => { 14 let target = document.querySelector("#items.ytd-mini-guide-renderer") 15 target.querySelectorAll("ytd-mini-guide-entry-renderer").length >= 4 && resolve(target) 16 }, 500) 17 }) 18} 19 20async function main(){ 21 let target = await waitTargetElement() 22 target.insertAdjacentHTML("beforeend", ` 23 <ytd-mini-guide-entry-renderer class="style-scope ytd-mini-guide-renderer" system-icons="" role="tab" tabindex="0" aria-selected="false" aria-label="後で見る"> 24 <a id="endpoint" tabindex="-1" class="yt-simple-endpoint style-scope ytd-mini-guide-entry-renderer" title="後で見る" href="/playlist?list=WL"> 25 <icon id="icon" class="guide-icon style-scope ytd-mini-guide-entry-renderer"> 26 <span class="yt-icon-shape yt-spec-icon-shape"> 27 <div style="width: 100%; height: 100%; display: block; fill: currentcolor;"> 28 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true" style="pointer-events: none; display: inherit; width: 100%; height: 100%;"><path d="M14.97 16.95 10 13.87V7h2v5.76l4.03 2.49-1.06 1.7zM12 3c-4.96 0-9 4.04-9 9s4.04 9 9 9 9-4.04 9-9-4.04-9-9-9m0-1c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2z"></path></svg> 29 </div> 30 </span> 31 </icon> 32 <span class="title style-scope ytd-mini-guide-entry-renderer">後で見る</span> 33 </a> 34 </ytd-mini-guide-entry-renderer> 35 `) 36} 37 38main()

実行結果:
イメージ説明

投稿2024/09/04 20:38

編集2024/09/05 05:24
FoxRefire

総合スコア146

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

consommemiso

2024/09/04 23:06

回答ありがとうございます。試してみましたが表示されませんでした。 次の返事遅くなります
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問