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版本 后期更新