I am trying to create a Chrome Extension to inject a dialog in a page. The page appears to be developed using Angular:
<body al-exchange al-window-click ng-controller="PageCtrl as PageCtrl" class="" ng-class="...
My issue: I am trying to find a button (the only button) on the page, but the selector I am using cannot seem to find it.
// 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 );
The code above works if I just display an alert dialog, so I know it's firing.
I noticed (using the Chrome dev tools) I can see the button element if I use the Inspect tool but if I use the 'view page source' tool there are no actual controls, just div's and script tags.
<== I have edited my original question to include the button html I hope this helps. :-) ==>
<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>
I have edited this question further
I have now updated my code in my extension. I now use the 'DOMContentLoaded' event to searches for the button.
The alert fires but it still says there are 0 buttons in page.
//=======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 );
Any help in understanding what is happening, would be great! :-)
I was really shooting in the dark, it ended up being extremely simple:
The answer was to use document.querySelector and search for a button element with two classes:
document.querySelector("button.fillbutton.fillbutton--blue").addEventListener('click', function () { ... some function here ... }
Thanks so much for your response Neea, it gave me the confidence I needed to keep trying. :-)