Tampermonkey油猴脚本的简单实现教程

先把上面的描述信息修改成自己的

这里假装你已经在浏览器上安装好了油猴插件，并且点击了 + 号进入了新增脚本页面

重点修改

*@name 自定义一个脚本名称
*@include 目标网址
*@connect 目标网站域名
*@require 可以在这里加载jQuery
*@grant 会用到的方法，一般常用的也就 GM_xmlhttpRequest 网页请求， GM_openInTab 打开新标签页， GM_download 下载请求

定义全局开关

我的习惯是给每个模块增加一个开关，后续可根据一个变量值进行开关

const iSOpenJdModule = true; //是否开启京东历史价格查询

定义Helper变量控制加载

const jdHelper={};
jdHelper.isRun=function(){
	var windowurl = window.location.href;
	if(windowurl.indexOf("item.jd.com")!=-1){
		return true;
	}
	return false;
};
jdHelper.start=function(){
	if(this.isRun()){
		jdHelper.generateCss();
		jdHelper.generateHtml();
	}
};
if(iSOpenJdModule){
	jdHelper.start();
}

添加页面需要的标签的样式

jdHelper.generateCss = function(){
	var innnerCss =
	`
		#get_history_lowest {
               z-index:999999;
               position:fixed;top:30%;left:0px;
               font-size:12px;padding:8px;text-align:center;color:#FFF;background-color:#F93A60;
               cursor:pointer;
           };
	`;
	$("body").prepend("<style>"+innnerCss+"</style>");
};
jdHelper.generateHtml = function(){ //不停的检测地址变化
	setInterval(function(){
		var $box = $("#get_history_lowest");
		if(window.location.href.indexOf("item.jd.com")!=-1){
			if($box.length==0){
				var topBox = "<div id='get_history_lowest'>查看历史价格</div>";
				$("body").append(topBox);
                   jdHelper.analysis();
			}
		}else{
			$box.remove();
		}
	},1000);
};

添加页面分析的具体功能，绑定点击事件

jdHelper.analysis=function(){
	var $getHistoryLowest = $("#get_history_lowest");
	$getHistoryLowest.on("click", function(){
		var windowurl = window.location.href;
        /** 分析页面地址
		if(windowurl.indexOf("#")!=-1){
			windowurl = windowurl.split("#")[0];
		}
		if(windowurl.indexOf("?")!=-1){
			windowurl = windowurl.split("?")[0];
		}
		var urlArray = windowurl.split("/");
		var sourceId = urlArray[urlArray.length-1];
		if(!sourceId){
			return;
		}
        */
       //https://tool.manmanbuy.com/HistoryLowest.aspx?url=https%3a%2f%2fitem.jd.com%2f100010456505.html
		windowurl = "https://tool.manmanbuy.com/HistoryLowest.aspx?url=" + windowurl;
        GM_openInTab(windowurl, false);
	});
};

完整代码-京东页面添加历史价格查询的小实例

点击查看历史价格后跳转到历史价格查询页面，只是举例非广告，地址可修改成自己喜欢的查询网站

// ==UserScript==
// @name         ZGTools-CustomPage
// @namespace    zqunyan.com
// @version      0.1
// @description  custom analysis!
// @author       zg
// @include      *://item.jd.com/*
// @connect      jd.com
// @require      https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js
// @grant        GM_download
// @grant        GM_openInTab
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    const iSOpenJdModule = true; //是否开启京东历史价格查询
    var $ = $ || window.$; //获得jquery的$标识符

    /**
    * 京东历史价格查询
    */
    const jdHelper={};
	jdHelper.isRun=function(){
		var windowurl = window.location.href;
		if(windowurl.indexOf("item.jd.com")!=-1){
			return true;
		}
		return false;
	};
    jdHelper.generateCss = function(){
		var innnerCss =
		`
			#get_history_lowest {
                z-index:999999;
                position:fixed;top:30%;left:0px;
                font-size:12px;padding:8px;text-align:center;color:#FFF;background-color:#F93A60;
                cursor:pointer;
            };
		`;
		$("body").prepend("<style>"+innnerCss+"</style>");
	};
    jdHelper.generateHtml = function(){ //不停的检测地址变化
		setInterval(function(){
			var $box = $("#get_history_lowest");
			if(window.location.href.indexOf("item.jd.com")!=-1){
				if($box.length==0){
					var topBox = "<div id='get_history_lowest'>查看历史价格</div>";
					$("body").append(topBox);
                    jdHelper.analysis();
				}
			}else{
				$box.remove();
			}
		},1000);
	};
	jdHelper.analysis=function(){
		var $getHistoryLowest = $("#get_history_lowest");
		$getHistoryLowest.on("click", function(){
			var windowurl = window.location.href;
            /** 分析页面地址
			if(windowurl.indexOf("#")!=-1){
				windowurl = windowurl.split("#")[0];
			}
			if(windowurl.indexOf("?")!=-1){
				windowurl = windowurl.split("?")[0];
			}
			var urlArray = windowurl.split("/");
			var sourceId = urlArray[urlArray.length-1];
			if(!sourceId){
				return;
			}
            */
            //https://tool.manmanbuy.com/HistoryLowest.aspx?url=https%3a%2f%2fitem.jd.com%2f100010456505.html
			windowurl = "https://tool.manmanbuy.com/HistoryLowest.aspx?url=" + windowurl;
            GM_openInTab(windowurl, false);
		});
	};
    jdHelper.start=function(){
		if(this.isRun()){
			jdHelper.generateCss();
			jdHelper.generateHtml();
		}
	};
	if(iSOpenJdModule){
		jdHelper.start();
	}
    /*京东历史价格查询 结束*/

})();