clearInterval not working in Chrome extension

Question

I am trying to make a Chrome extension that:

1. reloads the URL of the tab where the extension is launched (say, for instance, www.example.com) every 7 seconds and performs a text search for "Text" on it;
2. if "Text" exists, then extensions stops reloading the page, selects a certain radio button and clicks on a certain button on www.example.com.

My popup.html is designed with a simple UI with two buttons "Run" and "Stop", respectively running and stopping the reload-and-search function above.

The script in my popup page is called "app.js": <script src="app.js" charset="UTF-8"></script>

To make my content script perform its reload-and-search function on the webpage where the extension is launched, www.example.com, app.js programmatically injects a code.js file (with the reload-and-search function) in it when the user clicks the "Run" button from the UI. And since I would like to also be able to stop the reload-and-search function from the UI, app.js inject a clearInterval(function) code when the user clicks the "Stop" button from the UI.

This is how app.js looks:

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);'}
    );
    });
});

This is code.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

I have two problems:

1. Stopping the function: When I click the "Run" button on my UI, the reloadAndFind() function starts and the page reloads every 7 seconds. After a number of reloads, when www.example.com shows "Text" I know the function found the tring because the beep() functions warns me, the radio button is selected and the button is clicked. However, clearInterval(timer) does not seem to work and the page keeps reloading again and again. It seems, however, to work when clearInterval() is injected by app.js when I click the "Stop" button on my UI. But this is useless, since I want the extension to be able to stop the reload by itself when I am not in the front of my computer. Also, problem No. 2 appears.
2. Using "Stop" to stop the function works only partially: When I click the "Stop" button on my UI and clearInterval(timer) is injected through stopcode.js, it actually stops the page from reloading again. However, if I open another tab on Chrome and go to www.example.com, then the page keeps reloading as if I never injected clearInterval(timer).

How can I fix both problem 1 and 2? Please consider that I am very new to javascript and to programming in general.

If helpful, this is my manifest.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

UPDATE:

I have modified my extension while trying to follow wOxxOm's valuable information, but it still does not work.

I now have this 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);
   }
});

I have modified app.js as follows:

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'});
    });
});

The modified and simplified content script, code.js to test the new setup:

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

(I guess that if and when everything will work as intended, I should include chrome.tabs.sendMessage(activeTab.id, {"message": 'stop'}) in code.js when "Text" is found.)

manifest.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"
   }  
}

Now when I click the "Run" button on my UI www.example.com reloads every 7 seconds and it stops reloading when I click the "Stop" button on my UI. However, the findText() function in code.js does not seem to work: when "Text" is displayed on the page, nothing happens.

Also, problem No. 2 above still remains: if I click the "Stop" button on my UI the autorefresh stops, but when I open another tab on Chrome and go to www.example.com, then the page keeps reloading as if the autorefresh was never stopped.

I am 100% sure that I made more than one mistake here, but I can't spot them.