阻止etsy上广告的Greasemonkey脚本

Question

我试图屏蔽etsy上的广告，因为它们使得搜索要购买的商品变得很困难，我发现广告的类别总是以“js-merch-stash-check-listingv2-listing”开头

我的尝试是：

// ==UserScript==
// @name        Etsy Ad blocker
// @description Etsy Ad blocker
// @include     https://*.etsy.com/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==

$(".js-merch-stash-check-listing v2-listing-card*").hide()

请帮帮忙。

Answer 1

以下是您可以使用的一些示例：

注意：使用更健壮的@match而不是@include

使用JavaScript删除项目

这样，项目会在脚本运行时被删除，但新的项目不会受到影响。

注意：使用纯JavaScript，不需要额外的库。

// ==UserScript==
// @name            Etsy Ad blocker
// @description     Etsy Ad blocker
// @match           https://*.etsy.com/*
// ==/UserScript==

document.querySelectorAll('.js-merch-stash-check-listing.v2-listing-card').forEach(item => 
                item.style.display = 'none');

使用CSS删除项目

CSS规则保持活动状态，并且也适用于之后创建的项目，因此建议使用CSS规则。

注意： Greasemonkey 4不支持GM.addStyle/GM_addStyle。

// ==UserScript==
// @name            Etsy Ad blocker
// @description     Etsy Ad blocker
// @match           https://*.etsy.com/*
// @run-at          document-start
// ==/UserScript==

const node = document.createElement('style');
node.textContent = 
`.js-merch-stash-check-listing.v2-listing-card {
  display: none;
}`;
(document.head || document.body).appendChild(node);

通过Violentmonkey，Tampermonkey，FireMonkey或Greasemonkey 3，您可以使用GM_addStyle。

// ==UserScript==
// @name            Etsy Ad blocker
// @description     Etsy Ad blocker
// @match           https://*.etsy.com/*
// @run-at          document-start
// @grant           GM_addStyle
// ==/UserScript==

GM_addStyle(
`.js-merch-stash-check-listing.v2-listing-card {
  display: none;
}`);

使用FireMonkey，您还可以更高效地使用UserCSS。

/*
==UserCSS==
@name            Etsy Ad blocker
@description     Etsy Ad blocker
@match           https://*.etsy.com/*
==/UserCSS==
*/

.js-merch-stash-check-listing.v2-listing-card {
  display: none;
}