使用Tampermonkey动态修改网页的js

本文介绍如何使用Tampermonkey插件动态修改网页的JavaScript代码,通过一个修改百度搜索按钮响应事件的例子,展示了具体的实现步骤和代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用Tampermonkey动态修改网页的js

安装Tampermonkey

具体安装方式自行百度吧,本人是翻墙从google的市场安装的(网上有不少翻墙的免费软件)
安装后chrome右上角会有个图标
在这里插入图片描述
在这里插入图片描述

例子

下面以修改百度搜索按钮的响应事件为例子说明
1.打开百度网站:https://www.baidu.com/
2.鼠标移到搜索按钮上,右键,检查,知道搜索按钮的id为su
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
添加以下js:

    $('#su').click(function () {
        alert('将要进行搜索了');
    });

在这里插入图片描述
保存后,刷新页面,点击搜索按钮,如下所示:
在这里插入图片描述

<think>好的,用户的问题是关于如何通过Tampermonkey脚本来修改网页上的JavaScript方法。我需要先回顾一下Tampermonkey的基本用法,然后结合脚本编写的方法来解答。 首先,Tampermonkey是一个用户脚本管理器,允许用户自定义JavaScript代码来修改网页的行为。用户可能已经安装了Tampermonkey,但需要知道具体的步骤来覆盖或修改网页原有的JS方法。 接下来,用户的需求是修改网页上的JavaScript方法。这通常涉及到覆盖原有函数。例如,如果网页有一个名为originalFunc的函数,我们可以通过重新定义它来实现修改。关键点在于确保脚本在原始函数加载之后执行,否则可能无法正确覆盖。使用@run-at指定脚本运行时机很重要,比如设置为document-end,确保在DOM加载完成后执行。 另外,事件监听器的修改也是一个常见需求。用户可能需要阻止原有的事件处理函数,并添加新的逻辑。这里需要注意使用addEventListener的参数来精确控制事件的捕获或冒泡阶段。 然后,我需要考虑用户可能遇到的实际问题,比如如何调试脚本,如何处理依赖库。这时候,引用中的内容可以提供帮助,比如使用Bootstrap或jQuery的CDN,或者在脚本中引入外部库。同时,引用[^2]提到了遮罩层动画和爬虫案例,可能涉及到DOM操作和异步处理,这些也是修改JS方法时需要注意的。 用户可能还想知道如何测试和调试他们的脚本。这时候可以建议使用console.log输出信息,或者利用浏览器的开发者工具来检查错误。此外,确保脚本只在目标网页运行,避免影响其他页面,这可以通过@match或@include元数据来控制。 最后,用户可能需要具体的代码示例来理解如何实现覆盖函数和修改事件。提供示例代码并分步骤解释,能够帮助他们更好地理解和应用。同时,提醒用户注意脚本的使用规范,遵循网站的使用条款,避免滥用,这也是引用中强调的学习目的的重要性。</think>### 如何通过Tampermonkey修改网页JavaScript方法? #### 1. **基本原理** Tampermonkey通过注入自定义JavaScript代码到目标网页,覆盖或修改原生JavaScript方法。核心步骤包括: - **函数重写**:直接覆盖网页中原有的函数定义,例如`window.originalFunc = function(){...}`[^2] - **事件监听拦截**:移除原有事件监听器,或通过`addEventListener`添加新逻辑 #### 2. **具体实现步骤** ##### 2.1 覆盖原生函数 ```javascript // ==UserScript== // @name 修改网页JS示例 // @match https://target-website.com/* // @run-at document-end // ==/UserScript== // 保存原始函数引用 const originalFunc = window.targetFunc; // 重写目标函数 window.targetFunc = function(...args) { console.log('函数已被拦截', args); // 可选:调用原始函数 return originalFunc.apply(this, args); }; ``` **关键点说明**: - `@run-at document-end`确保DOM加载完成后执行覆盖操作 - 使用闭包保存原始函数引用避免循环调用 ##### 2.2 修改事件监听 ```javascript // 移除原有点击事件 document.getElementById('btn').removeEventListener('click', originalHandler); // 添加新的事件处理 document.getElementById('btn').addEventListener('click', function(e) { e.stopImmediatePropagation(); console.log('新的事件处理逻辑'); }, true); // 第三个参数true表示在捕获阶段处理 ``` #### 3. **调试技巧** - 在脚本开头添加`// @grant GM_log`启用日志功能 - 使用`GM_info`获取脚本信息 - 通过Chrome DevTools的`Sources > Tampermonkey`定位注入脚本 #### 4. **高级应用** ```javascript // 拦截XMLHttpRequest const originalOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function(method, url) { if(url.includes('sensitive-data')) { console.log('拦截到敏感请求:', url); return; } originalOpen.apply(this, arguments); }; // 修改fetch API const originalFetch = window.fetch; window.fetch = async function(...args) { const response = await originalFetch(...args); console.log('拦截fetch响应:', response); return response; }; ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值