khromov/clarity

Ad blocker for WordPress

👋 Hello, my name is Stanislav Khromov

I am a full-stack web developer from 🇸🇪 Stockholm, Sweden.

• 🔭 Working as a software engineer at Schibsted Media Group.
• 👨‍💻️ Working with JavaScript / TypeScript, React, Svelte as well as modern PHP and WordPress.
• 👪 Co-organizer of WordCamp Stockholm and the WordPress Stockholm Meetup group.
• 💭 Currently learning about ☁️ Serverless architecture, 🔶 Amazon Web Services and 🔴 Svelte.
• 🌱 Building Appreciation Jar
• 📫 Reach me via the email in my GitHub profile.

📕 Latest blog posts

• My failed attempt at cross-publishing blog posts to dev.to
• Building a smart kitchen display using a Raspberry Pi
• The Comprehensive Guide to Locals in SvelteKit
• The Power of Constraints: Why Less is More in Social Media
• The missing guide to understanding adapter-static in SvelteKit

🌱 Recent courses I've taken

• Capacitor Crash Course - Ionic Academy
• SvelteKit - LevelUpTuts
• CSS for JavaScript Developers

🔗 Links

• Website
• Snippets blog
• Twitter

clarity's Issues

Plugin/Theme name:

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://wordpress.org/plugins/bold-timeline-lite/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?
All of the time, on ever page load

Do you have a proposed CSS rule that could hide this nag?
No

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Plugin/Theme name: Filebird

Which plugin is this concerning? - Filebird
(https://wordpress.org/plugins/filebird/)

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• [ x] Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
div#njt-FileBird-review

CSS selector output doesn't seem to be working properly

Describe the bug
I activated the plugin, and it didn't seem to be blocking anything. I did some sniffing and deduced that WP_Clarity->getDefinitions() doesn't seem to be doing what it's supposed to. If I debug line 61, it doesn't actually give me a list of selectors, it seems to return the whole contents of defenitions.txt

The expected output, would be a comma separated selector list appended by the { display: none!important }. The actual output isn't a valid css selector, and thus doesn't block any popups.

<style type="text/css">
      -- Yoast premium nags
.wpseo_content_wrapper #sidebar-container
.yoast_premium_upsell
#wpseo-local-seo-upsell
.yoast-settings-section-upsell

-- Better WordPress ReCAPTCHA
#bwp-get-social
.bwp-button-paypal
#bwp-sidebar-right

-- TJ Custom CSS
.tjcc-custom-css #postbox-container-1

-- CBX Custom Taxonomy Filter
.settings_page_wpcustomtaxfilterinadmin #postbox-container-1

-- Duplicate Posts
.settings_page_duplicatepost #wpbody-content .wrap > div

-- TODO: :above: look over

-- WPS Hide Login
div[id^="dnh-wrm"]

-- Ad Inserter
.notice-info.dst-notice

-- googleanalytics
#googleanalytics_terms_notice

-- Unyson
.fw-brz-dismiss

-- Elementor
div.elementor-message[data-notice_id="elementor_dev_promote"]

-- Redirection for Contact Form 7
.notice-success.wpcf7r-notice

-- Disable Comments
.dc-text__block.disable__comment__alert

-- Admin Menu Editor
#ws_sidebar_pro_ad

-- Premium Addons for Elementor
.pa-new-feature-notice

-- Redux
#redux-connect-message

-- Smush
.frash-notice-email

-- Easy Updates Manager
#easy-updates-manager-dashnotice

-- Metaslider
#metaslider-optin-notice
#extendifysdk_announcement
.updraft-ad-container

-- WP User Avatar "recommends" MailOption
.mo-admin-notice

-- post-smtp-donation
.post-smtp-donation

-- Widget Area Block
div[data-dismissible="notice-owa-sale-forever"]

-- Themeisle Companion
.neve-notice-upsell

-- Pagelayer Pro promo
#pagelayer_promo

-- Simple Custom Post Order rate nag
#simple-custom-post-order-epsilon-review-notice

-- Ultimate Social Media icons nags in various places
.sfsi_new_prmium_follw

-- The Events Calendar analytics nag
div.fs-slug-the-events-calendar[data-id="connect_account"]

-- WebP Converter for Media
div.notice[data-notice="webp-converter-for-media"]
.webpLoader__popup.webpPopup

-- Generic "Plugin Usage Tracker" class
.put-dismiss-notice

-- WP Mail SMTP
.wp-mail-smtp-review-notice
#wp-mail-smtp-pro-banner

-- Hopefully most Freemius ads
body div.promotion.fs-notice

-- Analytify
.analytify-review-thumbnail

-- Jetpack
.jitm-banner.is-upgrade-premium

-- Webcraftic Local Google Analytics
div[data-name*="wbcr_factory_notice_adverts"]

-- Forminator
.sui-subscription-notice
#sui-cross-sell-footer
.sui-cross-sell-modules {
        display: none !important;
      }
    </style>

To Reproduce
Activate the plugin and look at the style block in devtools

Screenshots

Information

• WordPress version: 5.9
• Clarity version: 1.2.220216
• Currently active theme: Custom

Erident Custom Login and Dashboard

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Plugin/Theme name:

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]

