Estoy tratando de crear una extensión de Chrome para inyectar un cuadro de diálogo en una página. La página parece estar desarrollada usando Angular:
<body al-exchange al-window-click ng-controller="PageCtrl as PageCtrl" class="" ng-class="...Mi problema: estoy tratando de encontrar un botón (el único botón) en la página, pero parece que el selector que estoy usando no puede encontrarlo.
// jquery function FindButton(){ $(function(){ var num = 0; $(":button").each(function(btn){ num = num + 1; }) alert('Jquery - There are ' + num + ' buttons in page'); }); } var filter = {... chrome.webNavigation.onBeforeNavigate.addListener( FindButton, filter );El código anterior funciona si solo muestro un cuadro de diálogo de alerta, así sé que se está activando.
Noté ( usando las herramientas de desarrollo de Chrome ) que puedo ver el elemento del botón si uso la herramienta Inspeccionar, pero si uso la herramienta 'ver código fuente de la página' no hay controles reales, solo div y etiquetas de script.
<== He editado mi pregunta original para incluir el botón html. Espero que esto ayude. :-) ==>
<div ng-if="some_method_here()" class="acceloCreateEditPageCardContainer__footer" ng-trasclude="footer">==$0 <create-edit-page-card-footer class="flex"> <!--> <!--> <button ng-disabled="some_text_here" ng-click="some_text_here" class="fillbutton fillbutton--blue" ng-class="some_ngclass_here">Save</button> </create-edit-page-card-footer class="flex"> </div>He editado esta pregunta más
Ahora he actualizado mi código en mi extensión . Ahora uso el evento 'DOMContentLoaded' para buscar el botón.
La alerta se dispara pero todavía dice que hay 0 botones en la página.
//=======background.js==================== function AddListner(){ document.addEventListener('DOMContentLoaded', $(function(){ var num = 0; $(":button").each(function(btn){ num = num + 1; }) alert('There are ' + num + ' buttons in page'); }) ); } var filter = { .... chrome.webNavigation.onBeforeNavigate.addListener( AddListner, filter );¡Cualquier ayuda para comprender lo que está sucediendo sería genial! :-)
Realmente estaba disparando en la oscuridad, terminó siendo extremadamente simple:
La respuesta fue usar document.querySelector y buscar un elemento de botón con dos clases:
document.querySelector("button.fillbutton.fillbutton--blue").addEventListener('click', function () { ... some function here ... }Muchas gracias por tu respuesta Neea, me dio la confianza que necesitaba para seguir intentándolo. :-)