Chrome扩展程序:调试程序API不会触发事件

时间:2015-05-11 19:45:32

标签: google-chrome google-chrome-extension

我想听一下tab中发生的所有时间轴事件, 我创建了一个扩展

chrome.browserAction.onClicked.addListener(function(tab) {
    var tabId = tab.id;

    console.log("tabId = ", tabId);

    if (running === false) {
        checkAvailable();

        chrome.debugger.attach({
            tabId: tabId
        }, protocolVersion, function() {
            running = true;

            if (chrome.runtime.lastError) {
                console.log(chrome.runtime.lastError.message);
                return;
            }

            chrome.debugger.sendCommand({
                tabId: tabId
            }, "Tracing.start", { "maxCallStackDepth" : 5 }, function(response) {

                console.log(response);              
                // listening for responses from Timeline
                chrome.debugger.onEvent.addListener(function(tabId, method, params) {
                    console.log("params = ", params);
                });
            });



            chrome.debugger.onDetach.addListener(function (source, reason) {
                running = false;
            });
        });        
    } else {
        chrome.debugger.detach({
            tabId: tabId
        }, null);
        running = false;
    }
}); 

点击图标后,我可以在页面顶部看到黄色条,消息为"扩展名正在调试此页面"。

然而,在F5之后,我没有看到我的分机听取时间线事件。

看起来事件尚未分配。

chrome.debugger.onEvent.addListener(function(tabId, method, params) {
    console.log("params = ", params);
});

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

您似乎忘记了发送// handlebars js Template <script id="photo-template" type="text/x-handlebars-template"> <tr id="red-{{id}}"> <td><img class="chat-img mr-2" src="{{avatar}}" alt="">{{short_name}}</td> <td> <input type="hidden" id="redurl-{{id}}" value="{{full_url}}" /> <button data="{{id}}" type="button" class="btn btn-success addlibrary"><i class="ti-plus"></i> To Library</button> </td> </tr> </script> // Generated photoHtml <tr id="red-124"> <td><img class="chat-img mr-2" src="https://images.espn.com/image.jpg" alt="">Testing</td> <td> <input type="hidden" id="redurl-124" value="https://www.espn.com" /> <button data="124" type="button" class="btn btn-success addlibrary"><i class="ti-plus"></i> To Library</button> </td> </tr> //AJAX SUCCESS success: function (response) { var resp_obj = response; var photoTmplScript = $("#photo-template").html(); var photoTmpl = Handlebars.compile(photoTmplScript); var photoHtml = photoTmpl(resp_obj.data); // this works, row is added to table and this is the original question I had. table count not being updated //$('#table-body').prepend(photoHtml); // prints out the html code for the row correctly with data coming back from AJAX. Reference above for created html code console.log(photoHtml); var table = $('#scroll-vertical-datatable').DataTable(); // row is added to table blank, photoHTML is not being added to the DataTable, table count is updated and reflects new row table.row.add(photoHtml).draw(); }

Debugger.enable

开始之前

chrome.debugger.sendCommand(
        { tabId: tabId }, "Debugger.enable", {}, () => {

这是一个有效的版本:

chrome.debugger.sendCommand({
                tabId: tabId
            }, "Tracing.start", { "maxCallStackDepth" : 5 }, function(response) {