0

我正在开发我的第一个 Chrome 扩展程序。在学习了一些关于 jquery 的有趣概念后，由于“Rob W”，我转向了原始的 javascript 代码。

实际上，扩展程序使用一些参数对远程页面执行 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，直到我重新加载扩展。

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

4

1 回答 1

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();不需要重新声明变量，上面已经声明过了。

于 2012-11-12T21:53:36.140 回答