谷歌插件开发（TAPD工单发送钉钉消息）

2019-05-22 本文已影响0人小船翻不翻

manifest.json

插件开发必然是要有这个文件的，话不多说，看代码

{
  "name": "发送钉钉消息",
  "version": "1.2019.521.4",
  "description": "tapd提交工单后给钉钉发送消息",
  "icons": {
    "16": "16.png",
    "48": "48.png",
    "128": "128.png"
  },
  "permissions": [
    "notifications",
    "http://*/*",
    "https://*/*"
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": [
        "https://www.tapd.cn/*"
      ],
      "js": [
        "jquery.min.3.4.1.js",
        "myscript.js"
      ]
    }
  ],
  "web_accessible_resources": [
    "48.png"
  ]
}

icons 图标信息
permissions 访问权限 "http:///", "https:///" 用于跨域请求；notifications用于弹框通知
background 后台配置，我这里只配置了js 插件会自动生成对应的html页面
manifest_version 固定值2
content_scripts 内容DOM 配置，matches匹配页面路径 js 将会引用的js文件，引用的文件与DOM页面本身的引用互相独立

实现代码myscript.js

var DingUserList = [{ "userid": "015230283384", "name": "张德良" }];

$(function () {
    //新建需求
    $('#btn_save_view').click(function () {
        sendDingTalk($('#StoryOwner').val(), '新建需求');
    });
    //新建缺陷
    $('#_view').click(function () {
        sendDingTalk($('#BugCurrentOwner').val(), '新建缺陷');
    });
    //发送钉钉消息
    function sendDingTalk(name, t) {
        console.log('收到通知请求', name, t);
        var ids = [];
        name.split(';').forEach(function (v) {
            var ding = $.grep(DingUserList, function (n) { return n.name == v; });
            if (ding.length > 0) {
                ids.push(ding[0].userid);
            }
        });
        if (ids.length == 0) { console.log('推送人员空'); return false; }
        var _title = $('#story_name_view .editable-value').text()
            || $('#bug_title_view .editable-value').text()
            || $('.title-edit-wrap .editable-value').text()
            || $('#StoryName').val()
            || $('#BugTitle').val();
        var _url = "https://www.自己的域名.cn/v3/SendTapdMsg?ids=" + JSON.stringify(ids)
            + '&msg=' + encodeURIComponent('[' + t + ']' + _title);
        var xhr = new XMLHttpRequest();
        xhr.open("GET", _url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (window.Notification) {
                    chrome.extension.sendRequest({ type: 1, name: name, msg: xhr.responseText }, function (response) {
                        console.log(response);
                    });
                } else { alert('消息已发送，当前浏览器不支持推送消息'); }
            }
        }
        xhr.send();
    }
});

监听www.tapd.cn页面代码

image.png

逻辑很清晰

打开控制台，找到自己想要获取值的元素
得到处理人的用户名，与自己的钉钉用户匹配，得到钉钉用户ID
使用XMLHttpRequest调用服务器，给钉钉服务器发送消息命令
消息发送成功，告诉当前编辑工单的人已经成功，使用chrome.extension.sendRequest与backgroup.js沟通

TAPD操作工单的页面很多，其他部分代码

var DingUserList = [{ "userid": "015230283384", "name": "张德良" }];

$(function () {
    var StoryOwner = $('#StoryOwner').val();
    (function () {//等待1秒重新加载处理人
        if (!StoryOwner) {
            setTimeout(function () {
                StoryOwner = $('#StoryOwner').val();
            }, 1000);
        }
    })();
    //编辑工单
    $('#btn_update_exit').click(function () {
        sendDingTalk($('#StoryOwner').val(), '编辑');
    });
    //新建需求
    $('#btn_save_view').click(function () {
        sendDingTalk($('#StoryOwner').val(), '新建需求');
    });
    //新建缺陷
    $('#_view').click(function () {
        sendDingTalk($('#BugCurrentOwner').val(), '新建缺陷');
    });
    //流转工单
    $('#update_status_btn').click(function () {
        sendDingTalk($('#STATUS_planning-planningOwner').val() || $('#STATUS_new-newCurrentOwnerValue').val(), '流转');
    });
    (function () {
        function getV() {
            return $('#ContentStatusOwner .editable-value').text()
                || $('#ContentCurrentOwner .editable-value').text();
            // || $('#owner-field-value .editable-value').prop('title');//内嵌页面无法获取
        }
        //已有工单编辑处理人
        var _u = getV();
        lunxun();
        function lunxun() {
            setInterval(function () {
                var _uuu = getV();
                if (_uuu && _uuu != _u) {
                    console.log(_u, getV());
                    _u = getV();
                    sendDingTalk(_u || '', '变更处理人');
                }
            }, 500);
        }
    })();

    //处理人变更
    $('#StoryOwnerValue').on('change', function (e) {
        if (window.location.pathname.indexOf('/edit/') > -1 || window.location.pathname.indexOf('/view/') > -1) {
            console.log('直接变更处理人', e.delegateTarget.value);
            if (e.delegateTarget.value != StoryOwner) {
                sendDingTalk(e.delegateTarget.value);
            }
        }
    });
    //发送钉钉消息
    function sendDingTalk(name, t) {
        console.log('收到通知请求', name, t);
        var ids = [];
        name.split(';').forEach(function (v) {
            var ding = $.grep(DingUserList, function (n) { return n.name == v; });
            if (ding.length > 0) {
                ids.push(ding[0].userid);
            }
        });
        if (ids.length == 0) { console.log('推送人员空'); return false; }
        var _title = $('#story_name_view .editable-value').text()
            || $('#bug_title_view .editable-value').text()
            || $('.title-edit-wrap .editable-value').text()
            || $('#StoryName').val()
            || $('#BugTitle').val();
        var _url = "https://www.自己的域名.cn/v3/SendTapdMsg?ids=" + JSON.stringify(ids)
            + '&msg=' + encodeURIComponent('[' + t + ']' + _title);
        var xhr = new XMLHttpRequest();
        xhr.open("GET", _url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (window.Notification) {
                    chrome.extension.sendRequest({ type: 1, name: name, msg: xhr.responseText }, function (response) {
                        console.log(response);
                    });
                } else { alert('消息已发送，当前浏览器不支持推送消息'); }
            }
        }
        xhr.send();
    }
});

后台代码backgroup.js

window.onload = function () {
    // new Notification('当前浏览器可推送钉钉消息', {
    // icon: '48.png',
    // body: '推送成功后，这里会展示名字。请忽略本消息'
    // });
    chrome.extension.onRequest.addListener(
        function (request, sender, sendResponse) {
            if (request.type == 1) {
                new Notification('推送钉钉消息', {
                    icon: '48.png',
                    body: '接收消息的用户：' + request.name
                });
            }
        });
}

通知部分如果不注释，每次打开浏览器都会弹框，有些浏览器会认为这是不友好的表现，会被直接禁止

其他扩展api说明，大多是谷歌翻译过来的
http://open.chrome.360.cn/extension_dev/content_scripts.html

如果发送钉钉消息，ASP.NET版本后期更新

谷歌插件开发（TAPD工单发送钉钉消息）

manifest.json

实现代码myscript.js

后台代码backgroup.js

猜你喜欢

热点阅读