Any Way to Auto Delete/Block Inspect Element from Chromium HTML Inspect Element on Websites?

USER DC on 09/09/2022 - 15:44
Last edited 09/09/2022 - 15:46

anyone got a clue on how one can like put something on browser (like a chromium webstore extension or something like that with a few tweaks) that automatically blocks a HTML inspect element from all websites, (including when people like pause/play/ change playback speed of video etc.)

Not needing it for daily motion but just for example
e.g. when you play a daily motion video and pause that video, you are left with the stupidly annoying play/pause button https://i.imgur.com/Pj7hTJa.png
in the middle of the video. when you want to read stuff behind such a play/pause button its super darn dam annoying, only way to get rid of that button is by going to inspect element and deleting that part of HTML, and its always the same code, just added to the inspect element section (automatically when one like changes playback speed etc.)

So is there a way to like block a certain HTML code being put on inspect element of chromium browsers? so the websites don't display such stupid annoying buttons ?

Internet

Comments

  • Sum-Ting Wong on 09/09/2022 - 15:56
    +1

    Yes

    • USER DC on 09/09/2022 - 15:56

      would you mind sharing how?

      • askbargain on 09/09/2022 - 15:58

        you want to block something but won't say exactly what to block. you think every website uses the same variables? you're better off getting an extension that pop outs the video

        • USER DC on 09/09/2022 - 16:05

          picture in picture by google extension does work, but it too leave such a annoying thing https://i.imgur.com/lJmQmOp.png in the middle of it, causing unable to read stuff behind it,

          Plus also leave unable to change playback speed etc. other settings available on original website.

          • askbargain on 09/09/2022 - 16:14

            @USER DC: you don't want to see the settings but be able to change them. great ux, work for android dev team

        • USER DC on 09/09/2022 - 20:00

          Turns out that firefox has a better picture in picture viewer (uView Player Picture-in-picture Extension) And the BEST SOLUTION SO FAR

          1. It doesn't put that play button right in the middle on the video pop out
          2. It doesn't turn whole video into translucent when the mouse is over the pop out menu
          3. still allows for pause and other stuff here's an example, https://i.imgur.com/y56wbSB.jpg

          this is as apposed to picture in picture in chromium e.g. https://i.imgur.com/fy1UhsL.png

          I think that uView Player Picture-in-picture Extension in firefox might be the best solution so far

          which in comparison to the original website I have the whole issue with https://i.imgur.com/6m4Vuft.jpg

          Thanks to firefox dude used it for first time in like 6 years may be

  • MrHyde on 09/09/2022 - 15:59
    +3

    Use greasemonkey/tampermonkey and write a script to delete that element from all websites.

    • askbargain on 09/09/2022 - 16:03
      +3

      if OP knew how to script that, he wouldn't be babbling in OP.

      • MrHyde on 09/09/2022 - 16:04

        Something for the OP to learn :)

        • USER DC on 09/09/2022 - 16:08

          you mind giving an example, like dailymotion example given how to block "<svg class="playback_button-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.56047 5.09337C8.34001 4.9668 8.07015 4.96875 7.85254 5.10019C7.63398 5.23162 7.5 5.47113 7.5 5.73011L7.5 18.2698C7.5 18.5298 7.63398 18.7693 7.85254 18.9007C7.96372 18.9669 8.0882 19 8.21268 19C8.33241 19 8.45309 18.9688 8.56047 18.9075L18.1351 12.6377C18.3603 12.5082 18.5 12.2648 18.5 12C18.5 11.7361 18.3603 11.4917 18.1351 11.3632L8.56047 5.09337Z" fill="currentColor"></path></svg>"

          from the website that kinda stuff, here it is even worse because every time you play/pause stuff that stupid icon come on there, so its not a case of deleting, But more like blocking that element to come on (or prevent that element)

          Not a case where you are simply deleting it once and its gone forever, the actions on website will try to bring that same element on and on.

          • c64 on 09/09/2022 - 17:00

            @USER DC: if you were using adblock the rule

            dailymotion.com##button.playback_button

            would work, which would block the round circle and play/pause icon

            • USER DC on 09/09/2022 - 17:17

              @c64: adblock rule using adblock plus doesn't work

              This is the stupid code bothering me, the class should be only "icon-play"
              https://i.imgur.com/2wrCqqG.png

              That adblock rule will block the entire video, aka not what I want

              • c64 on 09/09/2022 - 18:20

                @USER DC: works fine for me in firefox. actually i meant ublock origin rather than adblock

                this is what inspector shows in when i right click on the big play button in a dailymoton video

                <div class="controls_vod" style="opacity: 0;">
    <div class="controls_layer_1" data-hidden-while-seeking="true" style="opacity: 1;">
        <button class="playback_button" style="pointer-events: auto;" aria-controls="dmp_Video" aria-label="Playback">
            <svg class="custom_focus_ring"...><circle...></circle></svg>
            <svg class="custom_active_ring"...><circle...></circle></svg>
            <svg class="playback_button-svg"...>...</svg>
        </button>

                anyway, whatever code is being rendered, you right click to inspect an element and see how it sits in the dom tree, then work out a rule from a tag and/or attributes to reliably select an element to hide

          • MrHyde on 09/09/2022 - 18:18

            @USER DC: Lots of examples on stackoverflow on how to change the HTML using Greasemonkey

            Eg: https://stackoverflow.com/questions/13102195/how-to-change-c…

            • USER DC on 09/09/2022 - 19:48

              @MrHyde: it doesn't work at all unfortunately

              • MrHyde on 09/09/2022 - 20:50

                @USER DC: Can you post your version of the script and we can have a look?

                • USER DC on 09/09/2022 - 21:19

                  @MrHyde: The problem giving bit is

                  <a tabindex="-1" href="#" role="button" class="comp largePlayBtn largePlayBtnBorder icon-play" style="display: block;" aria-label="Play clip" data-order="1" data-plugin-name="largePlayBtn"></a>

                  Here's the code https://i.imgur.com/BqvaNQu.png

                  <div class="ytp-cued-thumbnail-overlay" style="" data-layer="4">
                  <div class="ytp-cued-thumbnail-overlay-image" style="background-image: url(&quot;https://i.ytimg.com/vi_webp/wsG1_wahKVc/maxresdefault.webp&quot;);"></div>
                  <button class="ytp-large-play-button ytp-button ytp-large-play-button-red-bg" aria-label="Play">
                  <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
                  <path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path>
                  <path d="M 45,24 27,14 27,34" fill="#fff"></path>
                  </svg>
                  </button>
                  </div>

                  <a tabindex="-1" href="#" role="button" class="comp largePlayBtn largePlayBtnBorder icon-play" style="display: block;" aria-label="Play clip" data-order="1" data-plugin-name="largePlayBtn">
                  </a>

                  • c64 on 10/09/2022 - 11:36

                    @USER DC: in ublock origin from the element picker:

                    ##a[aria-label="Play clip"]

                    or in the filter list in the settings:

                    <the_domain>##a[aria-label="Play clip"]

                    • USER DC on 10/09/2022 - 20:10

                      @c64: Sadly doesn't do anything, unfortunately, the aria-label is not the problem, the problem is the class of that a, being "comp largePlayBtn largePlayBtnBorder icon-play"
                      tried putting stuff like
                      <the_domain>##a[class="icon-play"]

                      a[class="icon-play"]

                      Still no luck, the picture in picture extension from firefox is the best solution yet as of now

                      • c64 on 11/09/2022 - 12:03

                        @USER DC: you need to substitute the domain when adding a rule to the 'my filters' list
                        example.com##a[aria-label="Play clip"]

                        the element picker will automatically add the domain, so in the popup box you only need to type
                        ##a[aria-label="Play clip"]

                        matching the aria-label attribute is easiest in your example (or matching the data-plugin-name attribute)

                        the css selector a[class="icon-play"] will not match the class "comp largePlayBtn largePlayBtnBorder icon-play"

                        if you want to match a substring in you could use
                        ##a[class*="icon-play"]

                        https://www.w3schools.com/cssref/css_selectors.asp explains css selectors. you need to be careful that you only match the intended element. if a rule has undesired side effects you will need to refine it. ublock origin also supports rules other than css selectors

                        you can test using the element blocker or picker. right click on this page, select block element, type in the popup box
                        ##div[id="comment-12656145"]
                        and it will highlight a comment block to be hidden. since an id attribute is involved you could also use
                        ###comment-12656145

  • afoveht on 09/09/2022 - 16:07
    +1

    like maybe

  • USER DC on 09/09/2022 - 16:27

    Figured out just need to change class of the element once, and then afterwards doing anything like changing speed or pausing playing doesnt make the stupid icon to appear. any easy way now to auto change the class of that element?

  • brendanm on 09/09/2022 - 16:48

    Like, I'm sure there is, like, a way to do it. I would, like, try one of the, like, adblockers that, like, allows you to select certain elements and, like, block them.

    • USER DC on 09/09/2022 - 17:51

      they would block entire video player (not what i want), I just want to block/hide the play pause stupid icons that cause me to be unable to read text behind them
      but thanks

  • Indomietable on 10/09/2022 - 08:14

    Use ublock (ad blocker). They have a picker where you can use

  • [Deactivated] on 10/09/2022 - 08:53

    It's easier just to scrape the data you need and output it in the format you want. ETL 101

    The problem with certain websites is that they have their own js that likes to play with anyone who is tampering with the code in realtime. e.g. If you remove the play button it will collapse the whole playbox.

  • jollibot on 10/09/2022 - 10:48

    Just tried on Chrome and Firefox using uBlock Origin and it worked great.

Login or Join to leave a comment
Login Join