chrome插件实践-基于禅道的bug自定义统计

2017-01-01 10:46

你需要了解的内容

-Chrome扩展文件

  • Chrome扩展文件以.crx为后缀名,在Google Chrome扩展官方网站下载扩展时,Chrome会将.crx文件下载到Chrome的Application Data文件夹的User Data\Temp下,一般是C:\Documents and Settings*User*\Local Settings\Application Data\Google\Chrome\User Data\Temp,安装完成或者取消安装,该文件就会被删除。.crx实际上是一个压缩文件,使用解压文件打开这个文件就可以看到其中的文件目录,下图中是“关灯看视频”扩展的截图:

Paste_Image.png

  • 因此可以认为,我们实际上就是写一个Web应用,然后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。
    2、Browser Actions(扩展图标)

  • 把Browser Actions翻译成扩展图标不是很准确,但它的功能就是把你的应用显示在Chrome工具栏上。我们在上面看到一个文件manifest.json,就是使用这个文件来把相应的图标和其他参数注册到Browser Actions。比如下图中就是EverNote的扩展图标。

Paste_Image.png
3、Page Actions(地址栏图标)

  • 如果你熟悉一些Chrome插件的话,你一定会发现有些扩展的图标不是显示在地址栏的右边,而是显示在地址内部右方,这就是Page Actions地址栏图标。

Paste_Image.png

  • 可以看出上面中有三个Page Actions,图中我标出的是Chrome添加书签,现在你就会发现其实这个也是Chrome的扩展,只不是它是直接内置在Chrome的。
  • Page Actions与Browser Actions的区别就是Page Actions不是随时都是显示的,必须在特定的页面中这个功能才能使用。因此在开发中注意:如果不是全部页面中都能使用的功能请使用Page Actions方式。 4、popup弹出窗口 popup属于Browser Actions,当点击图标时出现这个窗口,可以在里面放置任何html元素,它的宽度是自适应的。当然,这个弹出窗口不会被Chrome拦截的:) 如下图中是evernote的popup窗口:

Paste_Image.png
5、Background Pages后台页面
这个窗口不会显示,它是扩展程序的后台服务,它会一直保持运行。比如在一些需要数据保存程序中,如果当前用户关闭popup,就需要Background Pages来进行相应的操作。

实践

  • 自动统计禅道的周统计,上周遗留
  • popup.html中popup.js发送统计信息给d.js,d.js统计好数据后在返回给popup.js
  • manifest.json是配置文件
{

"name": "Long Extension Title",

"short_name": "Short Name",

"version": "1.0.0",

"manifest_version": 2,

"description": "Description of the Extension",

"icons": {

"128": "16.png"

},

"browser_action": {

"default_icon": "16.png",

"default_title": "",

"default_popup": "popup.html"

},

"background": {

"scripts": ["background.js"]

},

"content_scripts": [{

"matches": ["http://182.254.228.211:9099/*"],

"js": ["d.js","jquery.js"],

"run_at": "document_end"

}],

"permissions": [

"tabs",

"http://182.254.228.211:9099/"

],

"web_accessible_resources": ["popup.js"]

}
  • popup.js主要是针对于popup.html中的元素操作,其中chrome.tabs.sendMessage是发送一个类似于广播的信息出去 d.js 是实际操作页面元素的脚本 
  • popup.js代码:
document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('#weekAddBug').addEventListener('change', changeHandler);
    document.querySelector('#WeekRsoleBug').addEventListener('change', changeHandler);
    document.querySelector('#lastWeekNoBug').addEventListener('change', changeHandler);
    document.querySelector('#noRsoleBug').addEventListener('change', changeHandler);
    document.querySelector('#resoleBug').addEventListener('change', changeHandler);
});

function changeHandler(){
    //Do Something...maybe another function showAlert(), for instance
    if(document.getElementById("weekAddBug").checked){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {startDate: $("#tbStartDate").val(),BugType:"weekAddBug"}, function(response) {
                console.log(response.farewell);
            });
        });
        chrome.tabs.executeScript({
            file: 'd.js'
        });
    }
    if(document.getElementById("WeekRsoleBug").checked){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {startDate: $("#tbStartDate").val(),BugType:"WeekRsoleBug"}, function(response) {
                console.log(response.farewell);
            });
        });
        chrome.tabs.executeScript({
            file: 'd.js'
        });
    }

    if(document.getElementById("lastWeekNoBug").checked){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {startDate: $("#tbStartDate").val(),BugType:"lastWeekNoBug",endDate:$("#tbEndDate").val()}, function(response) {
                console.log(response.farewell);
            });
        });
        chrome.tabs.executeScript({
            file: 'd.js'
        });
    }
    if(document.getElementById("noRsoleBug").checked){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {BugType:"noRsoleBug"}, function(response) {
                console.log(response.farewell);
            });
        });
        chrome.tabs.executeScript({
            file: 'd.js'
        });
    }
    if(document.getElementById("resoleBug").checked){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {BugType:"resoleBug"}, function(response) {
                console.log(response.farewell);
            });
        });
        chrome.tabs.executeScript({
            file: 'd.js'
        });
    }

}
  • d.js中的代码
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log(sender.tab ?
        "from a content script:" + sender.tab.url :
            "from the extension");

        if (request.BugType == "weekAddBug"){
            weekAddFindBug(request.startDate);
            sendResponse({farewell: "新增Bug统计"});
        }
        if (request.BugType == "WeekRsoleBug"){
            WeekRsoleBug(request.startDate);
            sendResponse({farewell: "本周实解Bug统计"});
        }
        if (request.BugType == "lastWeekNoBug") {
            lastWeekNoBug(request.startDate, request.endDate);
            sendResponse({farewell: "上周遗留Bug统计"});
        }
        if (request.BugType == "noRsoleBug"){
            noRsoleBug();
            sendResponse({farewell: "没有解决总数Bug统计"});
        }
        if (request.BugType == "resoleBug"){
            resoleBug();
            sendResponse({farewell: "解决总数Bug统计"});
        }

    });


//本周新增

function  weekAddFindBug(d)
{
//d:"2015-10-9"
    $("#bysearchTab").click();
    setTimeout(1000);
    $("#searchmore").click();
//创建日期
    $("#field2 option").eq(27).attr("selected", "selected");
//创建日期选择条件
    $("#operator2 option").eq(3).attr("selected", "selected");
//创建的具体日期
    $("#value2").val(d);
    $("#value5").val("");
    $("#submit").click();
}

如何打包chrome插件

  • 打开chrome浏览器的开发中选项,点击“打包扩展程序…”,弹出打包选择文件窗口,在扩展程序根目标中找到我们建立的文件夹,私有密码文件第一次不用选择。点击确定,它会在根文件夹同一级生成XXX.crx和XXX.pem,XXX.pem是程序签名文件。把XXX.crx拖进Chrome窗体内,就会把这个应用XXX插件安装在Chrome里。

Paste_Image.png

更多参考