油猴Tampermonkey在Chrome运行自己写的JS脚本

无色 2019年8月7日00:09:00 评论 452

前言

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

环境

tampermonkey v4.6 油猴
ubuntu 18
chrome

油猴添加脚本

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

测试代码

// ==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 它的意思是在哪些网站上使用,我这里用的是百度,*代表通配符

效果

这里写图片描述
chrome的控制台中,我们可以看到自己的代码运行的结果,还是比较方便的。

无色

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: