Refresh after a timer of 5000 seconds and print the alert

问题

I am making a chrome extension to keep refreshing a page unless stop button is chosen. But i am able to do it only once. Here is my code for background.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.type) {
    case "table-row-count_start":
        alert("Refershing started");
        RefreshAndCount();
        break;
    case "table-row-count_stop":
        alert("Stop Refershing");
        break;
}
return true;
});

var RefreshAndCount = function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {type: "table-row-count"});
    chrome.browserAction.setBadgeText({tabId: tabs[0].id, text: "Counting!"});
});
};

In content.js I did this :

chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
alert(message.type);
switch(message.type) {
    case "table-row-count":
        var x = document.querySelector('table').rows.length;
        chrome.storage.sync.set({'value': x}, function() {
            console.log('Settings saved');
        });
        chrome.storage.sync.get(["value"], function(items){
           console.log(items);
        });
        alert("Row count = " + x);
        setTimeout(function(){
            location.reload();
        },100);

        break;
}
});

chrome.storage.onChanged.addListener(function(changes, namespace) {
    for (key in changes) {
        if(key=='value'){
            var storageChange = changes[key];
            console.log('Storage key "%s" in namespace "%s" changed. ' +
                  'Old value was "%s", new value is "%s".',
                  key,
                  namespace,
                  storageChange.oldValue,
                  storageChange.newValue);
    }
}
});

After refresh I want to print the current row count alert everytime. Please help how to do this .

This work fine, for a single refresh but after that I again had to choose the start button from popup.

I want some way that I need not click start button again and the whole process repeats, storing the previous row count in cache or something.

popup.js

window.onload = function() {
document.getElementById("mystartbutton").onclick = function() {
    chrome.extension.sendMessage({
        type: "table-row-count_start"
    });
}
document.getElementById("mystopbutton").onclick = function() {
    chrome.extension.sendMessage({
        type: "table-row-count_stop"
    });
}
}

Also help me How to keep on refershing that page even if I switch to other tab or minimise my chrome ?

回答1:

You can use the chrome.storage.local to store data that will be saved over time and over context where you use it. You can set a boolean to true or false to enable or disable autoreload. Then you only have to set it at click on browser action and check it in the content-script to know if you have to reload.

A possible and simple implemtation should be like this : (It depends of the expected behavior)

content.js (have to be injected in the page to autoreload)

var reloadDuration = 5000;

function autoreload()
{
    chrome.local.storage.get("autoreload_enabled", function(result)
    {
        if(result.autoreload_enabled)
        {
            chrome.runtime.sendMessage({type: "table-row-count"});
            window.location.reload();
        }
    }
}

setTimeout(autoreload, reloadDuration);

This will reload your page every reloadDuration if the boolean set in chrome local storage named autoreload_enabled is true.

来源：https://stackoverflow.com/questions/32649407/refresh-after-a-timer-of-5000-seconds-and-print-the-alert