javascript - 如何使用 Chrome 扩展监听网页事件

Question

我有一个网页，其中包含我想使用 Chrome 扩展程序监听的自定义事件。每次收到订单时，网页都会获取订单并更新一个小通知编号，其中包含有多少订单待处理。我希望创建一个 chrome 扩展来监听此事件，并在将来能够选择订单并对其执行操作。

首先，这可能吗？

在我通过 Chrome 上使用 F12 找到的网站源代码中，我找到了 orderHandler.js 文件

var OrdersHandler=new(function(){this.getOrder=function(item_id,success,fail){try{$.ajax({url:'/api/orders/'+item_id,method:"GET",headers:{"Authorization":"Bearer "+Cookies.getJSON("access_token").access_token},success:function(response,status,xhr){if(response.success){if(typeof(success)=="function"){success(response.order);}}
else{if(typeof(fail)=="function"){fail(status,response.message);}}},error:function(response,status,statusName,xhr){if(typeof(fail)=="function"){if(typeof(response.responseJSON)==="object"&&typeof(response.responseJSON.message)==="string"){fail(response.status,response.responseJSON.message);}
else{fail(response.status,response.status==0?"Network error":statusName);}}}});}
catch(e){console.log(e);onFailure(-1,"Script error");}};this.getOrdersList=function(listName,success,fail){try{$.ajax({url:'/api/orders-list/'+listName,method:"GET",headers:{"Authorization":"Bearer "+Cookies.getJSON("access_token").access_token},success:function(response,status,xhr){if(response.success){if(typeof(success)=="function"){success(response.order_items);}}
else{if(typeof(fail)=="function"){fail(status,response.message);}}},error:function(response,status,statusName,xhr){if(typeof(fail)=="function"){if(typeof(response.responseJSON)==="object"&&typeof(response.responseJSON.message)==="string"){fail(response.status,response.responseJSON.message);}
else{fail(response.status,response.status==0?"Network error":statusName);}}}});}
catch(e){console.log(e);onFailure(-1,"Script error");}};this.getOrderItem=function(item_id,success,fail){try{$.ajax({url:'/api/order_items/'+item_id,method:"GET",headers:{"Authorization":"Bearer "+Cookies.getJSON("access_token").access_token},success:function(response,status,xhr){if(response.success){if(typeof(success)=="function"){success(response.order_item);}}
else{if(typeof(fail)=="function"){fail(status,response.message);}}},error:function(response,status,statusName,xhr){if(typeof(fail)=="function"){if(typeof(response.responseJSON)==="object"&&typeof(response.responseJSON.message)==="string"){fail(response.status,response.responseJSON.message);}
else{fail(response.status,response.status==0?"Network error":statusName);}}}});}
catch(e){console.log(e);onFailure(-1,"Script error");}};this.takeOrderItem=function(item_id,success,fail){try{$.ajax({url:'/api/order_items/'+item_id+"/take",method:"POST",headers:{"Authorization":"Bearer "+Cookies.getJSON("access_token").access_token},success:function(response,status,xhr){if(response.success){if(typeof(success)=="function"){success(response.order_item);}}
else{if(typeof(fail)=="function"){fail(status,response.message);}}},error:function(response,status,statusName,xhr){if(typeof(fail)=="function"){if(typeof(response.responseJSON)==="object"&&typeof(response.responseJSON.message)==="string"){fail(response.status,response.responseJSON.message);}
else{fail(response.status,response.status==0?"Network error":statusName);}}}});}
catch(e){console.log(e);onFailure(-1,"Script error");}};this.reprocessOrderItem=function(item_id,success,fail){try{$.ajax({url:'/api/order_items/'+item_id+"/reprocess",method:"POST",headers:{"Authorization":"Bearer "+Cookies.getJSON("access_token").access_token},success:function(response,status,xhr){if(response.success){if(typeof(success)=="function"){success(response.order_item);}}
else{if(typeof(fail)=="function"){fail(status,response.message);}}},error:function(response,status,statusName,xhr){if(typeof(fail)=="function"){if(typeof(response.responseJSON)==="object"&&typeof(response.responseJSON.message)==="string"){fail(response.status,response.responseJSON.message);}
else{fail(response.status,response.status==0?"Network error":statusName);}}}});}
catch(e){console.log(e);onFailure(-1,"Script error");}};this.setSupplierOrderItem=function(item_id,supplier_id,success,fail){try{$.ajax({url:'/api/order_items/'+item_id+"/change_supplier",method:"POST",headers:{"Authorization":"Bearer "+Cookies.getJSON("access_token").access_token,"Content-Type":"application/json"},data:JSON.stringify({supplier_id:supplier_id}),success:function(response,status,xhr){if(response.success){if(typeof(success)=="function"){success(response.order_item);}}
else{if(typeof(fail)=="function"){fail(status,response.message);}}},error:function(response,status,statusName,xhr){if(typeof(fail)=="function"){if(typeof(response.responseJSON)==="object"&&typeof(response.responseJSON.message)==="string"){fail(response.status,response.responseJSON.message);}
else{fail(response.status,response.status==0?"Network error":statusName);}}}});}
catch(e){console.log(e);onFailure(-1,"Script error");}};this.releaseOrderItem=function(item_id,success,fail){try{$.ajax({url:'/api/order_items/'+item_id+"/release",method:"POST",headers:{"Authorization":"Bearer "+Cookies.getJSON("access_token").access_token},success:function(response,status,xhr){if(response.success){if(typeof(success)=="function"){success(response.order_item);}}
else{if(typeof(fail)=="function"){fail(status,response.message);}}},error:function(response,status,statusName,xhr){if(typeof(fail)=="function"){if(typeof(response.responseJSON)==="object"&&typeof(response.responseJSON.message)==="string"){fail(response.status,response.responseJSON.message);}
else{fail(response.status,response.status==0?"Network error":statusName);}}}});}
catch(e){console.log(e);onFailure(-1,"Script error");}};this.setOrderItemEarnPrice=function(item_id,price,success,fail){try{$.ajax({url:'/api/order_items/'+item_id,method:"PATCH",data:JSON.stringify({earn_price:price}),headers:{"Authorization":"Bearer "+Cookies.getJSON("access_token").access_token,"Content-type":"application/json"},success:function(response,status,xhr){if(response.success){if(typeof(success)=="function"){success(response.order_item);}}
else{if(typeof(fail)=="function"){fail(status,response.message);}}},error:function(response,status,statusName,xhr){if(typeof(fail)=="function"){if(typeof(response.responseJSON)==="object"&&typeof(response.responseJSON.message)==="string"){fail(response.status,response.responseJSON.message);}
else{fail(response.status,response.status==0?"Network error":statusName);}}}});}
catch(e){console.log(e);onFailure(-1,"Script error");}};this.confirmOrderItemDelivered=function(item_id,success,fail){try{$.ajax({url:"/api/order_items/"+item_id+"/confirm_delivered",method:"POST",headers:{"Authorization":"Bearer "+Cookies.getJSON("access_token").access_token},success:function(response,status,xhr){if(response.success){if(typeof(success)=="function"){success(response.order_item);}}
else{if(typeof(fail)=="function"){fail(status,response.message);}}},error:function(response,status,statusName,xhr){if(typeof(fail)=="function"){if(typeof(response.responseJSON)==="object"&&typeof(response.responseJSON.message)==="string"){fail(response.status,response.responseJSON.message);}
else{fail(response.status,response.status==0?"Network error":statusName);}}}});}
catch(e){console.log(e);onFailure(-1,"Script error");}};this.markOrderItemDelivered=function(item_id,delivery_proof,files,success,fail){try{$.ajax({url:"/api/order_items/"+item_id+"/mark_delivered",method:"POST",data:JSON.stringify({delivery_proof:delivery_proof,files:files}),headers:{"Authorization":"Bearer "+Cookies.getJSON("access_token").access_token,"Content-type":"application/json"},success:function(response,status,xhr){if(response.success){if(typeof(success)=="function"){success(response.order_item);}}
else{if(typeof(fail)=="function"){fail(status,response.message);}}},error:function(response,status,statusName,xhr){if(typeof(fail)=="function"){if(typeof(response.responseJSON)==="object"&&typeof(response.responseJSON.message)==="string"){fail(response.status,response.responseJSON.message);}
else{fail(response.status,response.status==0?"Network error":statusName);}}}});}
catch(e){console.log(e);onFailure(-1,"Script error");}};this.addChatMessage=function(item_id,message,success,fail){if(message.length<3){return;}
try{$.ajax({url:'/api/order_items/'+item_id+"/chats",method:"POST",data:JSON.stringify({message:message}),headers:{"Authorization":"Bearer "+Cookies.getJSON("access_token").access_token,"Content-type":"application/json"},success:function(response,status,xhr){if(response.success){if(typeof(success)=="function"){success(response);}}
else{if(typeof(fail)=="function"){fail(status,response.message);}}},error:function(response,status,statusName,xhr){if(typeof(fail)=="function"){if(typeof(response.responseJSON)==="object"&&typeof(response.responseJSON.message)==="string"){fail(response.status,response.responseJSON.message);}
else{fail(response.status,response.status==0?"Network error":statusName);}}}});}
catch(e){console.log(e);onFailure(-1,"Script error");}};})();

