js脚本工具

工具

方式一： chrome插件，自己开发

方式二：tampermonkey

tampermonkey

参考： http://qa.blog.163.com/blog/static/190147002201651473441594/

每个注释标签的解释如下:

// ==UserScript==
// @name    K12 UserInfoShow            //脚本名称
// @author    Max                         //作者姓名
// @version    2.1                         //脚本版本
// @description K12实现用户信息展示          //功能描述
// @match     *://100.163.com/*          //匹配的目标网站
// @include    *.163.com/*                 //允许访问的url(可多个)
// @run-at    document-start              //脚本在docunment开始加载就开始运行
// @require http://code.jquery.com/jquery-latest.js //脚本开始运行之前载入jquery
// ==/UserScript==de>

使用

http://tampermonkey.net/documentation.php?ext=dhdg

http://jingyan.baidu.com/article/fb48e8be5b9d1d6e622e14f2.html

1） 如何使用 tampermonkey 支持jquery--- 使用 @require 可以引入脚本:

@require    http://code.jquery.com/jquery-1.11.0.min.js

2）

如何使用脚本到多个路径，只需要添加

// @match       路径

// @match       路径

多个@match即可

更多：

使用 @include, 可以指定脚本生效的网址: 

想获得页面中的JS函数或变量要用 unsafeWindow: 

3）给Tampermonkey装载已有脚本

如果你只是想实现某一个功能不想自己建立，可以点击获取脚本。

会跳转到一个有很多既有脚本的网站，按你的搜索区搜索指定的脚本。

4） 给Tampermonkey添加自己的脚本

打开新建脚本的编写页面。

上面是配置信息或是版权说明你可以按照自己的填写。

 @match  必须填写，表示脚本会在哪个范围内部运行，可以使用*通配符。

比如 http://jingyan.baidu.com/*会在百度经验这个子域名上运行自己的脚本。

就以这个为例。在页首 出现一个button。点击它之后，经验页面刷新。

代码如下：

// ==UserScript==

// @name       RePage

// @namespace  http://use.i.E.your.homepage/

// @version    0.1

// @description  enter something useful

// @match      http://jingyan.baidu.com/*

// @copyright  2012+, You

// ==/UserScript==

    var bt1 = document.createElement("input");

        bt1.setAttribute("type", "button");

        bt1.setAttribute("id", "bt1");

        bt1.setAttribute("width", "100");

        bt1.setAttribute("height", "30");

        bt1.setAttribute("value", "点击刷新");

        bt1.setAttribute("onclick", "window.location.reload()");

        var b = document.body;

        b.insertBefore(bt1, b.firstChild);

如图

之后，运行后 。在每个经验页面会出现一个 点击刷新，按钮。

当然，你可以进行其他需要的配置。

• 例子

注意： js中的分号必须有，否则报错

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

(function() {
    'use strict';
console.log(document.getElementById("container"));
    // Your code here...
})();