Webannoyances: Suggested filters for multiple websites

[RedDragonWebDesign]

I'm happy to make a pull request for these so you don't have to do as much work. Just wanted to run them by you first.

Floating Stuff - Ready To Add

! floating toolbar
! https://jestjs.io/
jestjs.io##.fixedHeaderContainer:style(position: absolute !important;)

! floating toolbar
! https://www.itpro.co.uk/microsoft-windows/34535/powershell-vs-cmd-unlocking-the-power-of-windows
itpro.co.uk###header:style(position: relative !important; width: 100% !important;)

! floating toolbar
! https://yarnpkg.com/
yarnpkg.com##.css-1iw4wyv.e11px6xy0:style(position: relative !important;)

! floating banner ad
! https://www.sitepoint.com/understanding-module-exports-exports-node-js/
sitepoint.com##[role="smartbar"]

! floating toolbar
! https://www.wordpill.com/principal-appl-developer-front-end/pasadena-ca-jobs/003rg1rviqyqdmzz
wordpill.com##.navbar:style(position: absolute !important;)

! floating toolbar
! https://understrap.com/
understrap.com###wrapper-navbar:style(position: absolute !important;)

! sales questions floating thing
! https://understrap.com/
understrap.com/img/us-live-chat-banner.png

! "don't forget to vote" nag floating banner
! https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
askubuntu.com,serverfault.com,stackexchange.com,stackoverflow.com,superuser.com###overlay-header

! floating "consider disabling your ad blocker"
! https://regexr.com/
regexr.com##.noad

! floating ? button
! https://docs.presscustomizr.com/article/204-how-to-create-multilevel-hierarchical-menus-in-wordpress
presscustomizr.com###beacon-container

! floating header
! https://www.newsbreak.com/news/0PSkmf67/newsom-orders-bars-closed-in-7-california-counties-including-la-due-to-coronavirus-spread?s=oldSite&ss=a99
newsbreak.com##[class^=DefaultNav_navWrapper]:style(position: absolute !important;)

! floating header
! https://tipue.com/blog/contenteditable/
tipue.com###head:style(position: absolute !important;)

! floating header
! http://help.dottoro.com/ljcvonpc.php
dottoro.com##.headers:style(position: absolute !important;)

! floating toolbar
! https://snipcart.com/blog/learn-typescript-why-use-ts
snipcart.com##.ud-nav:style(position: absolute !important;)

Floating Stuff - Requesting Help

I was unable to write good filters for these. Any help would be appreciated.

! https://www.cloudflare.com/
! TODO - click on a submenu such as "Products", the background should be white, instead it is transparent
! DELETE - cloudflare.com##.desktop-nav, .topnav:style(background-color: transparent !important; border-bottom: none !important;)
! TODO - get rid of "Watch Now" blue banner at the top

! modal ad, "need help" floating button, floating toolbar, "someone started buying" floating nag
! https://solgaard.co/products/carry-on-closet?variant=341234581508

! floating toolbar
! https://toastlog.com/

! floating header
! https://ckeditor.com/blog/ContentEditable-The-Good-the-Bad-and-the-Ugly/

! floating toolbar
! https://www.protechtraining.com/blog/post/using-the-html5-attribute-contenteditable-to-create-a-wysiwyg-369

! Google exploding and floating login box
! https://medium.com/@abustamam/for-loops-vs-foreach-in-javascript-7a977278a39e
! https://www.redfin.com/
! Need to block ###credential_picker_container on all domains (generic rule), but not permanently because clicking the "login" button needs to pop it up. Just need to block it from being open when the page first loads.

Inline Ads

Happy to include these if they are a good fit for the project. These are little ads and annoyances that I encountered that are inline rather than floating. If we do use them, which filter list should I put them in?

! carousel type ad on right
! https://memory-alpha.fandom.com/wiki/Ketracel-white
fandom.com###WikiaAdInContentPlaceHolder

! inline - related
! https://www.howtogeek.com/163127/how-powershell-differs-from-the-windows-command-prompt/
howtogeek.com##.entry-content p:-abp-has(strong:-abp-contains(RELATED:))

! inline - % off ad
hostinger.com#?##post div:-abp-has(div p:-abp-contains(% OFF))

! inline - newsletter signup
! https://www.itpro.co.uk/microsoft-windows/34535/powershell-vs-cmd-unlocking-the-power-of-windows
itpro.co.uk##.polaris__newsletter:style(display: none !important;)

! inline - banner ad
! https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/
##.wpbthumb

! bottom left ad
! https://jsfiddle.net/AdmiralAkbar2/15bvych9/20/
jsfiddle.net###s-bottom

! banner ad
! https://finance.yahoo.com/quote/SPY/
finance.yahoo.com###mrt-node-Lead-2-FeatureBar

! ally bank inline tips & messages & notifications
! https://secure.ally.com/dashboard
secure.ally.com##.tips--collection
secure.ally.com##.accounts-card-mbox-footer
secure.ally.com##.action-bar-content--notifications-container

