Chrome extension: Add options page
This commit is contained in:
parent
e93cf5ca97
commit
1b043bfd5a
@ -43,6 +43,11 @@
|
|||||||
"storage": {
|
"storage": {
|
||||||
"managed_schema": "preferences_schema.json"
|
"managed_schema": "preferences_schema.json"
|
||||||
},
|
},
|
||||||
|
"options_ui": {
|
||||||
|
"page": "options/options.html",
|
||||||
|
"chrome_style": true
|
||||||
|
},
|
||||||
|
"options_page": "options/options.html",
|
||||||
"background": {
|
"background": {
|
||||||
"page": "pdfHandler.html"
|
"page": "pdfHandler.html"
|
||||||
},
|
},
|
||||||
|
85
extensions/chromium/options/options.html
Normal file
85
extensions/chromium/options/options.html
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<!--
|
||||||
|
Copyright 2015 Mozilla Foundation
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>PDF.js viewer options</title>
|
||||||
|
<style>
|
||||||
|
/* TODO: Remove as much custom CSS as possible - crbug.com/446511 */
|
||||||
|
body {
|
||||||
|
min-width: 400px; /* a page at the settings page is at least 400px wide */
|
||||||
|
margin: 14px 17px; /* already added by default in Chrome 40.0.2212.0 */
|
||||||
|
}
|
||||||
|
.settings-row {
|
||||||
|
margin: 0.65em 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="settings-boxes"></div>
|
||||||
|
<button id="reset-button">Restore default settings</button>
|
||||||
|
|
||||||
|
<template id="checkbox-template">
|
||||||
|
<!-- Chromium's style: //src/extensions/renderer/resources/extension.css -->
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox">
|
||||||
|
<span></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template id="defaultZoomValue-template">
|
||||||
|
<div class="settings-row">
|
||||||
|
<label>
|
||||||
|
<span></span>
|
||||||
|
<select>
|
||||||
|
<option value="auto" selected="selected">Automatic Zoom</option>
|
||||||
|
<option value="page-actual">Actual Size</option>
|
||||||
|
<option value="page-fit">Fit Page</option>
|
||||||
|
<option value="page-width">Full Width</option>
|
||||||
|
<option value="custom" class="custom-zoom" hidden></option>
|
||||||
|
<option value="50">50%</option>
|
||||||
|
<option value="75">75%</option>
|
||||||
|
<option value="100">100%</option>
|
||||||
|
<option value="125">125%</option>
|
||||||
|
<option value="150">150%</option>
|
||||||
|
<option value="200">200%</option>
|
||||||
|
<option value="300">300%</option>
|
||||||
|
<option value="400">400%</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template id="sidebarViewOnLoad-template">
|
||||||
|
<div class="settings-row">
|
||||||
|
<label>
|
||||||
|
<span></span>
|
||||||
|
<select>
|
||||||
|
<option value="0">Do not show sidebar</option>
|
||||||
|
<option value="1">Show thumbnails in sidebar</option>
|
||||||
|
<option value="2">Show document outline in sidebar</option>
|
||||||
|
<option value="3">Show attachments in sidebar</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="options.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
194
extensions/chromium/options/options.js
Normal file
194
extensions/chromium/options/options.js
Normal file
@ -0,0 +1,194 @@
|
|||||||
|
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
||||||
|
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
|
||||||
|
/*
|
||||||
|
Copyright 2015 Mozilla Foundation
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
/* globals chrome, Promise */
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Promise.all([
|
||||||
|
new Promise(function getManagedPrefs(resolve) {
|
||||||
|
// Get preferences as set by the system administrator.
|
||||||
|
chrome.storage.managed.get(null, function(prefs) {
|
||||||
|
// Managed storage may be disabled, e.g. in Opera.
|
||||||
|
resolve(prefs || {});
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
new Promise(function getUserPrefs(resolve) {
|
||||||
|
chrome.storage.local.get(null, function(prefs) {
|
||||||
|
resolve(prefs || {});
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
new Promise(function getStorageSchema(resolve) {
|
||||||
|
// Get the storage schema - a dictionary of preferences.
|
||||||
|
var x = new XMLHttpRequest();
|
||||||
|
var schema_location = chrome.runtime.getManifest().storage.managed_schema;
|
||||||
|
x.open('get', chrome.runtime.getURL(schema_location));
|
||||||
|
x.onload = function() {
|
||||||
|
resolve(x.response.properties);
|
||||||
|
};
|
||||||
|
x.responseType = 'json';
|
||||||
|
x.send();
|
||||||
|
})
|
||||||
|
]).then(function(values) {
|
||||||
|
var managedPrefs = values[0];
|
||||||
|
var userPrefs = values[1];
|
||||||
|
var schema = values[2];
|
||||||
|
function getPrefValue(prefName) {
|
||||||
|
if (prefName in userPrefs) {
|
||||||
|
return userPrefs[prefName];
|
||||||
|
} else if (prefName in managedPrefs) {
|
||||||
|
return managedPrefs[prefName];
|
||||||
|
}
|
||||||
|
return schema[prefName].default;
|
||||||
|
}
|
||||||
|
var prefNames = Object.keys(schema);
|
||||||
|
var renderPreferenceFunctions = {};
|
||||||
|
// Render options
|
||||||
|
prefNames.forEach(function(prefName) {
|
||||||
|
var prefSchema = schema[prefName];
|
||||||
|
if (!prefSchema.title) {
|
||||||
|
// Don't show preferences if the title is missing.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// A DOM element with a method renderPreference.
|
||||||
|
var renderPreference;
|
||||||
|
if (prefSchema.type === 'boolean') {
|
||||||
|
// Most prefs are booleans, render them in a generic way.
|
||||||
|
renderPreference = renderBooleanPref(prefSchema.title,
|
||||||
|
prefSchema.description,
|
||||||
|
prefName);
|
||||||
|
} else if (prefName === 'defaultZoomValue') {
|
||||||
|
renderPreference = renderDefaultZoomValue(prefSchema.title);
|
||||||
|
} else if (prefName === 'sidebarViewOnLoad') {
|
||||||
|
renderPreference = renderSidebarViewOnLoad(prefSchema.title);
|
||||||
|
} else {
|
||||||
|
// Should NEVER be reached. Only happens if a new type of preference is
|
||||||
|
// added to the storage manifest.
|
||||||
|
console.error('Don\'t know how to handle ' + prefName + '!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPreference(getPrefValue(prefName));
|
||||||
|
renderPreferenceFunctions[prefName] = renderPreference;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Names of preferences that are displayed in the UI.
|
||||||
|
var renderedPrefNames = Object.keys(renderPreferenceFunctions);
|
||||||
|
|
||||||
|
// Reset button to restore default settings.
|
||||||
|
document.getElementById('reset-button').onclick = function() {
|
||||||
|
userPrefs = {};
|
||||||
|
chrome.storage.local.remove(prefNames, function() {
|
||||||
|
renderedPrefNames.forEach(function(prefName) {
|
||||||
|
renderPreferenceFunctions[prefName](getPrefValue(prefName));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Automatically update the UI when the preferences were changed elsewhere.
|
||||||
|
chrome.storage.onChanged.addListener(function(changes, areaName) {
|
||||||
|
var prefs = areaName === 'local' ? userPrefs :
|
||||||
|
areaName === 'managed' ? managedPrefs : null;
|
||||||
|
if (prefs) {
|
||||||
|
renderedPrefNames.forEach(function(prefName) {
|
||||||
|
var prefChanges = changes[prefName];
|
||||||
|
if (prefChanges) {
|
||||||
|
if ('newValue' in prefChanges) {
|
||||||
|
userPrefs[prefName] = prefChanges.newValue;
|
||||||
|
} else {
|
||||||
|
// Otherwise the pref was deleted
|
||||||
|
delete userPrefs[prefName];
|
||||||
|
}
|
||||||
|
renderPreferenceFunctions[prefName](getPrefValue(prefName));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}).then(null, console.error.bind(console));
|
||||||
|
|
||||||
|
function importTemplate(id) {
|
||||||
|
return document.importNode(document.getElementById(id).content, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helpers to create UI elements that display the preference, and return a
|
||||||
|
// function which updates the UI with the preference.
|
||||||
|
|
||||||
|
function renderBooleanPref(shortDescription, description, prefName) {
|
||||||
|
var wrapper = importTemplate('checkbox-template');
|
||||||
|
wrapper.title = description;
|
||||||
|
|
||||||
|
var checkbox = wrapper.querySelector('input[type="checkbox"]');
|
||||||
|
checkbox.onchange = function() {
|
||||||
|
var pref = {};
|
||||||
|
pref[prefName] = this.checked;
|
||||||
|
chrome.storage.local.set(pref);
|
||||||
|
};
|
||||||
|
wrapper.querySelector('span').textContent = shortDescription;
|
||||||
|
document.getElementById('settings-boxes').appendChild(wrapper);
|
||||||
|
|
||||||
|
function renderPreference(value) {
|
||||||
|
checkbox.checked = value;
|
||||||
|
}
|
||||||
|
return renderPreference;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderDefaultZoomValue(shortDescription) {
|
||||||
|
var wrapper = importTemplate('defaultZoomValue-template');
|
||||||
|
var select = wrapper.querySelector('select');
|
||||||
|
select.onchange = function() {
|
||||||
|
chrome.storage.local.set({
|
||||||
|
defaultZoomValue: this.value
|
||||||
|
});
|
||||||
|
};
|
||||||
|
wrapper.querySelector('span').textContent = shortDescription;
|
||||||
|
document.getElementById('settings-boxes').appendChild(wrapper);
|
||||||
|
|
||||||
|
function renderPreference(value) {
|
||||||
|
value = value || 'auto';
|
||||||
|
select.value = value;
|
||||||
|
var customOption = select.querySelector('option.custom-zoom');
|
||||||
|
if (select.selectedIndex === -1 && value) {
|
||||||
|
// Custom zoom percentage, e.g. set via managed preferences.
|
||||||
|
// [zoom] or [zoom],[left],[top]
|
||||||
|
customOption.text = value.indexOf(',') > 0 ? value : value + '%';
|
||||||
|
customOption.value = value;
|
||||||
|
customOption.hidden = false;
|
||||||
|
customOption.selected = true;
|
||||||
|
} else {
|
||||||
|
customOption.hidden = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return renderPreference;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSidebarViewOnLoad(shortDescription) {
|
||||||
|
var wrapper = importTemplate('sidebarViewOnLoad-template');
|
||||||
|
var select = wrapper.querySelector('select');
|
||||||
|
select.onchange = function() {
|
||||||
|
chrome.storage.local.set({
|
||||||
|
sidebarViewOnLoad: parseInt(this.value)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
wrapper.querySelector('span').textContent = shortDescription;
|
||||||
|
document.getElementById('settings-boxes').appendChild(wrapper);
|
||||||
|
|
||||||
|
function renderPreference(value) {
|
||||||
|
select.value = value;
|
||||||
|
}
|
||||||
|
return renderPreference;
|
||||||
|
}
|
@ -2,7 +2,7 @@
|
|||||||
"type": "object",
|
"type": "object",
|
||||||
"properties": {
|
"properties": {
|
||||||
"showPreviousViewOnLoad": {
|
"showPreviousViewOnLoad": {
|
||||||
"title": "Resume view on load",
|
"title": "Show previous position of PDF upon load",
|
||||||
"description": "Whether to view PDF documents in the last page and position upon opening the viewer.",
|
"description": "Whether to view PDF documents in the last page and position upon opening the viewer.",
|
||||||
"type": "boolean",
|
"type": "boolean",
|
||||||
"default": true
|
"default": true
|
||||||
|
1
make.js
1
make.js
@ -1042,6 +1042,7 @@ target.chromium = function() {
|
|||||||
'extensions/chromium/icon*.png',],
|
'extensions/chromium/icon*.png',],
|
||||||
CHROME_BUILD_DIR],
|
CHROME_BUILD_DIR],
|
||||||
['extensions/chromium/pageAction/*.*', CHROME_BUILD_DIR + '/pageAction'],
|
['extensions/chromium/pageAction/*.*', CHROME_BUILD_DIR + '/pageAction'],
|
||||||
|
['extensions/chromium/options/*.*', CHROME_BUILD_DIR + '/options'],
|
||||||
['external/webL10n/l10n.js', CHROME_BUILD_CONTENT_DIR + '/web'],
|
['external/webL10n/l10n.js', CHROME_BUILD_CONTENT_DIR + '/web'],
|
||||||
['external/bcmaps/*', CHROME_BUILD_CONTENT_DIR + '/web/cmaps'],
|
['external/bcmaps/*', CHROME_BUILD_CONTENT_DIR + '/web/cmaps'],
|
||||||
['web/locale', CHROME_BUILD_CONTENT_DIR + '/web']
|
['web/locale', CHROME_BUILD_CONTENT_DIR + '/web']
|
||||||
|
Loading…
Reference in New Issue
Block a user