Как прослушивать события веб-страницы с расширением Chrome

Question

У меня есть веб-страница с пользовательскими событиями, которые я хотел бы слушать с расширением chrome. Каждый раз, когда поступает заказ, веб-страница получает заказ и обновляет небольшой номер уведомления с указанием количества ожидающих заказов. Я хочу создать расширение chrome, чтобы прослушивать это событие и в будущем иметь возможность выбирать ордер и выполнять над ним действия.

Прежде всего, возможно ли это?

В исходном коде веб-сайта, который я нашел с помощью F12 на Chrome, я обнаружил orderHandler. js file

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");}};})();

Многие обработчики, как представляется, являются случаями сбоя, и какое сообщение выводить в зависимости от который. Мне было трудно расшифровать, что он делает и как я могу создать фон. js для прослушивания функции getOrder.

Любая помощь с этим будет принята с благодарностью! Попросите любые разъяснения в комментариях!

ОБНОВЛЕНИЕ

Через полезные комментарии ниже. Я вижу, что в окне. OrdersHandler доступны функции

Можно ли использовать эти функции и как мне подключить их к слушателю? chrome .runtime.addListener ()

Answer 1

Поскольку OrdersHandler является глобальным, и поскольку у него есть свойства, которые вас интересуют, непосредственно назначенные объекту, вы можете перезаписать свойства, которые вам нужны, с помощью собственных логик c. Все свойства имеют вид:

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 определен, просто перезапишите интересующее вас свойство (или свойства). Скопируйте и вставьте оригинал код, а затем добавьте любой пользовательский лог c, который вы хотите. Например, чтобы обезопасить getOrder, чтобы он регистрировал 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 на страницу, IMO)