Safari 中简书登录框屏蔽

背景

在[[借助腾讯混元助手屏蔽简书登录框]]中已经实现了Chrome 中屏蔽简书登陆框、右侧热门、左侧点赞、以及底部推荐。然后我用Userscripts 在 Safari 中使用了一下，发现登陆框并不能屏蔽掉，所以这里再补充下，如果在 Safari 中移除简书登陆框。

实现

排查原因

首先，回顾一下：在 Chrome 中是如何移除登录框的？通过移除class="__copy-button"的 div 后面新增 div 的来移除，即使用class="__copy-button"作为锚点来定位，但是在 Safari 中，查看源代码可以看到，并没有这个class="__copy-button"的 div，所以导致了移除失败。

这让我突然意识到，class="__copy-button"这个可能不是简书源代码中的东西，而是Tampermonkey中使用了某个脚本导致的，而在 Safari中，缺失了这个脚本，所以没有这个东西。验证如下：

— ｜ —

所以，选用class="__copy-button"作为锚点时错误的，应该换一种方法实现。

仔细观察源代码后，发现，新增的登录弹窗的 div 是在 body 中新增的，且其中子 div 的子 div 有class="_23ISFX-mask"的 div，所以用这个作为判断逻辑，询问腾讯混元助手：使用 js写一个暴力猴脚本，当 body 中有新增 maskDiv 时，且新增 maskDiv 的子 div的子 div 包含class="_23ISFX-mask"的div时，移除maskDiv，如下图所示：

然后将代码添加到 Userscripts，并验证， 对比效果如下：

— | —

可以看到，在 Safari 中登录弹出也移除了，所以最终完整版的代码应如下所示：

// ==UserScript==
// @name         简书登录弹窗、推荐、侧边移除
// @namespace    http://www.jianshu.com/
// @version      2024-04-24
// @description  remove jianshu login alert
// @author       morgan
// @match      	 *://*.jianshu.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=jianshu.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const rootStyle = document.createElement('style');
    rootStyle.textContent = `
        :root {
            --antd-wave-shadow-color: unset !important;
        }
    `;
    document.head.appendChild(rootStyle);
    
    // 移除登录弹窗
    
    // 登录弹窗-半透明背景移除
    const targetStyle = "overflow: hidden;";
    const newStyle = "none";
    const styleObserver = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                const bodyStyle = document.body.getAttribute('style');
                if (bodyStyle === targetStyle) {
                    document.body.setAttribute('style', newStyle);
                }
            }
        });
    });
    styleObserver.observe(document.body, { attributes: true });
    
    // 登录弹窗移除
    const targetDivClass = "_23ISFX-mask";
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                mutation.addedNodes.forEach((node) => {
                    if (node.nodeType === 1 && node.tagName.toLowerCase() === 'div') {
                        const grandchildDiv = node.querySelector(`div div.${targetDivClass}`);
                        if (grandchildDiv) {
                            node.remove();
                        }
                    }
                });
            }
        });
    });
    observer.observe(document.body, { childList: true, subtree: true });

    // 移除推荐
    // const recommendClass = "ouvJEz";
    // const sections = document.querySelectorAll(`section.${recommendClass}`);
    // if (sections.length >= 2) {
    //    setTimeout(() => {
    //        sections[1].remove();
    //    }, 1000);
    // }

    // 移除推荐方法二
    setTimeout(() => {
        const targetDivId = "note-page-comment";
        const targetDivClass = "adad_container";
        const targetSectionClass = "ouvJEz";

        const targetDiv = document.getElementById(targetDivId);
        const div = targetDiv ? targetDiv.previousElementSibling : null;
        const section = div ? div.previousElementSibling : null;

        if (div && div.classList.contains(targetDivClass) && section && section.classList.contains(targetSectionClass)) {
            div.remove();
            section.remove();
        }
    }, 500);

    // 移除右侧
    const asideClass = "_2OwGUo";
    const aside = document.querySelector(`aside.${asideClass}`);
    if (aside) {
       setTimeout(() => {
           aside.remove();
       }, 500);
    }

    // 移除左侧点赞、手机查看部分
    const leftAnnoyClass = "_3Pnjry";
    const leftAnnoy = document.querySelector(`div.${leftAnnoyClass}`);
    if (leftAnnoy) {
        setTimeout(() => {
            leftAnnoy.remove();
        }, 500);
    }
})();