Блог

Я хотел бы создать пользовательский скрипт (tampermonkey), который проверит, было ли изменено изображение. Сравнение должно выполняться каждые 5 секунд. Я новичок, и я, хотя setInterval выполнит эту работу, но после обновления сайта интервал не выполняется. Есть ли другой способ выполнять некоторый код каждые 5 секунд, который будет работать после обновления? Я также не уверен, что изображения сравнения были хорошо записаны.

 // ==UserScript==
// @name         Nowy123
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        none
// @include      *.*.*
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    document.addEventListener("keydown", event => {
       if (event.keyCode === 79) {
           console.log("pressed o");
           console.log("interval started");

           //image
           let img = document.querySelector('.contentContainer').querySelector('.heroImage');
           var canvas = document.createElement('canvas');
           var context = canvas.getContext('2d');
           canvas.width = img.width;
           canvas.height = img.height;
           context.drawImage(img, 0, 0 );
           var refImg = context.getImageData(0, 0, img.width, img.height);
           localStorage.setItem('refImg',refImg);

           let intervalNum = setInterval(specHero, 5000);
           localStorage.setItem('intervalNum', intervalNum);
       }
    });
    document.addEventListener("keydown", event => {
       if (event.keyCode === 80) {
           console.log("pressed p");
           console.log("interval stopped");
           let intervalNum = localStorage.getItem('intervalNum');
           clearInterval(intervalNum);
           window.localStorage.clear();
       }
    });

    function specHero(){
       let img = document.querySelector('.contentContainer').querySelector('.heroImage');
       var canvas = document.createElement('canvas');
       var context = canvas.getContext('2d');
       canvas.width = img.width;
       canvas.height = img.height;
       context.drawImage(img, 0, 0 );
       var imgData = context.getImageData(0, 0, img.width, img.height);
       let refImg = localStorage.getItem('refImg');
       let result = isMatch(imgData, refImg);
       console.log(result);
       location.reload();
    }

    function isMatch(data1,data2){
    for(var i = 0; i<data1.length; i  ){
        if(data1[i] != data2[i]) return false;
    }
    return true;
}

})();