Thanks

[yourduskquibbles]

Thanks I will go through today and suggest any changes to filters. If you prefer, feel free to submit a PR, no need to be shy I can also review and post comments on the PR.

[yourduskquibbles]

@GeneralKenobi1 Here are some suggestions on the ones you requested help on - do you want me to just commit these and you can open a PR for the others or do you prefer to test these and then include them in your PR?

Floating Stuff - Requesting Help

! https://www.cloudflare.com/
! TODO - click on a submenu such as "Products", the background should be white, instead it is transparent
! DELETE - cloudflare.com##.desktop-nav, .topnav:style(background-color: transparent !important; border-bottom: none !important;)
! TODO - get rid of "Watch Now" blue banner at the top

Suggested
! Add to CSS Style List
cloudflare.com##.cms-topnav.topnav.top-nav.js-top-nav.nav-padding-framework, .desktop-nav.nav-dropdown.nav-padding-framework:style(margin-top: unset !important;)
cloudflare.com##.desktop-nav__container.open:style(background: #fff !important;)
cloudflare.com##.desktop-nav:style(position: absolute !important;)
cloudflare.com##.topnav:style(position: static !important;)

! remove from CSS Style List
cloudflare.com##.desktop-nav, .topnav:style(background-color: transparent !important; border-bottom: none !important;)
cloudflare.com##.desktop-nav, .topnav:style(position: absolute !important;)

You can test these removals by temporarily adding these over ride filters to My Filters
cloudflare.com#@#.desktop-nav, .topnav:style(background-color: transparent !important; border-bottom: none !important;)
cloudflare.com#@#.desktop-nav, .topnav:style(position: absolute !important;)

! CSS Companion List
I'm not sure on adding this one to the list, I think its worth keeping the banner user cans till click the x if they want to close the bar, with other CSS updates this appears below the top bar so less obnoxious now though

cloudflare.com##.meerkat-banner--opened.bg-builtforthisDarkBlue.js-meerkat-banner-top.top-banner-framework

! modal ad, "need help" floating button, floating toolbar, "someone started buying" floating nag
! https://solgaard.co/products/carry-on-closet?variant=341234581508

Suggested:
! CSS Style List
solgaard.co##.header__wrapper.fixed:style(position: absolute !important;)
solgaard.co##.info-bar:style(animation: none !important;)
solgaard.co##.site-header--hidden, .info-bar--hidden:style(display: block !important; animation: none !important;)

! CSS Companion List
solgaard.co##.in.fixed.header--product

! modal list
solgaard.co##.mfp-bg, .mfp-wrap
solgaard.co##html:style(overflow-x: hidden !important; overflow-y: scroll !important; margin-right: 0 !important;)

! floating toolbar
! https://toastlog.com/

Suggested:
! CSS Style Filters List
toastlog.com##header:style(position: absolute !important; top: 50px !important; padding: 0 5% !important; width: 100% !important; border-bottom: none !important;)
toastlog.com##header a:style(display: initial !important;)
toastlog.com##.logo-wrapper img:style(width: 60px !important; height: 60px !important;)

! floating header
! https://ckeditor.com/blog/ContentEditable-The-Good-the-Bad-and-the-Ugly/

Suggested:
! CSS Style Filters List
ckeditor.com##.menu:style(position: absolute !important; top: 1rem !important; border-bottom: none !important; animation: none !important;)
ckeditor.com##.menu--tiny .menu__page-title a:style(font-size: 2.4rem !important;)
ckeditor.com##.site-nav:style(position: absolute !important;)

! modal list
ckeditor.com##.progress-bar

! floating toolbar
! https://www.protechtraining.com/blog/post/using-the-html5-attribute-contenteditable-to-create-a-wysiwyg-369

Suggested:
! CSS Style Filters List
protechtraining.com###header.navbar, .navbar-fixed-top:style(position: static !important;)
protechtraining.com##body:style(padding-top: 0 !important;)

! Google exploding and floating login box
! https://medium.com/@abustamam/for-loops-vs-foreach-in-javascript-7a977278a39e

Suggested:
! modal list?
||accounts.google.com/gsi/client$script,domain=medium.com

But not sure i want to add this as it would block legitimate login attempts I believe. Note: The floating box only appears for me on Chrome, not firefox although the script is loaded on both.

! https://www.redfin.com/
! Need to block ###credential_picker_container on all domains (generic rule), but not permanently because clicking the "login" button needs to pop it up. Just need to block it from being open when the page first loads.

I can't recreate this one

[llacb47]

||accounts.google.com/gsi/$~script hides the ###credential_picker_container but doesn't break manual login with google on redfin.

[RedDragonWebDesign]

@yourduskquibbles Thank you for the detailed reply. I will study your code carefully and learn as much as I can. I'll go ahead and make a pull request once I process all this, hopefully that is less work for you.

