tampermonkey油猴+chrome，在浏览器中运行自己写的js脚本

青旅半醒 2022-05-22 12:15 1180阅读 0赞

## 前言 ##

最近再看犀牛书《JavaScript权威指南》，当中的小例子我发现自己没法调试它zzz，于是就想到把它嵌入到浏览器里面，主要是使用的油猴再加上自己的js脚本

## 环境 ##

tampermonkey v4.6 油猴  
ubuntu 18  
chrome

## 油猴添加脚本 ##

![这里写图片描述][70]  
点击这边的添加脚本，然后在界面的脚本页面中输入自己的脚本代码，就可以了。

## 测试代码 ##

// ==UserScript==
    // @name 搜索参数显示
    // @namespace http://tampermonkey.net/
    // @version 0.1
    // @description 显示搜索的参数
    // @author You
    // @include https://www.baidu.com/*
    // @grant none
    // ==/UserScript==
    
    alert("Hello world");
    
    function urlArgs() {
        var query = window.location.search.substring(1);
        console.log(query);
        var spArray = query.split("&");
        var args = {};
        for (var i = 0; i < spArray.length; i++) {
            var flag = spArray[i].indexOf("=");
            var key = spArray[i].substring(0, flag);
            var value = spArray[i].substring(flag + 1);
            value = decodeURIComponent(value);
            args[key] = value;
        }
        return args;
    }
    
    var result = urlArgs();
    for (var key in result) {
        console.log("键: "+key+" 值: "+result[key]);
    }

解释一下这边的@include 它的意思是在哪些网站上使用，我这里用的是百度,\*代表通配符

## 效果 ##

![这里写图片描述][70 1]  
从chrome的控制台中，我们可以看到自己的代码运行的结果，还是比较方便的

[70]: /images/20220522/bcb25f875e134fb7a0d7ae313bc92e9d.png
[70 1]: /images/20220522/9a364cdbd7b24a08bbb54e4059fbd497.png