复制网页上的任意内容以及用油猴脚本实现免登录一键复制

低头专研

已于 2024-12-05 15:46:21 修改

阅读量1.6k

点赞数 36

文章标签： javascript 前端油猴脚本复制网页内容一键复制免登录复制解除网页复制限制

于 2024-12-04 22:01:30 首次发布

本文链接：https://blog.csdn.net/qq_43535992/article/details/144248674

版权

文章目录

1. 介绍
2. 原理
3. 实操1：利用控制台运行代码实现复制
- 3.1. 前提
- 3.2. 开始复制
4. 实操2：通过界面操作
5. 扩展
- 5.1. 想复制网页结构？
- 5.2. 不想打开控制台？
6. 某金免登录一键复制油猴脚本

1. 介绍

阻止用户自由复制的方式有很多种，对应的，解除这类限制的方式也有很多种。

我这里只介绍一种方法，但会介绍它的两种使用途径。只要是你有权限查看的网页的内容，它都可以被复制下来。

2. 原理

其实就是复制网页元素的 innerText 这个属性的值。另外需要说明的是，这都是在浏览器的开发者工具中来操作的。

你在测试我提供的方法的时候，完全可以直接复制这篇文章的链接，然后使用浏览器快捷键 Ctrl + Shift + N 打开浏览器的隐私模式，并在隐私模式中访问这篇文章，并尝试复制下面我提供的测试代码。因为这个时候，你是处于未登录 CSDN 的状态。默认情况是无法进行复制的。

在这里插入图片描述

请在未登录状态下尝试复制下面的代码：

font.notranslate>font>font {
    display: block;
    color: blue;
    background-color: aqua;
    padding: 10px;
    border-radius: 7px;
}

3. 实操1：利用控制台运行代码实现复制

3.1. 前提

首先，打开浏览器的开发者工具，打开的方式有很多，除了用鼠标右键来打开外，还可以使用下面的快捷键：

F12 ：打开后，默认所处的面板是上次关闭时处于的面板。
Ctrl + Shift + i ：与 F12 一样的效果
Ctrl + Shift + j ：无论关闭前是处于哪个面板，这个快捷键都是直接定位到控制台，也就是输入代码的地方。
Ctrl + Shift + c ：打开控制台并进入选择元素模式，就是开发者工具左上角那个选择图标的快捷键。

其次，你还要知道在开发者工具的 Element 面板中【如果你的开发者工具的语言是中文，那就是：元素面板】，当我们鼠标单击选中一个元素后，它的后面会显示一个灰色字样：$0 ，当你把鼠标放上去后，它会有一个提示告诉你，这个 $0 可以在控制台中直接使用，它表示的就是当前选中的这个元素、这个标签。

如下图：
在这里插入图片描述

所以，我们可以在控制台中输入并回车：

$0

输出结果如下图：
在这里插入图片描述
可以发现，它输出了我们在 Element 面板中选中的标签元素，学过前端的都知道，一般我们要获取某一个元素，一般都是用类似 document.xxx（）这样的方法来获取，并把这个获取到的元素赋值给一个变量，然后再用变量名来使用它的一些属性，但在浏览器的控制台中，我们完全可以用这个 $0 来临时进行一些测试。

如果你没有学过前端也没有关系，你只需要记住一个单词：innerText 即可，然后使用后面介绍的方法二来操作，就点点鼠标的问题。

OK，现在实操正式开始。

3.2. 开始复制

我们先使用快捷键 Ctrl + Shift + C 或者点击开发者工具的左上角图标来选择网页中我们要复制的内容。

就是这个图标：
在这里插入图片描述

前面说过，这种方法的原理就是利用这个元素的 innerText 属性，那么，我们可以尝试在控制台中调用一些这个属性：

如下图：
在这里插入图片描述
可以发现，它输出了这个 p 元素的 innerText 的属性值。那么接下来，你当然可以直接在这个控制台中复制它输出的内容，这里输出的内容是可以直接复制的。

但这样不够优雅，我们可以使用一个控制台中预先定义的函数来实现自动拷贝这些输出的内容到系统的剪贴板中：

copy($0.innerText)

如下图：
在这里插入图片描述
那么，接下来，如果我还需要复制其他的内容，就直接使用开发者工具的选择功能【Ctrl + Shift + C】，选中网页的内容，然后回到这个控制台中，按一下方向键的上箭头，它会自动将之前执行过的代码放到当前位置来，然后我们直接按下回车即可再次复制新的内容，并不需要重新手动输入这段代码。

