1

Boa tarde!

Estou tentando criar uma extensão para clicar automaticamente em um botão de uma página a cada X segundos. No meu caso é uma ferramenta de trabalho chamada ServiceNow, onde tem painéis com relatórios em tempo real, porém o menu onde ficam os chamados que tenho que atender não atualiza sozinho, apenas se clicar em um botão com ícone de Refresh.

O problema é que ele não executa a função que deveria (acredito que seja problema no 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: Já tentei sem o ::before, tentei só com a class .header-tools e até pelo atributo [style="background-color: #1d7f00"] mas nada adiantou.

1 Resposta 1

4

O problema é o seletor mesmo, se verificar o retorno dele é null. Você pode usar como seletor:

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>

9
  • Show! E como faço para selecionar com o atributo também? No caso o mesmo que eu coloquei ali. Existem 5 botões desse na página, 4 deles nos painéis que são real-time (wtf?) e mais esse que fica pra atualizar o Dashboard. Eu teria que selecionar ele em específico e a única distinção é o style="background-color: #1d7f00". 10/03/2021 às 16:19
  • 1
    @RogerWindberg o aria-label e data-original-title são iguais em todos? 10/03/2021 às 16:21
  • O data-original-title são iguais em todos porém o aria-label é único para cada um. 10/03/2021 às 16:29
  • 1
    @RogerWindberg pode fazer a consulta por ele então, editei a resposta. 10/03/2021 às 16:31
  • 1
    @RogerWindberg uma dica: se você precisa fazer uma interação com a página que não necessita utilizar nenhuma API de "baixo nível" que extensões usam, é mais simples criar um userscript do que uma extensão. Até como exemplo, tenho um script para resgatar pontos de canais automaticamente na Twitch (que é basicamente a mesma coisa que o seu script faz): exemplo 10/03/2021 às 16:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .