Search code examples
javascriptyoutubecontent-scriptbrowser-extensionublock-origin

How to block/remove Youtube Share, Download buttons in a content script like how uBlock does it?


Removing said buttons with code below works however it doesn't update the UI in a way that displays the other buttons in the sub-menu. The other buttons remain hidden in the sub-menu, while the ones that were originally displayed(i.e. Thanks, Clip) just collapse to the right towards sub-menu button.

document.querySelector('button[aria-label="Download"]').remove();
document.querySelector('button[aria-label="Share"]').remove();

I expect that the other buttons like Save which is inside the sub-menu to be displayed after removing Share and Download buttons.

I tried to block it via uBlock Origin extension and it does work the way I expect to. But I'm looking for a way to do via my own content script. My understanding is it should be possible since uBlock, as a browser extension, is somehow able to do it.

Custom uBlock filter:

www.youtube.com##.ytd-download-button-renderer.style-scope > yt-button-shape
www.youtube.com###top-level-buttons-computed > ytd-button-renderer.ytd-menu-renderer.style-scope > yt-button-shape > .yt-spec-button-shape-next--icon-leading.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal.yt-spec-button-shape-next > yt-touch-feedback-shape > .yt-spec-touch-feedback-shape--touch-response.yt-spec-touch-feedback-shape > .yt-spec-touch-feedback-shape__fill
www.youtube.com###top-level-buttons-computed > ytd-button-renderer.ytd-menu-renderer.style-scope

It doesn't have to be exactly how uBlock does it. My main goal is simply to always display the Save button via content script.


Solution

  • As suggested by wOxxOm, the correct way is to hide/block the element via CSS which now displays the Save button. Below is for my own unpacked extension.

    manifest.json

      "content_scripts": [
        {
          "matches": ["https://www.youtube.com/*"],
          "css": ["hide.css"],
          "run_at": "document_end"
        }
      ]
    

    hide.css:

    button[aria-label="Download"],
    button[aria-label="Share"],
    button[aria-label="Thanks"],
    button[aria-label="Clip"] { display:none !important }
    

    Above CSS hides all 4 buttons, if you want to hide only specific ones, just remove the corresponding line with aria-label.