前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Safari 中简书登录框屏蔽

Safari 中简书登录框屏蔽

原创
作者头像
莫空9081
发布2024-05-03 15:11:28
1850
发布2024-05-03 15:11:28

背景

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

<! --more-->

实现

排查原因

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

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

--- | ---

可以看到是"文本选中复制"这个脚本导致了class="__copy-button的出现,所以,选用class="__copy-button"作为锚点是错误的,应该换一种方法实现。

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

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

--- | ---

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

代码语言:js
复制
// ==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);
    }
})();

完整代码已放在:RemoveJianshuAnnoying

我正在参与2024腾讯技术创作特训营最新征文,快来和我瓜分大奖!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 实现
    • 排查原因
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档