简单的Tampermonkey入门

Tampermonkey介绍

  1. Tampermonkey是浏览器的一个插件,能够以js脚本对打开的特定网页进行修改,实现自定义功能:
    VIP解析视频网站
    购物网站价格对比和历史价格走势等。

  2. 它是Monkey这一类用户脚本管理器中比较著名的一个,Monkey说明参见博客《不同浏览器下的Userscript的安装与使用》

  3. Tampermonkey的官网为http://tampermonkey.net
    有Chrome, Edge, Safari, Opera和 Firefox版本。

  4. 关于其安装使用直接参见——简书文章《tampermonkey 使用》
    离线下载可以直接在CSDN里搜索,免积分下载

  5. 关于Tampermonkey脚本撰写的入门可以直接参见吾爱破解里的说明,或者自行在知乎、CSDN里搜索。

脚本示例

需求: 复制百度百科网页地址

问题:
1. 中文网页链接复制,存在编码问题(网页连接不允许直接的UTF8编码,需要转码),不能直接选择地址(出现%,或者16进制的编码)
2. 希望一键搞定复制–需要系统权限
撰写的代码如下:

// ==UserScript==
// @name         ConsultSome
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       cloud_in_the_sky
// @match        baike.baidu.com/**
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 增加中文URL
    var urlcontent =  document.URL;
    var urlstring = decodeURI(urlcontent);
    urlstring = document.createTextNode(urlstring);

    // 把对应节点放在第一个Header类之后,为了避免出现冲突,增加id标签
    var tmp = document.getElementsByClassName('header')[0];
    tmp.id = "Aimloc";
    $('#Aimloc').after('<input type="text" id="website" value="http://www.sitepoint.com/" /><button id="JCJ1Button" data-copytarget="#website" click = "copy()">copy</button>');

    var EleP = document.getElementById('website');
    EleP.value = decodeURI(urlcontent);
    EleP.size = 80;

    // copy其他人的代码:使用javascript进行复制到剪切板的操作
    document.body.addEventListener('click', copy, true);
    // event handler
    function copy(e) {

    // find target element
    var 
      t = e.target,
      c = t.dataset.copytarget,
      inp = (c ? document.querySelector(c) : null);

    // is element selectable?
    if (inp && inp.select) {

      // select text
      inp.select();

      try {
        // copy text
        document.execCommand('copy');
        inp.blur();

        // copied animation
        t.classList.add('copied');
        setTimeout(function() { t.classList.remove('copied'); }, 1500);
      }
      catch (err) {
        alert('please press Ctrl/Cmd+C to copy');
      }

    }

    }

})();

效果

Tampermonkey脚本编写
代码写入Tampermonkey脚本里

百科网页效果
百科网页效果

待完成

  1. 更加详细的文档说明

  2. 百科打开有一定延时——需要进一步测试,并想办法进行性能提高(修改代码中需要全文档执行的部分)

  3. 上传Tampermonkey的插件离线安装文件

    CSDN已有

  4. 增加Tampermonkey的商店网址

    不需要补全,直接参见其他人的说明链接和插件内置的链接

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页