clearInterval не работает в расширении Chrome

Question

Я пытаюсь создать расширение Chrome, которое:

1. перезагружает URL-адрес вкладки, на которой запущено расширение (например, www.example.com). ) каждые 7 секунд и выполняет текстовый поиск по «Тексту» на нем;
2. , если существует «Текст», тогда расширения прекращают перезагружать страницу, выбирают определенную радиокнопку и нажимают на определенная кнопка на www.example.com.

Мое всплывающее окно. html имеет простой пользовательский интерфейс с двумя кнопками «Выполнить» и «Остановить», соответственно, для запуска и остановки функции перезагрузки и поиска, описанной выше .

Сценарий на моей всплывающей странице называется "app. js": <script src="app.js" charset="UTF-8"></script>

Чтобы мой скрипт содержимого выполнял функцию перезагрузки и поиска на веб-странице, где расширение запущено, www.example.com, приложение. js программно внедряет файл кода. js (с функцией перезагрузки и поиска) в него, когда пользователь нажимает кнопку «Выполнить» в пользовательском интерфейсе. И поскольку я хотел бы также иметь возможность остановить функцию перезагрузки и поиска из пользовательского интерфейса, приложение. js вставляет код clearInterval (функция), когда пользователь нажимает кнопку «Стоп» в пользовательском интерфейсе.

Вот как выглядит app. js:

chrome.tabs.query({active: true, currentWindow: true}, function(tab) {
document.querySelector('.button-run').addEventListener('click', () => {
    chrome.tabs.executeScript(tab.id, { file: 'code.js'}
    );
    });
});


chrome.tabs.query({active: true, currentWindow: true}, function(tab) {
document.querySelector('.button-stop').addEventListener('click', () => {
    chrome.tabs.executeScript(tab.id, { code: 'clearInterval(timer);'}
    );
    });
});

Это код. js:

function reloadAndFind() {

    if (document.body.innerHTML.search("Text") != -1) {

    clearInterval(timer); 
        // this is to stop the page from reloading when "Text" is found

    beep();
       // this is to call a beep() function coded elsewhere in code.js to make a "beep" sound when "Text" is found

    var radioButton = document.querySelectorAll('input[type=radio]'); 
        // this is to store the specific radio button I am interested in

    var button = document.getElementById("continue-button"); 
       // this is to store the specific button I am interested in 

    radioButton.checked = true;
    button.click();

    } 
}

timer = setInterval(function(){location.reload(); reloadAndFind();}, 7000); 
      // this is to concurrently perform a page reload and call the reloadAndFind() function on the page every 7 seconds

У меня две проблемы:

1. Остановка функции: Когда я нажимаю кнопку «Выполнить» в моем пользовательском интерфейсе, запускается функция reloadAndFind (), и страница перезагружается каждые 7 секунд , После нескольких перезагрузок, когда www.example.com показывает «Текст», я знаю, что функция нашла сигнал, потому что функции beep () предупреждают меня, выбран переключатель и кнопка нажата. Однако clearInterval (таймер), похоже, не работает, и страница продолжает перезагружаться снова и снова. кажется , однако, работает, когда clearInterval () вводится приложением. js, когда я нажимаю кнопку "Стоп" в моем пользовательском интерфейсе. Но это бесполезно, так как я хочу, чтобы расширение могло самостоятельно остановить перезагрузку, когда я не на передней панели моего компьютера. Кроме того, появляется проблема № 2.
2. Использование «Стоп» для остановки функции работает только частично: Когда я нажимаю кнопку «Стоп» в моем пользовательском интерфейсе и вводится clearInterval (таймер) через стоп-код. js, фактически останавливает перезагрузку страницы. Однако, если я открою другую вкладку на Chrome и go до www.example.com, то страница продолжит перезагружаться, как будто я никогда не вводил clearInterval (таймер).

Как решить проблему 1 и 2? Пожалуйста, учтите, что я очень новичок * от 1050 * до javascript и для программирования в целом.

Если полезно, это мой манифест. json:

{
   "manifest_version": 2,
   "name": "Find Text",
   "version": "0.1",
   "permissions": [ "activeTab", "tabs", "storage", "browsingData", "notifications", "http://*/", "https://*/"],
   "content_scripts": [{
      "matches": ["https://www.example.com/*"],
      "all_frames": true,
      "js": ["app.js", "code.js"]
   }],
   "browser_action": {
      "default_popup": "popup.html",
      "default_title": "Find Text"
   }  
}

Answer 1

ОБНОВЛЕНИЕ:

Я изменил свое расширение, пытаясь следовать ценной информации wOxxOm, но оно все равно не работает.

Теперь у меня есть background. js script:

chrome.runtime.onMessage.addListener(function(message, callback){
   if(message === 'start') {
      var timer;
      timer = setInterval(function(){chrome.tabs.reload; chrome.tabs.executeScript({ file: 'code.js'});}, 7000);
   } else if(message === 'stop') {
      clearInterval(timer);
   }
});

Я изменил app. js следующим образом:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
document.querySelector('.button-run').addEventListener('click', () => {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": 'start'});
    });
});

chrome.tabs.query({active: true, currentWindow: true}, function(tab) {
document.querySelector('.button-stop').addEventListener('click', () => {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": 'stop'});
    });
});

Измененный и упрощенный контент сценарий, код. js для проверки новой настройки:

function findText() {
    if (document.body.innerHTML.search("Text") != -1) {
    alert("Text found");
    // potentially perform other actions
    } 
}

(я думаю, что если и когда все будет работать, как положено, я должен включить chrome.tabs.sendMessage(activeTab.id, {"message": 'stop'}) в код. js когда "Текст" найден.)

манифест. json:

{
   "manifest_version": 2,
   "name": "Find Text",
   "version": "0.1",
   "externally_connectable": {
      "matches": ["http://www.example.com"]
   },
   "permissions": [ "activeTab", "storage", "browsingData", "notifications", "http://*/", "https://*/"],
   "background": {
      "scripts": ["background.js"],
      "persistent": false
   },
   "browser_action": {
      "default_popup": "popup.html",
      "default_title": "Find Text"
   }  
}

Теперь, когда я нажимаю " Кнопка «Выполнить» на моем пользовательском интерфейсе www.example.com перезагружается каждые 7 секунд, и она перестает загружаться, когда я нажимаю кнопку «Стоп» на своем пользовательском интерфейсе. Однако функция findText () в коде. js, похоже, не работает: когда на странице отображается «Текст», ничего не происходит.

Кроме того, проблема № 2, описанная выше, остается: если я нажмите кнопку «Стоп» в моем пользовательском интерфейсе, автоматическое восстановление sh останавливается, но когда я открываю другую вкладку на Chrome и go до www.example.com, страница продолжает перезагружаться, как будто автоматическое восстановление sh никогда не останавливалось .

Я на 100% уверен, что допустил здесь более одной ошибки, но не могу их обнаружить.