2015-01-04 58 views
0

我已經構建了一個擴展,其中的a〜settings.html〜用於選項菜單,〜option.js〜用於選項頁,其中我放置了一些邏輯來關閉提交保存按鈕時彈出選項。但意外的是它曾經工作過一次。附上代碼,幫助我與你的wisedom。Chrome擴展選項菜單無法關閉

{ //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> 
+0

當點擊保存按鈕時,選項頁已關閉。我想知道你是否仍然遇到這個問題? – gui47

+0

它第一次關閉,但在彈出的情況下它不會關閉,而且有時無法重新加載。任何想法? –

+0

'chrome.extension.getBackgroundPage()。chrome.runtime.reload();'什麼樣的憎惡是?這在選項頁面中直接可用。我認爲這可能是你的問題的原因(一旦父分機重新加載,頁面不再與它關聯) – Xan

回答

0

通過去除

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

解決它

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