1<!DOCTYPE html> 2<html> 3<head> 4 <script> 5var cs = chrome.experimental.contentSettings; 6var pref = cs.misc.enableReferrers; 7 8/** 9 * Returns whether the |levelOfControl| means that the extension can change the 10 * preference value. 11 * 12 * @param levelOfControl{string} 13 */ 14function settingIsControllable(levelOfControl) { 15 return (levelOfControl == "ControllableByThisExtension" || 16 levelOfControl == "ControlledByThisExtension"); 17} 18 19/** 20 * Updates the UI to reflect the state of the preference. 21 * 22 * @param settings{object} A settings object, as returned from |get()| or the 23 * |onchange| event. 24 */ 25function updateUI(settings) { 26 var disableUI = !settingIsControllable(settings.levelOfControl); 27 document.getElementById("regularValue").disabled = disableUI; 28 document.getElementById("useSeparateIncognitoSettings").disabled = disableUI; 29 if (settings.hasOwnProperty('incognitoSpecific')) { 30 var hasIncognitoValue = settings.incognitoSpecific; 31 document.getElementById("useSeparateIncognitoSettings").checked = 32 hasIncognitoValue; 33 document.getElementById("incognitoValue").disabled = 34 disableUI || !hasIncognitoValue; 35 document.getElementById("incognitoValue").checked = settings.value; 36 } else { 37 document.getElementById("regularValue").checked = settings.value; 38 } 39} 40 41/** 42 * Wrapper for |updateUI| which is used as callback for the |get()| method and 43 * which logs the result. 44 * If there was an error getting the preference, does nothing. 45 * 46 * @param settings{object} A settings object, as returned from |get()|. 47 */ 48function updateUIFromGet(settings) { 49 if (settings) { 50 console.log('pref.get result:' + JSON.stringify(settings)); 51 updateUI(settings); 52 } 53} 54 55/** 56 * Wrapper for |updateUI| which is used as handler for the |onchange| event 57 * and which logs the result. 58 * 59 * @param settings{object} A settings object, as returned from the |onchange| 60 * event. 61 */ 62function updateUIFromOnChange(settings) { 63 console.log('pref.onChange event:' + JSON.stringify(settings)); 64 updateUI(settings); 65} 66 67/* 68 * Initializes the UI. 69 */ 70function init() { 71 chrome.extension.isAllowedIncognitoAccess(function(allowed) { 72 if (allowed) { 73 pref.get({'incognito': true}, updateUIFromGet); 74 document.getElementById("incognito").style.display = "block"; 75 document.getElementById("incognito-forbidden").style.display = "none"; 76 } 77 }); 78 pref.get({}, updateUIFromGet); 79 pref.onChange.addListener(updateUIFromOnChange); 80} 81 82/** 83 * Called from the UI to change the preference value. 84 * 85 * @param enabled{boolean} The new preference value. 86 * @param incognito{boolean} Whether the value is specific to incognito mode. 87 */ 88function setPrefValue(enabled, incognito) { 89 pref.set({'value':enabled, 'incognito': incognito}); 90} 91 92/** 93 * Called from the UI to change whether to use separate settings for 94 * incognito mode. 95 * 96 * @param value{boolean} whether to use separate settings for 97 * incognito mode. 98 */ 99function setUseSeparateIncognitoSettings(value) { 100 if (!value) { 101 pref.clear({'incognito': true}); 102 } else { 103 // Explicitly set the value for incognito mode. 104 pref.get({'incognito': true}, function(settings) { 105 pref.set({'incognito': true, 'value': settings.value}); 106 }); 107 } 108 document.getElementById("incognitoValue").disabled = !value; 109} 110 111 </script> 112</head> 113<body onload="init()"> 114 115<div style="width: 300px"> 116<input type="checkbox" onclick="setPrefValue(this.checked)" id="regularValue" /> Enable referrers 117 118<div id="incognito" style="display:none"> 119<input type="checkbox" onclick="setUseSeparateIncognitoSettings(this.checked)" id="useSeparateIncognitoSettings" /> Use separate setting for incognito mode: 120<br> 121<input type="checkbox" onclick="setPrefValue(this.checked, true)" id="incognitoValue" disabled="disabled"/> Enable referrers in incognito sessions 122</div> 123<div id="incognito-forbidden"> 124Select "Allow in incognito" to access incognito preferences 125</div> 126</div> 127 128</body> 129</html>