[GH-ISSUE #7] Observer to inject buttons into youtube search page #4

New issue

Closed

opened 2026-03-23 20:31:30 +00:00 by mirror · 2 comments

mirror commented

2026-03-23 20:31:30 +00:00

Owner

Originally created by @bbilly1 on GitHub (Oct 28, 2022).
Original GitHub issue: https://github.com/tubearchivist/browser-extension/issues/7

Documenting a snipped provided by @bakkot on how to inject a download button into youtube search results.

function ensureTALinks() {
  let titles = document.querySelectorAll('#title-wrapper');
  for (let title of titles) {
    if (title.hasTA) continue;
    let titleLink = title.querySelector('#video-title')?.href;
    if (titleLink == null) continue;
    let link = document.createElement('a');
    link.href = '#';
    link.innerHTML = 'Send to TA';
    link.addEventListener('click', e => {
      e.preventDefault();
      alert(`do something with ${titleLink}`);
    });
    title.append(link);
    title.hasTA = true;
  }
}
ensureTALinks();

let observer = new MutationObserver(list => {
  if (list.some(i => i.type === 'childList' && i.addedNodes.length > 0)) {
    ensureTALinks();
  }
});

observer.observe(document.body, { attributes: false, childList: true, subtree: true });

Just keeping this here for future reference.

Originally created by @bbilly1 on GitHub (Oct 28, 2022). Original GitHub issue: https://github.com/tubearchivist/browser-extension/issues/7 Documenting a snipped provided by @bakkot on how to inject a download button into youtube search results. ```js function ensureTALinks() { let titles = document.querySelectorAll('#title-wrapper'); for (let title of titles) { if (title.hasTA) continue; let titleLink = title.querySelector('#video-title')?.href; if (titleLink == null) continue; let link = document.createElement('a'); link.href = '#'; link.innerHTML = 'Send to TA'; link.addEventListener('click', e => { e.preventDefault(); alert(`do something with ${titleLink}`); }); title.append(link); title.hasTA = true; } } ensureTALinks(); let observer = new MutationObserver(list => { if (list.some(i => i.type === 'childList' && i.addedNodes.length > 0)) { ensureTALinks(); } }); observer.observe(document.body, { attributes: false, childList: true, subtree: true }); ``` Just keeping this here for future reference.

mirror

2026-03-23 20:31:30 +00:00

closed this issue
added the
enhancement
label

mirror commented

2026-03-23 20:31:31 +00:00

Author

Owner

@pairofcrocs commented on GitHub (Oct 29, 2022):

Just as reference, the font used is Roboto Medium.

@pairofcrocs commented on GitHub (Oct 29, 2022): ![browser-buttons](https://user-images.githubusercontent.com/34723037/198838112-3a6a9e55-f7b1-4d17-8656-b6b64afd8037.svg) Just as reference, the font used is Roboto Medium.

mirror commented

2026-03-23 20:31:31 +00:00

Author

Owner

@bbilly1 commented on GitHub (Nov 30, 2022):

v0.1.0 is implementing the observer approach. Thanks for the input.

@bbilly1 commented on GitHub (Nov 30, 2022): v0.1.0 is implementing the observer approach. Thanks for the input.