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

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 ?

Comments

  • +1

    Yes

    • would you mind sharing how?

      • 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

        • 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.

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

        • 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

  • +3

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

    • +3

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

      • Something for the OP to learn :)

        • 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.

          • @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

            • @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

              • @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

          • @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…

            • @MrHyde: it doesn't work at all unfortunately

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

                • @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>

                  • @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"]

                    • @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

                      • @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

  • +1

    like maybe

  • 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?

  • 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.

    • 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

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

  • 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.

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

Login or Join to leave a comment