https://wordpress.org/plugins/elementskit-lite/

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

I do not know when it appears for a new user. This has been on my site for years, but the ad showed up recently.

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

It is an image link: https://api.wpmet.com/auth/wp-content/uploads/2022/05/InPlugin-Banner-1.gif

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Plugin/Theme name:

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

TI WooCommerce Wishlist

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://wordpress.org/plugins/ti-woocommerce-wishlist/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
.tinvwl-admin-notice

Plugin/Theme name: MetForm Pro request

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://products.wpmet.com/metform/]

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]
.metform-unsupported-metform-pro-version

.wp-core-ui .notice.is-dismissible{
display: none;
}

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Ability to add own selectors without the need to re-build the definitions.php

Hi there,

Are you open for a PR that allows to add the ability to add your own definitions without the need to re-build the definitions.php.

Because currently wp_clarity_rules - which I'm using -, only runs after you built the plugin's definitions.php. And that logic just doesn't hold up because it gets overwritten with an plugin update.

And I don't want to run the command to generate the definitions after each deployment (manually or by hand).
Also, sometimes I can't run a wp-cli command.

It could be as simple as making $loadFromSource filterable on the line https://github.com/khromov/clarity/blob/master/clarity-ad-blocker.php#L37. Otherwise it would need a bit more work / rewrite.

Ciao,

Jaime

Plugin/Theme name: ExactMetrics Pro

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]

wordpress.org/plugins/google-analytics-dashboard-for-wp/

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• [ X] Other: (Please specify)

Immediately on LOGIN.

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

No.

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

BetterDocs

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://wordpress.org/plugins/betterdocs/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
.wpdeveloper-review-notice

Plugin/Theme name: Accordion

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• [Y ] Right away after installing the plugin
• [Always ] After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

WP GuppyPlugin/Theme name:

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Plugin/backup migration

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Plugin/Theme name: Smash Balloon Custom Facebook Feed

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://wordpress.org/plugins/custom-facebook-feed/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• [X ] Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
.cff_notice.cff_review_notice_step_1
.cff_get_pro_highlight
.cff-notice-alert

• THANK YOU SO MUCH!

Plugin/Theme name: Pretty Links

[Which plugin is this concerning?] - Please include a link to the listing page on WordPress.org (https://ru.wordpress.org/plugins/pretty-link/)
[e.g https://wordpress.org/plugins/wordpress-seo/]

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• [ V] Other: (Please specify) Always

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad] #prli_review_notice

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Plugin/Theme name: PWA — easy way to Progressive Web App

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://wordpress.org/plugins/iworks-pwa/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
.notice-iworks-rate

Plugin/Theme name: Tabs Responsive

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://wordpress.org/plugins/tabs-responsive/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
.wpsm_ac_h_i

Updraft Backup Options on Updates Screen

The .updraft-ad-container class is used by Updraft on the Updates screen. Having it in the block list disables the ability to change backup options when updating.

https://github.com/khromov/clarity/blob/master/definitions.txt#L63

Admin Columns

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]
https://wordpress.org/plugins/codepress-admin-columns/

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)
  Article + wheel parameter for column

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Plugin/Theme name: WooCommerce Direct Checkout plugin & Direct Checkout plugin

https://quadlayers.com/portfolio/woocommerce-direct-checkout/?utm_source=aco_admin
https://quadlayers.com/portfolio/woocommerce-direct-checkout/?utm_source=wooccm_admin
Both ads are on wp-admin for my site

Always shows in wp admin Dashboard. Closing the ad does not make it stay away.

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Plugin/Theme name: Smash Balloon Social Post Feed

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://wordpress.org/plugins/custom-facebook-feed/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin

Do you have a proposed CSS rule that could hide this nag?
.cff-settings-cta

Plugin/Theme name:

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://www.exactmetrics.com/ (They do not have a page on wordpress.org that I could find.)

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• [ X] Other: (Please specify)

These "informative messages" (advertisements) appear on the Dashboard as soon as you login. They are constant with this plugin (there were over 20 in 5 days! And each must be manually dismissed) -- and there are so many they sometimes cover up the entire right side of the screen.

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

Here is the CSS rule that covers these popups.

