码迷,mamicode.com
首页 > 其他好文 > 详细

chrome 开发并使用油猴 Tampermonkey 插件

时间:2018-12-10 14:07:07      阅读:971      评论:0      收藏:0      [点我收藏+]

标签:for   net   color   cto   rom   htm   max   mkf   get   

背景:以前 test.user.js 的插件方式被 Chrome 封杀了。现在只能依赖油猴来编写自己的 js 插件。

 


 

官方网站:https://tampermonkey.net/

chrome商店: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=zh-CN

 

tampermonkey 百度网盘本地安装:https://pan.baidu.com/s/19atulFTwe6Sp_bR5fjFF7A

不知道怎么本地安装 chrome 插件的同学可以参考我这篇文章:https://www.cnblogs.com/CyLee/p/10076458.html

 

安装完成后,Chrome 右上角插件列表如图所示:

技术分享图片

 

 


 

 

点击添加新脚本

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.baidu.com/*
// @grant        none
// ==/UserScript==

(function() {
    ‘use strict‘;

    window.alert(‘123‘);
})();

 保存然后打开百度(注意是带https的百度哦),效果如图所示:

 技术分享图片

 

请注意代码中的 @match,这里必须必须写上你的匹配表达式。

请注意代码中的 @match,这里必须必须写上你的匹配表达式。

请注意代码中的 @match,这里必须必须写上你的匹配表达式。

 

 

再来一个实战的示例,给apizza的控制台加上滚动条。

// ==UserScript==
// @name         apizza.net
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://apizza.net/console/project/*
// @grant        none
// ==/UserScript==

(function() {
    ‘use strict‘;

    // 递归
    var maxTimeout = 10,
        timeout = 0,
        wait = 1000,
        callback = function() {
            document.querySelectorAll(‘#response-body‘).forEach(_=>{
                _.style.height = ‘400px‘
                _.style.overflow = ‘scroll‘
            })
        };
    (function poll() {
        if (++timeout > maxTimeout * 1000 / wait) {
            return window.alert(‘超时‘);
        };
        document.querySelector(‘#response-body‘) ? callback() : setTimeout(poll, wait);
    }());
})();

 

效果如图所示:

技术分享图片

 

chrome 开发并使用油猴 Tampermonkey 插件

标签:for   net   color   cto   rom   htm   max   mkf   get   

原文地址:https://www.cnblogs.com/CyLee/p/10095489.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!