许多处理程序似乎都是失败案例，并且根据失败情况输出什么消息。我很难破译它在做什么以及如何制作一个 background.js 来监听 getOrder 函数。

任何有关这些的帮助将不胜感激!请在评论中寻求任何澄清!

更新

通过下面有用的评论。我可以看到 window.OrdersHandler 有可用的功能

这些函数是否可用以及如何将其连接到监听器？chrome.runtime.addListener()？

Answer 1

因为 OrdersHandler 是全局的，并且因为它具有您感兴趣的直接分配给对象的属性，所以您可以用自己的逻辑覆盖您关心的属性。所有属性看起来都具有以下形式:

this.getOrder = function (item_id, success, fail) {
    try {
        $.ajax({
            url: '/api/orders/' + item_id, method: "GET", headers: { "Authorization": "Bearer " + Cookies.getJSON("access_token").access_token }, success: function (response, status, xhr) {
                if (response.success) { if (typeof (success) == "function") { success(response.order); } }
                else { if (typeof (fail) == "function") { fail(status, response.message); } }
            }, error: function (response, status, statusName, xhr) {
                if (typeof (fail) == "function") {
                    if (typeof (response.responseJSON) === "object" && typeof (response.responseJSON.message) === "string") { fail(response.status, response.responseJSON.message); }
                    else { fail(response.status, response.status == 0 ? "Network error" : statusName); }
                }
            }
        });
    }
    catch (e) { console.log(e); onFailure(-1, "Script error"); }
};

