Question

我正在编写一个简单的扩展供我自己使用。它基本上绑定到网页上的一个字段，并在您单击该字段或单击该字段时执行操作。这工作正常。

我遇到的问题是扩展程序有一些需要填充的配置字段。单击扩展图标时，将显示配置页面，并包含一些用于读取和保存设置的 js。

例如。

当页面加载时，我读取了值。这是一个例子：

chrome.storage.sync.get("id", function(items) {
    if (!chrome.runtime.error) {
        id = (typeof(items.id) != "undefined" && items.id !== null) ? items.id : '';
        document.getElementById("id").value = id; 
    }
});

单击配置页面保存按钮后，值将被保存。

var id = document.getElementById("id").value;
    chrome.storage.sync.set({ "id" : id }, function() {
        if (chrome.runtime.error) console.log("Runtime error.");
});

并且配置页面已关闭：

window.close();

由于这些值最初是随页面加载的，因此在重新加载页面之前，新值不会生效。

无论如何要强制使用新值或重新加载活动选项卡？

谢谢

更新

我尝试将以下内容添加到我的后台页面，我可以看到更改，但它似乎没有实时更新变量。

chrome.storage.onChanged.addListener( function( changes ) {
    console.log( changes );
    id = changes.id
});

当 id 无效时，我应该收到一条错误消息。但是检查控制台它仍然发送原始ID，而不是新的更新。

我该如何解决这个问题？谢谢

我已经更新如下：

chrome.storage.onChanged.addListener(changes => {
  
    updateId(changes.id.newValue);
  
});


function updateId(data) {
  
  id = data
  console.log (' ID = ' + id )
}

console.log 显示新的 id，但脚本仍在使用旧 ID。

我错过了什么？谢谢

更新

这是我当前代码功能的细分。 popup.js 用于读取并保存用户输入的 ID。

document.addEventListener('DOMContentLoaded', function() {
    
    chrome.storage.sync.get("id", function(items) {
        if (!chrome.runtime.error) {
            id = (typeof(items.id) != "undefined" && items.id !== null) ? items.id : '';
            document.getElementById("id").value = id; 
        }
    });
    
    var link = document.getElementById('save');
        link.addEventListener('click', function() {
        
        var id = document.getElementById("id").value;
        chrome.storage.sync.set({ "id" : id }, function() {
            if (chrome.runtime.error) console.log("Runtime error.");
        });
    
        window.close();
        
    });

});

myscript.js 用于检测进出特定字段的点击，然后将命令传递给后台脚本。

    jQuery(document).ready(function() {

    helloCatAsync( function( result ) {
        id      = (typeof(result[0]) != "undefined" && result[0] !== null) ? result[0] : '';
        
        $('#siteid').focusout(function () {
            cmd = 'http://192.168.0.1/site.php?update=1&id=' + id
            
            chrome.runtime.sendMessage({ cmd }, (response) => {
                console.log(response.result);
            });
            
        });
        
        $('siteid').focusin(function () {
            cmd = 'http://192.168.0.1/site.php?clear=1&id=' + id
            
            chrome.runtime.sendMessage({ cmd }, (response) => {
                console.log(response.result);
            });
        
        });
        
        
    });

    function helloCatAsync( callback ) {
        chrome.storage.sync.get(null, function(items) {
            var allValues = Object.values(items);
            callback(allValues) ; 
        });
    }
});

eventPage.js 运行传递给它的命令并返回结果。在这里，我还尝试添加 onChanged 侦听器以在保存时更新 id 的值。

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
    
    $.ajax({
        type: "POST",
        url: msg.cmd,
        success: function(data) {
            sendResponse({ result: data });
        },
        
        error: function(e) {
            sendResponse({ result: data });
        }
    });

    return true
    
});

chrome.storage.onChanged.addListener(changes => {
  
    updateId(changes.id.newValue);
  
});


function updateId(data) {
  
  id = data
  console.log (' ID = ' + id )
}

我的目标是，如果用户进入配置弹出页面并更改 id 并点击保存，新的 ID 会立即使用，目前需要重新加载页面。

我的 manifest.json 包含：

"background": {
        "scripts": ["jquery.js", "eventPage.js"],
        "persistent": false
    },
  
    "content_scripts": [
    {
        "matches": ["http://*/*", "https://*/*"],
        "css": ["styles.css"],
        "js": ["jquery.js", "myscript.js"]
    }
    ],
    "icons": { 
        "16": "logo16.png",
        "48": "logo48.png",
        "128": "logo128.png"
    },
    
    "browser_action": {
        "default_icon": "logo.png",
        "default_popup": "popup.html"
    }

谢谢

Chrome 扩展程序。 - 保存扩展设置时重新加载当前选项卡

0 个答案: