如何使用 Javascript“查找”由 Angular 组件提供的元素？答案

【问题标题】：How to 'Find' elements served by Angular components using Javascript?如何使用 Javascript“查找”由 Angular 组件提供的元素？
【发布时间】：2022-01-16 12:01:55
【问题描述】：

我正在尝试创建一个 Chrome 扩展程序以在页面中注入一个对话框。该页面似乎是使用 Angular 开发的：

<body al-exchange al-window-click ng-controller="PageCtrl as PageCtrl" class="" ng-class="...

我的问题：我试图在页面上找到一个按钮（唯一的按钮），但我使用的选择器似乎找不到它。

// 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 );

如果我只显示一个警告对话框，上面的代码就可以工作，所以我知道它正在触发。

我注意到（使用 Chrome 开发工具）如果我使用 Inspect 工具，我可以看到按钮元素，但如果我使用“查看页面源”工具，则没有实际控件，只有 div和脚本标签。

我已经编辑了我的原始问题以包含按钮 html 我希望这会有所帮助。 :-) ==>

<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>

我已经进一步编辑了这个问题

我现在更新了我的扩展程序中的代码。我现在使用 'DOMContentLoaded' 事件来搜索按钮。

警报触发，但仍然显示页面中有 0 个按钮。

//=======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 );

任何有助于了解正在发生的事情，都会很棒！ :-)

【问题讨论】：

确保在应用加载后查找按钮（任何客户端框架都会出现这种情况）。除此之外，角度本身并没有什么特别之处。这是指定正确选择器的问题。如果您仍有问题，请发布相关按钮的 html，以便我们就选择器提供帮助。
谢谢，我已编辑问题以包含更多信息
@Neea，感谢您的输入，我终于弄清楚了如何选择按钮。创建一个答案，我会将其标记为正确。

标签： javascript angularjs google-chrome-extension jquery-selectors google-chrome-devtools

【解决方案1】：

我真的是在黑暗中拍摄，结果非常简单：

答案是使用 document.querySelector 并搜索具有两个类的按钮元素：

document.querySelector("button.fillbutton.fillbutton--blue").addEventListener('click', function () { ... some function here ... }

非常感谢您的回复 Neea，它给了我继续努力所需的信心。 :-)

【讨论】：