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变量值。要访问自加载扩展程序以来已更新的值，必须重新加载settings中的background.js变量值。

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

更好的解决方案是仅在选项页面中更新值时重新加载settings中的background.js值。这会使用设置变量的持久性或缓存来获得优势。您必须查看文档以获取实现详细信息，但我们的想法是将选项页面中的消息发送到background.js页面，告知它在存储新设置后更新settings

除了不相关之外，不需要行var中的var settings = settings.toObject();关键字。没有必要重新声明变量，它已在上面声明。

Chrome扩展程序在重新加载之前不会考虑optionvalue

1 个答案: