Chrome extension code problem

Question

Good afternoon!

I’m trying to create an extension to automatically click a one-page button every X seconds. In my case is a working tool called Servicenow, where there are panels with reports in real time, but the menu where are the calls I have to answer does not update alone, only if you click a button with Refresh icon.

The problem is that it does not perform the function it should (I believe it is a problem in querySelector).

div do botão

<div class="header-tools" style="background-color: #1d7f00">
<button tabindex="0" class="btn header-icon icon-refresh" style="color: #FFFFFF" aria-label="Atualizar Widget Dashboard Fila Atendimento - Incidentes" title="" data-original-title="Atualizar"></button>
</div>

manifest.json

{
"manifest_version": 2,
"name": "Auto Refresh - ServiceNow",
"description": "Extensão para o Google Chrome que atualiza automaticamente o ServiceNow.",
"version": "1.1",
"icons": {
"128": "128.png"
},
"content_scripts": [{
"matches": ["https://renner.service-now.com/*"],
"js": ["autorefresh-servicenow.js"]
}]
}

autorefresh-servicenow.js

;(function( doc ) {
  'use strict';
  
  console.log( "Auto Refresh - ServiceNow" );
  var $autorefreshsn;
  
  window.setInterval(function() {
    var $autorefreshsn = document.querySelector('button.btn.header-icon.icon-refresh::before');
    if( ! $autorefreshsn ) {
        return;
    }
    
    $autorefreshsn.click();
  }, 3000);
})( document );

Obs: I’ve tried without the ::before, I tried only with the class .header-tools and even by the attribute [style="background-color: #1d7f00"] but nothing helped.

Answer 1

The problem is the selector itself, if check its return is null. You can use as selector:

button[aria-label="Atualizar Widget Dashboard Fila Atendimento - Incidentes"]

(function(doc) {
  'use strict';
  
  const query = 'button[aria-label="Atualizar Widget Dashboard Fila Atendimento - Incidentes"]'

  window.setInterval(function() {
    var $autorefreshsn = doc.querySelector(query);
    if (!$autorefreshsn) return;
    $autorefreshsn.click();
  }, 3000);

  // Só para logar quando ocorrer clique no botão. :)
  document.querySelector('button').addEventListener('click', () => {
    console.log('Fui clicado...')
  })
})(document);

<div class="header-tools" style="background-color: #1d7f00">
<button tabindex="0" class="btn header-icon icon-refresh" style="color: #FFFFFF" aria-label="Atualizar Widget Dashboard Fila Atendimento - Incidentes" title="" data-original-title="Atualizar">Botão</button>
</div>