Chrome 扩展在重新加载之前不会考虑选项值

Question

我正在开发我的第一个 Chrome 扩展程序。 After learning some interesting notions about jquery i've moved to raw javascript code 感谢“Rob W”。

实际上，扩展程序使用一些参数对远程页面执行 XMLHttpRequest，并在处理结果后，将 html 列表呈现到弹出窗口中。

现在一切都已启动并正在运行，所以我要添加一些选项。 第一个是“要加载多少个元素”来设置列表元素的限制。

我正在使用花哨的设置来管理我的选项，这就是问题所在。

该扩展程序的作用就像是关于本地存储设置的“缓存”。 如果我没有设置任何内容并执行扩展的全新安装，则会正确加载默认数量的元素。

如果我更改值。我需要重新加载扩展程序才能看到更改。 仅当删除设置时，我才能立即看到扩展按预期工作。

现在，我将详细介绍具体信息。

这是 popup.js 脚本：

chrome.extension.sendRequest({action: 'gpmeGetOptions'}, function(theOptions) {
    //Load the limit for topic shown
    console.log('NGI-LH -> Received NGI "max_topic_shown" setting ('+theOptions.max_topic_shown+')');
    //Initializing the async connection
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://gaming.ngi.it/subscription.php?do=viewsubscription&pp='+theOptions.max_topic_shown+'&folderid=all&sort=lastpost&order=desc');
    xhr.onload = function() {
        var html = "<ul>";
        var doc = xhr.response;
        var TDs = doc.querySelectorAll('td[id*="td_threadtitle_"]');
        [].forEach.call(TDs, function(td) {
            //Removes useless elements from the source
            var tag = td.querySelector('img[src="images/misc/tag.png"]'); (tag != null) ? tag.parentNode.removeChild(tag) : false;
            var div_small_font = td.querySelector('div[class="smallfont"]'); (small_font != null ) ? small_font.parentNode.removeChild(small_font) : false;
            var span_small_font = td.querySelector('span[class="smallfont"]'); (small_font != null ) ? small_font.parentNode.removeChild(small_font) : false;
            var span = td.querySelector('span'); (span != null ) ? span.parentNode.removeChild(span) : false;
            //Change the look of some elements
            var firstnew = td.querySelector('img[src="images/buttons/firstnew.gif"]'); (firstnew != null ) ? firstnew.src = "/img/icons/comment.gif" : false;
            var boldtext = td.querySelector('a[style="font-weight:bold"]'); (boldtext != null ) ? boldtext.style.fontWeight = "normal" : false;
            //Modify the lenght of the strings
            var lenght_str = td.querySelector('a[id^="thread_title_"]');
            if (lenght_str.textContent.length > 40) {
                lenght_str.textContent = lenght_str.textContent.substring(0, 40);
                lenght_str.innerHTML += "<span style='font-size: 6pt'> [...]</span>";
            }
            //Removes "Poll:" and Tabulation from the strings
            td.querySelector('div').innerHTML = td.querySelector('div').innerHTML.replace(/(Poll)+(:)/g, '');
            //Modify the URL from relative to absolute and add the target="_newtab" for the ICON
            (td.querySelector('a[id^="thread_title"]') != null) ? td.querySelector('a[id^="thread_title"]').href += "&goto=newpost" : false;
            (td.querySelector('a[id^="thread_goto"]') != null) ? td.querySelector('a[id^="thread_goto"]').href += "&goto=newpost": false;
            (td.querySelector('a[id^="thread_title"]') != null) ? td.querySelector('a[id^="thread_title"]').target = "_newtab": false;
            (td.querySelector('a[id^="thread_goto"]') != null) ? td.querySelector('a[id^="thread_goto"]').target = "_newtab": false;

            //Store the td into the main 'html' variable
            html += "<li>"+td.innerHTML+"</li>";
    //      console.log(td);
        });
        html += "</ul>";
        //Send the html variable to the popup window
        document.getElementById("content").innerHTML = html.toString();
    };
    xhr.responseType = 'document'; // Chrome 18+
    xhr.send();
});

按照 background.js（html 只需加载 /fancy-settings/source/lib/store.js 和 Fancy-Setting How-To 解释的这个脚本）

//Initialization fancy-settings
var settings = new Store("settings", {
    "old_logo": false,
    "max_topic_shown": "10"
});
//Load settings
var settings = settings.toObject();

//Listener who send back the settings
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.action == 'gpmeGetOptions') {
        sendResponse(settings);
    }
});

正如我所说，console.log 显示缓存中的值。 如果我将值设置为“20”，它会保持默认值，直到我重新加载扩展。 如果我将它更改为 30，它会一直保持在 20，直到我重新加载扩展。

如果需要更多内容，请直接询问。我将编辑问题。

Answer 1

问题似乎是概念上的误解。 Chrome 扩展程序中的background.js 脚本会加载一次并继续运行，直到重新启动扩展程序或 Chrome 浏览器。

这意味着在您当前的代码中，settings 变量值仅在扩展首次启动时加载。为了访问自加载扩展后已更新的值，必须重新加载 background.js 中的 settings 变量值。

有很多方法可以做到这一点。最简单的就是将settings相关代码移动到background.js中的chrome.extension.onRequest.addListener回调函数中。这也是最低效的解决方案，因为无论是否实际更新，每个请求都会重新加载设置。

更好的解决方案是仅在选项页面中更新值时重新加载background.js 中的settings 值。这使用设置变量的持久性或缓存对您有利。您必须查看文档以了解实现细节，但想法是从选项页面向background.js 页面发送一条消息，告诉它在存储新设置后更新settings。

顺便说一句，var settings = settings.toObject(); 行中的 var 关键字是不需要的。变量不需要重新声明，上面已经声明过了。