自添加 chrome.storage 以来，代码似乎没有执行

Question

在调试器中查看我的扩展时，我的 chrome.tabs.query 代码似乎没有执行。我正在尝试使用 chrome.storage API 来记录访问 nytimes.com 上的文章的次数，并且由于我在开头添加了 chrome.storage 代码，因此调试器似乎没有进入 chrome.tabs.query功能。

var nytCount = chrome.storage.local.get["nyt"];

// if nytCount doesn't exist in chrome local storage, set to 0
if (nytCount === undefined)
{
    nytCount = 0;
}


/*
* Below is adapted from user Rob W at Stack Overflow (http://stackoverflow.com/questions/10413911/how-to-get-the-currently-opened-tabs-url-in-my-page-action-popup/10417327#10417327)
*
// Gets URL from currently active window (this should all be onload I suspect)*/
chrome.tabs.query({
    // Select active tabs
    active: true,
    // In the current window                              
    windowId: chrome.windows.WINDOW_ID_CURRENT 
}, function(array_of_Tabs) {
    // Since there can only be one active tab in one active window, the array has only one element
    var tab = array_of_Tabs[0];
    var title = tab.title;

    if (title.indexOf("NYTimes.com") !== -1)
    {
        nytCount++;
    }

    // rest of if conditions for those sites that have identifiers in tab titles
});

alert(nytCount);

有什么想法吗？在我将 nytCount 初始化为 0 之前它工作得很好，但当然它的值只能上升到 1，然后它会在下一次运行代码时重新初始化。

Answer 1

我看到的主要问题是chrome.storage.local.get 调用是异步的，并且有一个必需的回调。试着把它改成这样：

var nytCount = 0;
chrome.storage.local.get("nyt", function(items) {
    doStuff(items.nyt);
   // items.nyt is the value you want out of this
});

function doStuff(nyt){
  nytCount = nyt;
  if(nytCount == undefined)
    nytCount = 0;
  //put the rest of your code in here
  //so that it all runs after you get the number out of storage
}

不要忘记使用chrome.storage.local.set 调用更新您在存储中的值。对于那个回调是可选的。

Answer 2

chrome.tabs.query 仅应在您想立即查询选项卡状态时使用。

要监控您访问网站的频率，请使用chrome.tabs events 之一，例如chrome.tabs.onUpdated。为避免重复计算，您应该检查changeInfo.status 属性是否“完整”。

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    var url = changeInfo.url; // String or undefined
    if (changeInfo.status == 'complete' && url && url.indexOf("nytimes.com") !== -1) {
        // TODO: increase counter by one
    }
});

您的下一个问题是chrome.storage 的使用方式。它是一个异步 API，因此您不能使用 getter 来读取实际值。此外，读取后的值不会神奇地保存回存储中。

对于存储计数器，我推荐localStorage 而不是chrome.storage。它是一个同步 API，非常适合存储少量数据（例如计数器）。只能存储字符串，因此请确保在读取后将值转换为数字：

var nytCount = +localStorage.getItem('nyt') || 0;

// Whenever you want to increase the counter:
localStorage.setItem('nyt', ++nytCount);

这假设只有一个页面与 nyt 变量交互。当变量被多个页面（例如选项+背景页面）使用（读/写）时，您不能依赖局部变量，并且必须在写入之前读取最新值：

localStorage.setItem('nyt', (+localStorage.getItem('nyt') || 0) + 1);

如果您想采用异步路由 (chrome.storage)，您可以在加载时读取值（并延迟/排队 chrome.tabs.onUpdated 事件），或者在更新时始终读取+写入计数器：

chrome.storage.local.get('nyt', function(items) {
    var nyt = items.nyt || 0;
    chrome.storage.local.set({
        nyt: nyt + 1
    }, function() {
        // Only here, you can be certain that the value has been saved
        // Usually less than one millisecond
    });
});