[yourduskquibbles]

@GeneralKenobi1 PR works for me. It's fun for me to help others learn the ways of creating filters

[RedDragonWebDesign]

||accounts.google.com/gsi/$~script hides the ###credential_picker_container but doesn't break manual login with google on redfin.

This is good thinking, but I tried it just now, and blocking it signed me out of Google Chrome account sync. Collateral damage, whoops.

RedFin looks like they redid their website recently and got rid of the Google floating login nag thing.

Medium also looks like they redid their website. Now ###credential_picker_container is just used for the nag, and isn't used at all if you hit the regular login button, so it should be safe to block it. I'll submit medium.com###credential_picker_container in a future pull request.

[llacb47]

This is good thinking, but I tried it just now, and blocking it signed me out of Google Chrome account sync. Collateral damage, whoops.

There is no way my filter could cause that.

RedFin looks like they redid their website recently and got rid of the Google floating login nag thing.

You are totally wrong. It's still there.

I'll submit medium.com###credential_picker_container in a future pull request.

This is used on thousands of sites, so your filter is not useful.

https://developers.google.com/identity/one-tap/web/
https://publicwww.com/websites/%22GoogleOneTap%22/
https://publicwww.com/websites/%22Google_one_tap%22/
https://publicwww.com/websites/%22hideGoogleOneTap%22/

[RedDragonWebDesign]

You're probably right. I can't reproduce the browser logout error (just tried), and the Redfin login box is back for me.

If you guys feel comfortable with the filter ||accounts.google.com/gsi/$~script, happy to make a pull request to add it to... I guess the Generic Filters list, since it affects a lot of websites.

[yourduskquibbles]

Reopening issue until @GeneralKenobi1 is able to submit PR for other sites suggested.

[yourduskquibbles]

If you guys feel comfortable with the filter ||accounts.google.com/gsi/$~script, happy to make a pull request to add it to... I guess the Generic Filters list, since it affects a lot of websites.

I'm OK with it as I find the signin with google box annoying myself. Would like to test it on some known domains that use it first though to make sure it doesn't break workflows for people that want to sign in using Google though. Do you happen to have any other test sites? I know I've seen it on a few sites but don't recall off the top of my head what domains use it especially since I infrequently use chrome nowadays

[RedDragonWebDesign]

@yourduskquibbles Here are some websites to test. I'll keep adding to this list as I find them.

http://www.redfin.com/
http://www.medium.com/
http://www.quora.com/
https://fsastore.com/
http://www.pinterest.com/
http://www.ebay.com/
http://www.linkedin.com/
https://quizlet.com/

[yourduskquibbles]

@yourduskquibbles Here are some websites to test. I'll keep adding to this list as I find them.

http://www.redfin.com/
http://www.medium.com/
http://www.quora.com/
https://fsastore.com/
http://www.pinterest.com/
http://www.ebay.com/
http://www.linkedin.com/
https://quizlet.com/

@RedDragonWebDesign I feel comfortable enough now with adding your suggested filter ||accounts.google.com/gsi/$~script and will publish this addition shortly

[RedDragonWebDesign]

All credit goes to @llacb47 for the filter. He wrote it : )

[yourduskquibbles]

I am going to slightly update the filter to ||accounts.google.com/gsi/*$script,3p so it only gets applied when on a 3rd party (non google.com domain. My thinking this would hopefully minimize any chance of collateral breakage that could happen within a google.com domain/subdomain.

[llacb47]

I am going to slightly update the filter to ||accounts.google.com/gsi/*$script,3p so it only gets applied when on a 3rd party (non google.com domain. My thinking this would hopefully minimize any chance of collateral breakage that could happen within a google.com domain/subdomain.

No, that breaks redfin.com login, the whole reason I excluded scripts

Edit: never mind. It used to though ??

[yourduskquibbles]

No, that breaks redfin.com login, the whole reason I excluded scripts
Edit: never mind. It used to though ??

Confirmed that it doesn't for me, and was even able to click Sign Up button and then create a new user account on redfin.com through Continue with Google button and create a new account with ||accounts.google.com/gsi/*$script,3p in My Filters

[RedDragonWebDesign]

Looks like the google.com filter we were waiting on got committed. We can probably close this ticket.

[RedDragonWebDesign]

Actually, that Google filter is not fully working for me. I still get the log in pop out on LinkedIn, when using Chrome for PC, when logged out of LinkedIn.

https://www.linkedin.com/home

[yourduskquibbles]

Actually, that Google filter is not fully working for me. I still get the log in pop out on LinkedIn, when using Chrome for PC, when logged out of LinkedIn.

https://www.linkedin.com/home

Updating filter from ||accounts.google.com/gsi/*$script,3p to ||accounts.google.com/gsi/*$xhr,script,3p fixes this since its being loaded on linkedin.com with an xhr request.

[yourduskquibbles]

Closing as solved for now, thanks for updated testing!