Question

我已经构建了一个chrome扩展，其中有一个~setset.html~用于选项菜单，而~option.js~用于选项页面，其中我提供了一些逻辑来在提交保存按钮时关闭选项弹出窗口。但出乎意料的是它曾经奏效一次附上代码，帮助我解决问题。

{ //manifest.json
"name": "Demo Mode",
"version": "1.0",
"description": "A plugin todo something.",
"icons": {"16":"images/logo16x16.png",
    "48":"images/logo48x48.png"

},
"permissions": ["declarativeWebRequest", "storage", "<all_urls>"],
"options_page": "settings.html",
"background": {
    "scripts": ["background.js"],
    "persistent": true
},
"options_ui": {
    "chrome_style": true,
    "page": "settings.html"
},
"manifest_version": 3,
"browser_action": {

    "default_icon": {
        "19": "images/logo19x19.png",
        "38": "images/logo38x38.png"
    },

    "default_title": "Plugin",
    "default_popup": "settings.html"

}
}

options.js

// Saves options to chrome.storage
function save_options() {
   var server_setting = document.getElementById('server-settings').value;
   chrome.storage.sync.set({
    serverSetting: server_setting
   }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = "Your setting is saved"
    setTimeout(function() {
        status.textContent = '';
        chrome.extension.getBackgroundPage().chrome.runtime.reload();
        window.close();
    }, 1000);
});
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
chrome.storage.sync.get({
    serverSetting: 'production'
}, function(items) {
    document.getElementById('server-settings').value = items.serverSetting;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);

settings.html

<!DOCTYPE html>
<html>
<head><title>CMC Plugin Settings</title>
<style>
    .main-pane {
        clear: both;
        min-height: 40px;
    }

    .row {
        display: block;
        box-sizing: border-box;
        padding: 10px 5px;
    }

    .right-align {
        float: right;
        margin-bottom: 20px;
    }

    #status{
        min-height: 22px;
    }

    #server-settings {
        width: 100%;
        margin-top: 10px;
    }
</style>
</head>
<body>


<div class="main-pane">
<div class="row">
    <div class="main-pane">
        <label class="label">Set your environment - </label>
        <select id="server-settings" style="width:100%;">
            <option value="production">Production</option>
            <option value="local">Local Development</option>
        </select>

        <p id="status"></p>
    </div>
</div>
<div class="row">
    <button id="save" class="right-align">Save</button>
</div>
</div>


<script src="options.js"></script>
</body>
</html>

Answer 1

删除

解决了这个问题

chrome.extension.getBackgroundPage().chrome.runtime.reload();

到

chrome.runtime.reload();
window.close();

Chrome扩展程序选项菜单无法关闭

1 个答案: