javascript 如何修复'addEventListener'在Violentmonkey或Tampermonkey Chrome扩展中不起作用？

我想一个按钮，将自动点击后0.1秒，在文本框中输入5个字符。
这段代码在浏览器的控制台（developer.F12）部分可以正常工作。但我希望这段代码通过Greasemonkey/Tampermonkey扩展在浏览器中永久执行。

var textbox = document.getElementById("Text");

var button = document.getElementsByClassName("btn")[0];

textbox.addEventListener("input", function() {
  var inputText = textbox.value.trim();
  if (inputText.length === 5) {
    setTimeout(function() {
      button.click();
    }, 100);
  }
});

但是这在Greasemonkey/Tampermonkey Chrome扩展中不起作用。
请看这张图片：

如何在Greasemonkey/Tampermonkey Chrome扩展程序中运行此代码？
更新：
回复** Alexandria Nenashev**：
让我解释一下我想用这段代码做什么。例如，我想登录按钮，以自动点击在登录部分的每一个网站页面后，输入一个5位数的密码。这些元素也存在于网站上，我通过开发人员部分的浏览器控制台（F12）导入此代码，它可以工作，但只要页面刷新，我就必须再次导入此代码，我的问题就在这里。我希望这个JavaScript代码永久在每个网站的背景。我希望它是活跃的，根据我的研究，tampermonkey扩展似乎可以做到这一点，但不适合我！

我把你的代码放在Tampermonkey扩展中，但不幸的是，我得到了和以前一样的错误...而且我们在所需的网站上有可用的元素

您的错误解释：document.getElementById("Text");返回null，因为在运行monkey脚本时页面上还没有这样的文本框。
当您在控制台中运行代码时，元素会出现，因此不会出现任何问题。
我相信一个猴子脚本在DOMContentLoaded之后运行。但是...
页面可以在此之后创建元素（例如，从后端加载一些HTML块并插入到页面中）。所以...
您应该查看页面以获取所需的元素。简单的方法是使用setTimeout()稍后运行代码，希望元素在这里。并且可能重复该过程，在找到元素时停止。
但有一个更“优雅”的方法。在我的monkey脚本中，我使用MutationObserver：

// emulate code on the page

document.querySelector('button').addEventListener('click', e => {

  e.target.remove();

  document.querySelector('.container').innerHTML = `
    <input id="Text">
    <button class="btn">Auto click me</button>
    <div class="log"></div>
  `;

  const textbox = document.querySelector('#Text');
  textbox.focus();

  document.querySelector('.btn').addEventListener('click', () => {
    document.querySelector('.log').innerHTML += `<div>${textbox.value.trim()}</div>`;
    textbox.value = '';
  });
  
});

// your code, watch for body mutations and add listeners;

let observer = new MutationObserver(addListener);

/*
  if you have more specific container where to look and 
  it's present on DOMContentLoaded - use here.
*/
observer.observe(document.body, {childList: true, subtree: true});

function addListener(){

  const textbox = document.querySelector('#Text');
  const button = document.querySelector('.btn');

  if(!textbox || !button){
    return; // not on the page yet
  }

  textbox.addEventListener('input', () => {
    textbox.value.trim().length === 5 && setTimeout(() => button.click(), 100);
  });
  
  // stop observing since you've attached the listener
  
  observer.disconnect();
  observer = null;

  // stackoverflow's console.log() mutates DOM so use it after disconnecting
  console.log('the listener has been added');

};

<button>Add elements</button>
<div class="container"></div>

更新

如果一个事件冒泡，你可以在document上捕获它：

// emulate code on the page

document.querySelector('button').addEventListener('click', e => {

  e.target.remove();

  document.querySelector('.container').innerHTML = `
    <input id="Text">
    <button class="btn">Auto click me</button>
    <div class="log"></div>
  `;

  const textbox = document.querySelector('#Text');
  textbox.focus();

  document.querySelector('.btn').addEventListener('click', () => {
    document.querySelector('.log').innerHTML += `<div>${textbox.value.trim()}</div>`;
    textbox.value = '';
  });
  
});

// your code, watch for inputs to change

document.addEventListener('input', e => {

  const button = document.querySelector('.btn');

  e.target.value.trim().length === 5 && setTimeout(() => button.click(), 100);

});

<button>Add elements</button>
<div class="container"></div>

javascript 如何修复'addEventListener'在Violentmonkey或Tampermonkey Chrome扩展中不起作用？

1条答案

相关问题

热门标签

最新问答