油猴脚本怎么添加js

油猴脚本添加JavaScript的步骤：安装油猴插件、创建新脚本、编写JavaScript代码、保存并运行、调试和优化。

油猴（Tampermonkey）是一款流行的浏览器扩展，允许用户在网页上运行自定义的JavaScript脚本。通过这些脚本，可以实现网页功能的扩展、界面优化等。接下来，我将详细描述如何在油猴中添加JavaScript脚本。

一、安装油猴插件

要在浏览器中使用油猴脚本，首先需要安装油猴插件。油猴支持多个浏览器，包括Chrome、Firefox、Safari等。

1、在Chrome浏览器中安装油猴插件

打开Chrome浏览器，访问Chrome网上应用店。
搜索“Tampermonkey”，找到相应的扩展程序。
点击“添加到Chrome”按钮，并确认安装。

2、在Firefox浏览器中安装油猴插件

打开Firefox浏览器，访问Firefox附加组件网站。
搜索“Tampermonkey”，找到相应的扩展程序。
点击“添加到Firefox”按钮，并确认安装。

安装完成后，浏览器工具栏上会出现油猴的图标，点击该图标可以进行进一步的设置和操作。

二、创建新脚本

安装油猴插件后，下一步是创建一个新的脚本。

1、打开油猴管理界面

点击浏览器工具栏上的油猴图标，选择“仪表板”或“管理面板”进入油猴管理界面。

2、创建新脚本

在油猴管理界面中，点击“+”或“新建脚本”按钮，进入脚本编辑界面。

三、编写JavaScript代码

在脚本编辑界面中，可以编写自定义的JavaScript代码。通常，脚本的基本结构如下：

// ==UserScript==
// @name         My Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    // Your code here...
})();

1、脚本元数据

脚本的元数据部分（即// ==UserScript==和// ==/UserScript==之间的内容）包含脚本的基本信息，如名称、版本、描述、作者等。常用的元数据标签包括：

@name：脚本名称
@namespace：命名空间
@version：版本号
@description：脚本描述
@author：作者
@match：匹配的URL模式
@grant：权限设置

2、编写JavaScript代码

在(function() { ... })();块内编写自定义的JavaScript代码。例如，以下代码会在网页上显示一个弹窗：

(function() {
    'use strict';
    alert('Hello, world!');
})();

四、保存并运行

编写完脚本后，点击“保存”按钮保存脚本。此时，脚本会自动在匹配的网页上运行。

1、测试脚本

打开一个与脚本匹配的网页，检查脚本是否按预期运行。如果脚本包含错误，可能会在控制台中看到相关的错误信息。

2、调试和优化

如果脚本未按预期运行，可以使用浏览器的开发者工具进行调试。按下F12或右键点击页面并选择“检查”即可打开开发者工具。在“控制台”选项卡中，可以查看JavaScript的输出和错误信息。

五、进阶功能

油猴脚本不仅可以执行简单的JavaScript代码，还支持更高级的功能，如：

1、与页面元素交互

可以使用DOM API选择和操作网页元素。例如，以下代码会将页面上所有的段落文字颜色设置为红色：

(function() {
    'use strict';
    var paragraphs = document.querySelectorAll('p');
    paragraphs.forEach(function(p) {
        p.style.color = 'red';
    });
})();

2、使用外部库

可以在脚本中引入外部JavaScript库。例如，以下代码引入了jQuery库并使用它来隐藏所有的图片：

// ==UserScript==
// @name         My Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        none
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==
(function($) {
    'use strict';
    $('img').hide();
})(jQuery);

3、持久化数据

油猴提供了GM_setValue和GM_getValue函数，用于在脚本中保存和读取数据。例如，以下代码保存和读取一个计数器：

// ==UserScript==
// @name         My Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==
(function() {
    'use strict';
    var count = GM_getValue('count', 0);
    count += 1;
    GM_setValue('count', count);
    alert('This page has been visited ' + count + ' times.');
})();

六、应用场景

油猴脚本在实际应用中有许多场景，包括但不限于以下几种：

1、自动化操作

通过脚本实现自动化操作，例如自动填写表单、自动点击按钮等。例如，以下代码会自动在搜索框中输入“Hello, world!”并点击搜索按钮：

(function() {
    'use strict';
    var searchBox = document.querySelector('input[name="q"]');
    var searchButton = document.querySelector('input[type="submit"]');
    if (searchBox && searchButton) {
        searchBox.value = 'Hello, world!';
        searchButton.click();
    }
})();

2、界面优化

通过脚本调整网页的样式和布局，例如隐藏广告、调整字体大小等。例如，以下代码会隐藏所有的广告元素：

(function() {
    'use strict';
    var ads = document.querySelectorAll('.ad, .ads, [id*="ad"]');
    ads.forEach(function(ad) {
        ad.style.display = 'none';
    });
})();

3、数据抓取

通过脚本抓取网页上的数据，并将其保存到本地或发送到服务器。例如，以下代码会抓取所有文章标题并将其显示在控制台中：

(function() {
    'use strict';
    var titles = document.querySelectorAll('h1, h2, h3');
    titles.forEach(function(title) {
        console.log(title.textContent);
    });
})();

七、推荐工具

在项目团队管理中，使用专业的管理系统可以提高效率和协作效果。以下是两个推荐的系统：

1、研发项目管理系统PingCode

PingCode是一款专业的研发项目管理系统，提供了丰富的功能，包括需求管理、任务跟踪、版本控制、持续集成等。通过PingCode，团队可以高效地管理项目进度、资源分配和质量控制。

2、通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，适用于各类团队和项目。它提供了任务管理、文件共享、沟通协作等功能，帮助团队更好地协作和沟通，提高工作效率。

通过以上步骤和工具，您可以轻松地在油猴中添加和运行JavaScript脚本，实现各种自定义功能和优化，提高工作和生活的效率和便利性。