jquery - 如何使用 Greasemonkey 和 Jquery 隐藏具有特定类的 HTML 元素？

Question

这个news site (《卫报》)在页面右下角显示一个小框架，代码如下:

<div class="initially-off social-cta-overlay">

    <div class="social-cta-overlay-content"></div>

</div>

我隐藏了内部 div 的内部内容，因为它们并不重要。我编写了一个 Greasemonkey 脚本，它使用 JQuery 来隐藏此框，因为它出现在每个页面上:

// ==UserScript==
// @name        hide-guardian-ad
// @namespace   guardian
// @description Hides the Guardian social media frame
// @version     1
// @grant       none
// ==/UserScript==

// @require       http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js

$(".social-cta-overlay").hide()

我安装了脚本，但没有任何反应，盒子仍然在那里。

Answer 1

该脚本有 3 个问题(最严重的问题在前):

1. @require 指令位于 the metadata block 之外。这意味着 Greasemonkey 将其视为普通的 javascript 注释而忽略。
2. 没有 @include 或 @match 指令。这意味着该脚本将在每个站点的每个页面和 iframe 上触发! (使其中一些崩溃，并消耗资源。)
3. @grant none 表示 the script will interfere with and crash all or part of many sites .

此脚本有效:

// ==UserScript==
// @name        hide-guardian-ad
// @include     http://www.theguardian.com/*
// @description Hides the Guardian social media frame
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==

$(".social-cta-overlay").hide()