yinjg1997 commented 1 year ago

问题描述：

xxx.com是在body上搞了一层样式，达到全局的不可选中的效果，即：body.style = 'user-select: none !important;-webkit-user-select: none !important;' ，通过实验发现，无法使用脚本修改页面样式，也就是一旦修改样式就会被重新修改回去。

个人猜想应该是用了观察者，请问祖师爷，这种情况应该怎么破。

问题补充：

原谅我不放出网址，知道这样很蠢，但这个有些私密的性质，所以我在下面复现了问题页面，能否在此基础上解决该问题？或者给出一些思路，你是我最后的希望了~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>

    <!-- Local style -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html body {
            user-select: none !important;
            -webkit-user-select: none !important;
        }

        div {
            width: 400px;
            height: 200px;
            color: black;
        }
    </style>

</head>

<body>
    <div id="app">
        demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo
        demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo demo
    </div>
    <div>
        <button id="update">点击模拟浏览器扩展</button>
    </div>

</body>

<script>
    const body = document.getElementsByTagName('body')[0]
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
    const config = { attributes: true, childList: true, subtree: true, attributDataOldValue: true }
    // 创建MutationObserver实例，返回一个观察者对象
    const observer = new MutationObserver(function (mutationRecoard, observer) {
        // console.log(mutationRecoard)
        // console.log(observer)
        for (let mutation of mutationRecoard) {
            if (mutation.type === 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified. 已复原~');
                body.style.setProperty('user-select', 'none', 'important');
                body.style.setProperty('-webkit-user-select', 'none', 'important');
            }
        }

    })
    // 对观察者添加需要观察的元素，并设置需要观察元素的哪些方面
    observer.observe(body, config);

    // 模拟浏览器扩展对 body 进行操作
    const button = document.getElementById('update')
    button.addEventListener('click', function () {
        // 属性改变, 会被观察器抓到
        body.style.color = 'red';
        body.style = 'user-select: auto !important;-webkit-user-select: auto !important;'
    })

</script>
</html>

WindRunnerMax commented 1 year ago

我建议你换个思路，css是有优先级的，你没有必要去抹掉原来的内容

yinjg1997 commented 1 year ago

一个不是问题的问题

最后发现, 在那个文档只有第一页脚本会出现这个问题,

在其他页面中, 都可解决~

WindRunnerMax commented 1 year ago

我刚才拿你的demo跑了跑试了试，发现我也没成功解决这个问题，尴尬

WindRunnerMax commented 1 year ago

单论这个问题来说的话，我目前只能想到一个办法是进入一个“复制模式”，只保留最基本的 DOM ，类似于:

document.body = document.body.cloneNode(true)

这个问题确实难倒我了，需要点灵感哈哈哈

yinjg1997 commented 1 year ago

单论这个问题来说的话，我目前只能想到一个办法是进入一个“复制模式”，只保留最基本的 DOM ，类似于:
document.body = document.body.cloneNode(true)
这个问题确实难倒我了，需要点灵感哈哈哈

这个东西还挺有意思的吧, 哈哈哈

WindRunnerMax commented 1 year ago

单论这个问题来说的话，我目前只能想到一个办法是进入一个“复制模式”，只保留最基本的 DOM ，类似于:
document.body = document.body.cloneNode(true)
这个问题确实难倒我了，需要点灵感哈哈哈
这个东西还挺有意思的吧, 哈哈哈

确实有意思，也确实难倒我了哈哈哈哈

WindRunnerMax / TKScript

基于全局user-select:none和观察者的复制禁用怎么破？ #96

问题描述：

问题补充：

一个不是问题的问题