另外，想必你也看出来了，这个代码我们是至始至终都不用修改的，因为随着我们选中的元素改变了，那么 $0 的指向也变了，那么对应的 innerText 的值也会改变。所以，这个代码至始至终都是 copy 的我们要复制的内容。

4. 实操2：通过界面操作

在实操1中，我们通过在控制台中输入代码的方式来获取一个元素的属性，但其实浏览器中，已经提供了这样一样属性面板。只不过，需要我们手动过滤一下，因为元素的属性是很多的。

如下图：
在这里插入图片描述
看到上面这张图后，你应该已经知道该如何操作了吧：

第一步，还是老规矩，先通过 Ctrl + Shift +C 在网页中找到我们要复制的内容。
第二步，在右侧的 Properties 属性面板的过滤框中，输入 innerText ，从众多属性中找到我们需要的。
第三步，在属性值上右键，选择 copy string contents 即可复制这个属性的内容到系统剪贴板中。

如下图：
在这里插入图片描述

不仅如此，我们把鼠标放在这个值上，还有一个效果的预览。

如果需要复制其他的内容，那么就是先选中元素，然后右侧的 innerText 的值会跟着你选中的内容进行自动更新，然后直接右键这个值，copy string contents 即可。

5. 扩展

5.1. 想复制网页结构？

有些朋友可能会有需要复制部分网页结构的需求，那么直接将 innerText 改为 innerHTML 或者 outerHTML 就可以了，一样的操作方式。

5.2. 不想打开控制台？

如果你实在不想打开控制台，那么可以考虑编写一个油猴脚本，来给特定的网站的特定内容添加一个一键复制的功能。

我之前给某金写了一个免登录一键复制的脚本，但其实真没有用过几次，所以，我感觉真的有复制需求的时候，使用这种方法也可以满足我的需求，当然每个人的需求不一样。

我把之前写的某金的免登录一键复制的油猴脚本也发出来吧，如果有大量复制需求的小伙伴可以参考参考，看是否对你有用。

6. 某金免登录一键复制油猴脚本

你可以看到我的某金网页与你们的可能不一样，这是因为我用 AdGuard 插件隐藏了一些网页元素，所以像侧边栏等位置，什么都没有。感兴趣的话，可以看看我的另一篇文章：使用AdGuard浏览器插件来拦截网页元素（去广告）

效果如下：

在这里插入图片描述

代码如下：

// ==UserScript==
// @name         某金免登录复制代码v0
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  需要配合AdGuard一起使用
// @author       王某人
// @match        *://juejin.cn/post/*
// @run-at       document-end
// @icon         https://www.google.com/s2/favicons?sz=64&domain=juejin.cn
// @grant        none
// ==/UserScript==

window.onload = function() {
    'use strict';
    var prelist = document.querySelectorAll("pre > div:first-child > div:nth-child(2) >div");
    prelist.forEach((item)=>{
        item.innerText = "免登录复制代码";
    });
    var btnlist = document.querySelectorAll("div.code-block-extension-copyCodeBtn");
    btnlist.forEach((item)=>{
        var newItem = item.cloneNode(true);
        item.parentNode.replaceChild(newItem, item);
        newItem.addEventListener("click", function(event){
            event.stopPropagation();
            const parentPreBlock = event.target.closest("pre");
            var allcode = parentPreBlock.querySelector("code").innerText;
            if(allcode){
                parentPreBlock.querySelector("div.code-block-extension-copyCodeBtn").innerText = "已复制!";
            }
            navigator.clipboard.writeText(allcode);
            setTimeout(()=>{
                parentPreBlock.querySelector("div.code-block-extension-copyCodeBtn").innerText = "免登录复制代码";
            },3000);
        })
    });
};

这代码都写了估计有 1 年多了，到现在依然可以使用，说明它的网页并没有做什么大的更改。

这代码之前写的时候，还给我难住挺久的，原因就是它的复制代码的按钮已经被绑定了一个点击事件，是通过 addEventListenr 的方式添加的，并不是 onclick 属性，所以无法将它的点击功能进行覆盖。【如果你看不懂这段，那么可以搜索一下 addEventListener 和 onclick 两种方式给元素添加点击事件的区别】

后来，我悟了，我其实并不需要与它硬刚，既然去不掉按钮原本的点击事件，那么直接将它原本的按钮克隆一份，然后用克隆得到的按钮去替换掉它原本的按钮，就可以了，这样就可以将复制代码时跳转到登录的功能去掉了，实现免登录的效果了。那么接下来就是直接自己给这些替换上去的按钮添加点击事件，实现复制到系统剪贴板的功能即可。

具体的我就不多说了，代码都给你了，不懂的可以问AI。码字可真累。。

有什么问题，欢迎大家在下方讨论。