脚本猫 (ScriptCat) 开源项目安装及使用指南

丁淳凝

于 2024-08-08 08:19:51 发布

阅读量1.5k

点赞数 24

本文链接：https://blog.csdn.net/gitblog_01040/article/details/141014674

版权

脚本猫 (ScriptCat) 开源项目安装及使用指南

scriptcat脚本猫，一个可以执行用户脚本的浏览器扩展项目地址:https://gitcode.com/gh_mirrors/sc/scriptcat

一、项目介绍

脚本猫 (ScriptCat) 是一款功能强大的浏览器扩展插件,允许用户执行自定义的脚本.它可以作为GreaseMonkey或TamperMonkey等用户脚本管理器的一种替代方案.通过ScriptCat,用户能够自由地操控网页元素,实现自动化操作,提高浏览效率.此扩展支持多种主流浏览器如Chrome、Firefox等.

特点:

脚本兼容: 支持所有GM_* API命令;
丰富的API : 提供了丰富的API接口以帮助开发者更好地控制页面元素;
跨域处理: 具备处理跨域请求的能力,让开发者不必担心因CORS限制而无法调用其他网站资源的问题;
高效的调试工具: 包含一系列高效实用的调试工具,方便开发人员进行代码优化;

二、项目快速启动

要使用脚本猫 (ScriptCat),您首先需要从GitHub仓库中克隆它到本地:

git clone https://github.com/scriptscat/scriptcat.git

接下来,我们需要在您的开发环境中配置必要的依赖库:

cd scriptcat
npm install

完成这些步骤之后,您可以运行以下命令来构建并打包扩展程序:

npm run build

现在,您可以将构建好的文件加载到目标浏览器中.对于Google Chrome而言,进入“扩展程序”设置页(可以通过浏览器地址栏输入 chrome://extensions/ 访问该页面).确保开启"开发者模式",然后点击 "加载已解压的扩展程序...",找到刚才编译目录下的文件夹即可加载脚本猫(ScriptCat)。

测试安装是否成功

你可以访问官网或者打开一个带有用户脚本的页面测试,如果成功的话会在右上角看到ScriptCat图标.

三、应用案例和最佳实践

示例1: 自动填充表单字段

假设你想在某个电商网站自动填写登录表单时,可以创建一个新的用户脚本来实现这一功能.在ScriptCat中新建一个规则,选择目标网址并指定特定的选择器,然后利用JavaScript DOM操作将用户名和密码输入至相应的文本框内:

// ==UserScript==
// @name        Auto Fill Form Example
// @namespace   https://scriptcat.org/
// @version     1.0
// @description Automatically fills username/password fields for demo purposes.
// @author      Your Name Here
// @match       http://example.com/login*
// @grant       none
// ==/UserScript==

$(document).ready(function() {
    // Locate input elements by their IDs.
    var usernameInput = document.getElementById('username');
    var passwordInput = document.getElementById('password');

    // Set values based on your preferences.
    usernameInput.value = 'your_username';
    passwordInput.value = 'your_password';

    // Trigger form submission event after fields are filled out.
    var loginForm = document.querySelector('#login-form');
    if (loginForm) {
        loginForm.submit();
    }
});

将上面这段代码复制粘贴到新的用户脚本文件里,保存并重新加载ScriptCat扩展即可生效.

示例2: 高级筛选搜索结果

如果你经常在购物网站寻找特定商品但又嫌常规筛选器不够灵活,不妨考虑使用ScriptCat自定义筛选逻辑.例如,下面这个示例展示了如何过滤掉价格过高的选项以及没有免邮服务的商品:

// ==UserScript==
// @name        Filter Search Results Advancedly
// @namespace   https://scriptcat.org/
// @version     1.0
// @description Enhances search result filtering capabilities on e-commerce sites.
// @author      Your Name Here
// @match       *://www.ebay.com/sch/i.html?_nkw=product_name&_ipg=50&_sacat=0*_udlo=100&LH_TitleDesc=0&rt=nc
// @grant       GM_xmlhttpRequest
// ==/UserScript==

var MAX_PRICE = 100; // set desired threshold here
var MIN_SHIPPING = 0; // set free shipping filter option here

function filterProducts() {
    // Get list of all product items within search results page.
    const productsList = document.querySelectorAll('.s-item.sresult li');

    // Iterate over each item to check price and shipping cost.
    for (let i = 0; i < productsList.length; i++) {
        let item = productsList[i];
        let priceElement = item.querySelector('.s-item__price');
        let shipMethodElm = item.querySelector('.vi-shipping a span:last-child');
        
        // Extract numeric value from string representation (e.g., "$50.00").
        let priceValue = parseFloat(priceElement.innerText.replace(/[^0-9.-]+/g,""));
    
        // Verify whether current listing meets criteria before showing it.
        if ((isNaN(priceValue) || priceValue > MAX_PRICE)
            && (!shipMethodElm || parseInt(shipMethodElm.innerText) != MIN_SHIPPING)) {
                item.style.display = 'none'; 
            } else {
                item.style.display = '';
            }
    }
}

// Invoke callback once everything has loaded properly.
window.addEventListener('load', function () { setTimeout(filterProducts, 200); });

这个例子假定你已经知道确切的CSS选择器对应于页面元素的位置,因此只需稍作调整就能应用于不同的场景下.