.exactmetrics-tracking-notice p {

font-size: 12px;
color: #7f7f7f;
font-weight: 400;
margin: 0;
padding: 0;
line-height: 1.2;
border: none;

}

Plugin/Theme name: The Ocean Core Extensions Bundle

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Members – Membership & User Role Editor Plugin

https://fr.wordpress.org/plugins/members/

When does the nag appear?
All the time in admin pages

Do you have a proposed CSS rule that could hide this nag?
.members-review-notice.is-dismissible.notice-info.notice

ALD – Aliexpress Dropshipping and Fulfillment for WooCommerce

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Plugin/Theme name:

Do you have a proposed CSS rule that could hide this nag?
Propose the following to definitions.txt
--Woocommerce Checkout Field Editor
.thwcfd-review-wrapper

--Premmerce WooCommerce Product Filter Premium
.woo-permalink-manager-banner

-- Cartbounty
.cartbounty-notification

Plugin/Theme name: Eco Nature WordPress Theme

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• [X ] Right away after installing the plugin
  The worst part is I actually bought the pro version of this theme and now it wants me to buy the bundle.

Do you have a proposed CSS rule that could hide this nag?

Yoast SEO

[Which plugin is this concerning? - Please include a link to the listing page on WordPress.org

https://fr.wordpress.org/plugins/wordpress-seo/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• After some time - 24hrs, 7 days, etc.

Do you have a proposed CSS rule that could hide this nag?
.is-dismissible.notice-warning.notice.yoast-notification

Plugin/Theme name:

Which plugin is this concerning?
https://wordpress.org/plugins/duplicate-post/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin

Do you have a proposed CSS rule that could hide this nag?
#duplicate-post-notice

Accessibility Checker

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://wordpress.org/plugins/accessibility-checker/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: You can also dismiss it and it comes back the next time you refresh the page or go to a new page. All notices for upgrades, deals, etc come this way and exhibit the same properties - dismiss it and it returns on page refresh/new page. Also, my site is not password protected (only one post is), but this notice remains.

Do you have a proposed CSS rule that could hide this nag?
.wp-core-ui .notice.is-dismissible {
display: none;
}

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Smush

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://wordpress.org/plugins/wp-smushit/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
There is already an entry for smush email notices.

-- Smush
.frash-notice-email

I propose we add an additional rule for the "rating" prompt

.frash-notice-rate

Plugin/Theme name: Variation Swatches for WooCommerce

Which plugin is this concerning?
https://wordpress.org/plugins/product-variation-swatches-for-woocommerce/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
#thwvsf_review_request_notice

Plugin/Theme name: Slider, Gallery, and Carousel by MetaSlider

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://wordpress.org/plugins/ml-slider/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
.ml-discount-ad

ManageWP or GoDaddy Pro dashboard

ManageWP or GoDaddy Pro dashboard

Plugin/Theme name: AnWP Post Grid and Post Carousel Slider for Elementor

Which plugin is this concerning?

AnWP Post Grid and Post Carousel Slider for Elementor
https://fr.wordpress.org/plugins/anwp-post-grid-for-elementor/

When does the nag appear?
All the time in admin pages

Do you have a proposed CSS rule that could hide this nag?
.anwp-post-grid__rate.notice-info.notice

InvoiceXpress for WooCommerce / Shaka Theme

Which plugin is this concerning? : https://wordpress.org/plugins/woo-billing-with-invoicexpress/#:~:text=%E2%80%9CInvoicing%20with%20InvoiceXpress%20for%20WooCommerce,via%20email%20to%20the%20client.

(https://photos.app.goo.gl/yRRKNotqUPSZ3r3h8)

When does the nag appear?
always shows up event after closing

Do you have a proposed CSS rule that could hide this nag?
no
*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)

Yoast Duplicate Post

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
https://wordpress.org/plugins/duplicate-post/

Upload a screenshot from your WordPress admin where the nag is clearly visible

When does the nag appear?

• Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (I think it might appear when an update has been installed)

Do you have a proposed CSS rule that could hide this nag?
#duplicate-post-notice

Not sure what other notices might use the id #duplicate-post-notice, there isn't a class that's specific to this call to action.

BackupGuardPro

Which plugin is this concerning? - Please include a link to the listing page on WordPress.org
[e.g https://wordpress.org/plugins/wordpress-seo/]

Upload a screenshot from your WordPress admin where the nag is clearly visible
(Drag an image here to upload it)

When does the nag appear?

• [ x] Right away after installing the plugin
• After some time - 24hrs, 7 days, etc.
• Other: (Please specify)

Do you have a proposed CSS rule that could hide this nag?
[e.g #ws_sidebar_pro_ad]

*(You can usually find the associated CSS by right-clicking the notification bar in your browser and selecting "Inspect element".)