定义父 OrdersHandler 对象后，只需覆盖您感兴趣的一个或多个属性即可。复制并粘贴原始代码，然后添加您想要的任何自定义逻辑。例如，要对 getOrder 进行 Monkeypatch，以便在成功时记录 response.order，您可以执行以下操作:

OrdersHandler.getOrder = function (item_id, success, fail) {
    try {
        $.ajax({
            url: '/api/orders/' + item_id, method: "GET", headers: { "Authorization": "Bearer " + Cookies.getJSON("access_token").access_token }, success: function (response, status, xhr) {
                if (response.success) { if (typeof (success) == "function") {
                  console.log(response.order); // <--------------------------
                  success(response.order);
                } }
                else { if (typeof (fail) == "function") { fail(status, response.message); } }
            }, error: function (response, status, statusName, xhr) {
                if (typeof (fail) == "function") {
                    if (typeof (response.responseJSON) === "object" && typeof (response.responseJSON.message) === "string") { fail(response.status, response.responseJSON.message); }
                    else { fail(response.status, response.status == 0 ? "Network error" : statusName); }
                }
            }
        });
    }
    catch (e) { console.log(e); onFailure(-1, "Script error"); }
};

网站加载后，您可以将该代码粘贴到浏览器控制台中。您还可以写 userscript每当加载页面时自动运行该代码。 (你也可以编写一个扩展，但是当你只想将一些 JS 注入(inject)到页面中时，扩展就太过分了，IMO)