clearInterval在Chrome扩展程序中不起作用 [英] clearInterval not working in Chrome extension

问题描述

我正在尝试制作一个Chrome扩展程序:

I am trying to make a Chrome extension that:

1. 每7秒重新加载启动扩展程序的标签页的URL(例如， www.example.com )，然后对文字"；
2. 如果存在文本"，则扩展程序将停止重新加载页面，选择某个单选按钮，然后单击www.example.com上的某个按钮.

我的popup.html是用一个简单的UI设计的，它带有两个按钮运行"和停止"，分别运行和停止上面的重新加载和搜索功能.

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.

我的弹出页面中的脚本称为"app.js":<script src="app.js" charset="UTF-8"></script>

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

要使我的内容脚本在启动扩展程序的网页上执行其重载和搜索功能，www.example.com，app.js以编程方式注入一个code.js文件(具有重载和搜索功能)，当用户从用户界面中点击运行"按钮时.而且由于我也希望能够从UI停止重新加载和搜索功能，因此当用户单击UI中的停止"按钮时，app.js会注入clearInterval(function)代码.

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.

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

这是 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

我有两个问题:

1. 停止功能: 当我单击UI上的运行"按钮时，reloadAndFind()函数启动，并且页面每7秒重新加载一次.多次重新加载后，当www.example.com显示文本"时，我知道该函数找到了问题，因为beep()函数警告我，选中了单选按钮，然后单击了该按钮.但是，clearInterval(timer)似乎不起作用，并且页面不断刷新. 但是，当我单击UI上的停止"按钮时，似乎可以正常工作，当app.js注入clearInterval()时.但这是没有用的，因为我希望扩展程序能够不在我的计算机正面时自行停止重新加载.此外，还会出现第二个问题.
2. 使用停止"功能只能部分停止工作:当我单击UI上的停止"按钮并通过stopcode.js注入clearInterval(timer)时，它实际上会停止页面再次重新加载.但是，如果我在Chrome上打开另一个标签并转到www.example.com，则该页面将继续重新加载，就好像我从未注入clearInterval(timer)一样.

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).

如何解决问题1和2?请认为我对JavaScript和一般编程语言很新.

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

如果有帮助，这是我的 manifest.json :

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

推荐答案

更新:

我在尝试扩展wOxxOm的重要信息时修改了自己的扩展名，但仍然无法正常工作.

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

我现在有了这个 background.js 脚本:

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

经过修改和简化的内容脚本 code.js ，用于测试新设置:

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
    } 
}

(我想如果一切都可以按预期运行，当找到文本"时，我应该在 code.js 中包含chrome.tabs.sendMessage(activeTab.id, {"message": 'stop'}).)

(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"
   }  
}

现在，当我单击UI上的运行"按钮时，www.example.com将每7秒重新加载一次，而当我单击UI上的停止"按钮时，它将停止重新加载.但是，code.js中的findText()函数似乎不起作用:当页面上显示文本"时，什么也没发生.

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.

此外，上面的第二个问题仍然存在:如果我单击UI上的停止"按钮，则自动刷新会停止，但是当我在Chrome上打开另一个标签并转到www.example.com时，该页面会继续重新加载好像自动刷新从未停止过.

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.

我100％确信我在这里犯了多个错误，但我无法发现它们.

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

这篇关于clearInterval在Chrome扩展程序中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！