如何对检查项目进行永久更改 Browser 与篡改猴

Web 浏览器中的检查元素功能是一种开发人员工具，允许您修改网站的前端方面（包括 HTML、CSS 和 JavaScript）并进行临时更改。 您可以使用检查元素做更多事情。 但是，更新后，所有更改都会丢失。

但是，有时您可能希望将更改保留较长时间或添加其他功能以改善用户体验。 使 Inspect Element 更改永久生效的一种方法是使用 Tampermonkey 扩展。 它允许您向网页添加自定义脚本并使更改永久保留在本地计算机上。

我们来看看如何使用Tampermonkey查看您本地的巡检项变化 Browser 使之永久化。

什么是 Tampermonkey 以及如何安装它？

Tampermonkey 是一个用户脚本管理器，是一种流行的浏览器扩展，适用于所有主要的 Web 浏览器，包括 Chrome, Edge, Opera 接下来和 Firefox。 它允许您创建并运行自定义和现有的用户脚本来修改网页以修复或改进它们。

它还具有由其他 Tampermonkey 用户创建的用户脚本库。 例如，您可以使用本地 YouTube 下载器用户脚本下载 YouTube 观看带有 Tampermonkey 或标记的视频 YouTube 无需注册的视频。

一旦指定的网页加载，扩展程序就会执行保存的用户脚本，使预期的更改看起来是永久性的。

在我们开始编写脚本之前，您需要安装 Tampermonkey。 那么让我们开始安装扩展：

1. 去 坦普猴官方网站。 它会自动检测您的网络浏览器。 如果没有，请单击任意 ChromeMicrosoft 选项卡 Edge, Firefox、Safari 和 Opera 取决于所使用的 Browser。
2. 在里面 下载 部分，单击 店内有售。 您将被重定向到浏览器的网上商店。
3. 点击 安装 将扩展添加到您的扩展中 Browser 加上。 按照屏幕上的说明完成安装。

如果你 Browser 未列出，但您正在使用一个 Chromium Browser，您应该能够通过以下方式安装此扩展 Chrome 节省。

安装后，您可以开始使用 JavaScript 编写自定义用户脚本，以对任何网站进行预期的更改。 当然，您需要 HTML、CSS 和 JavaScript 的基本知识才能编写用户脚本并使用 Tampermonkey 进行更改。

为了演示 Tampermonkey 的功能，让我们编写一个脚本来添加一个 WhatsApp 分享按钮可与您分享文章链接 WhatsApp 联系方式。

更改网站元素之前要考虑什么

对网站进行更改时，尊重其有关使用第三方 JavaScript 的政策非常重要。 不要尝试在网站上随机执行用户脚本，尤其是在您处理敏感数据时。

虽然 Tampermonkey 允许您更改网站的外观并添加功能，但任何更改仅适用于您的本地 Browser 可见并且对源没有影响。

开始使用 Tampermonkey

计划好要对网页进行的更改后，您就可以开始编写脚本了。 可以从工具栏或 Tampermonkey 仪表板创建新的用户脚本。

要创建新脚本，请单击 扩展 中的符号 Browser工具栏并选择 捣固猴。 接下来，选择 创建一个新脚本。 这将在 Tampermonkey 仪表板中打开脚本编辑器。

Tampermonkey 的默认标头或元数据注释如下所示：

 // ==UserScript==

// @name New Userscript

// @namespace https://tampermonkey.net/

// @version 0.1

// @description try to take over the world!

// @author You

// @match https://example.com/*

// @grant none

// ==/UserScript==

(function() {

'use strict';

// Your code here...

})(); 

这些元数据注释包含有关用户脚本名称、预期用途、权限的重要信息，并告诉 Tampermonkey 何时运行脚本。

在本指南中，我们将重点关注 @匹配 指令，也称为元数据文件。 Tampermonkey 使用此指令来确保用户脚本仅应用于特定网站或网页。 在这种情况下，将执行以下用户脚本 example.com（根据您的要求替换网站 URL）及其所有页面。

编写用户脚本来添加一个 WhatsApp 分享按钮

在每篇PCPC.me文章的末尾，您都会找到一个用于各种内容的共享小部件 Social- 媒体平台，除外 WhatsApp。 虽然您可以复制并粘贴 URL，但 WhatsApp 如果您经常在您的网站上分享文章，则“分享”按钮会非常有用。 WhatsApp 团体。

您可以在 Tampermonkey 中创建一个用户脚本来添加一个 WhatsApp 文章末尾的分享按钮。 我们正在将该按钮集成到现有的共享小部件中，这样您就可以与您共享网站 URL WhatsApp 联系方式。

让我们从创建一套基本设备开始 WhatsApp 分享按钮。

 //create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share'; 

现在我们有一个基本要求 WhatsApp 单击共享按钮。 让我们添加一些样式。 这为按钮提供了背景和文本颜色、边框、填充和光标样式。 通过一些修改，您可以更改按钮属性以优化其外观。

 //add styling to the button
Whatsapp_btn.style.backgroundColor = '#075E54';
Whatsapp_btn.style.color = 'white';
Whatsapp_btn.style.border = 'none';
Whatsapp_btn.style.borderRadius = '5px';
Whatsapp_btn.style.padding = '10px';
 

当按钮准备就绪后，就可以对其进行测试了。 但你把它放在哪里呢？ 作为一种常见的做法，分享按钮通常放置在文章的末尾。

然而，在这种情况下，我们已经在每篇文章的底部有一个共享小部件。 因此，最好将此共享按钮作为小部件的一部分。

为此，我们检查现有的共享小部件以查找包含共享项的父容器，以便在用户脚本中找到它。 按网站 Ctrl + Shift + C 打开检查项目。 接下来，选择页面上的共享小部件项目来检查它。

你会看到它是一个

 const sharingDiv = document.querySelector ('div.sharing.bottom'); 

 if (sharingDiv) {
 sharingDiv.appendChild(Whatsapp_btn);
} 

 function generateWALink() {
 const pageURL = encodeURIComponent(window.location.href);
 return `https://api.whatsapp.com/send?text=${pageURL}`;
} 

 Whatsapp_btn.addEventListener('click', () => {
 const whatsappURL = generateWALink();
 window.open(whatsappURL, '_blank');
});