Skip to content

GitLab

T
tangled
Commit a586a1a3 authored by wjmaclean@chromium.org's avatar wjmaclean@chromium.org
Browse files
Options

Sample Extension for Tabs Zoom API. 

Add sample extension code for the new Tabs Zoom API.

BUG=none

Review URL: https://codereview.chromium.org/398823002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@284430 0039d316-1c4b-4281-b951-d872f2087c98
parent ae0b3cd1
Show whitespace changes
Inline Side-by-side
Showing with 237 additions and 0 deletions
chrome/common/extensions/docs/examples/api/tabs/zoom/README 0 → 100644
View file @ a586a1a3
Demo Chrome Extension that uses the Tab Zoom API. Demonstrates manipulation of
tab zoom levels and zoom modes and use of zoom-change event listeners.
chrome/common/extensions/docs/examples/api/tabs/zoom/background.js 0 → 100644
View file @ a586a1a3
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @fileoverview In this extension, the background page demonstrates how to
* listen for zoom change events.
*/
function zoomChangeListener(zoomChangeInfo) {
var settings_str = "mode:" + zoomChangeInfo.zoomSettings.mode +
", scope:" + zoomChangeInfo.zoomSettings.scope;
console.log('[ZoomDemoExtension] zoomChangeListener(tab=' +
zoomChangeInfo.tabId + ', new=' +
zoomChangeInfo.newZoomFactor + ', old=' +
zoomChangeInfo.oldZoomFactor + ', ' +
settings_str + ')');
}
chrome.tabs.onZoomChange.addListener(zoomChangeListener);
chrome/common/extensions/docs/examples/api/tabs/zoom/manifest.json 0 → 100644
View file @ a586a1a3
{
"manifest_version": 2,
"name": "Tabs Zoom API Demo",
"description": "This extension allows the user to explore features of the new tabs zoom api.",
"version": "0.1",
"icons": {
"16": "zoom16.png",
"48": "zoom48.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": "zoom19.png",
"default_title": "Zoom Extension Demo",
"default_popup": "popup.html"
}
}
chrome/common/extensions/docs/examples/api/tabs/zoom/popup.html 0 → 100644
View file @ a586a1a3
<!doctype html>
<html>
<head>
<title>Tab Zoom Extension</title>
<style>
body {
width: 150px;
overflow-x: hidden;
color: #ffff00;
background-color: #186464;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 19px;
height: 19px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<div style="text-align: center">
<table style="margin: 0px auto">
<tr>
<td><button type="button" id="decreaseButton">-</button></td>
<td><div style="width: 50px; border-style: solid; border-width: 1px"
id="displayDiv">100%</div></td>
<td><button type="button" id="increaseButton">+</button></td>
</td>
</table>
<button type="button" id="defaultButton">Reset to 100%</button>
</div>
<p>
<div style="border-width: 2px; border-style: solid; border-color: #7f0000; padding: 2px">
<form style="border-width: 2px; border-style: solid; border-color: #7f0000">
<b>Mode:</b><br>
<input type="radio" name="modeRadio" value="automatic">automatic<br>
<input type="radio" name="modeRadio" value="manual">manual<br>
<input type="radio" name="modeRadio" value="disabled">disabled
</form><br>
<form style="border-width: 2px; border-style: solid; border-color: #7f0000">
<b>Scope:</b><br>
<input type="radio" name="scopeRadio" value="per-origin">per-origin<br>
<input type="radio" name="scopeRadio" value="per-tab">per-tab
</form>
<button type="button" id="setModeButton">Set Zoom Settings</button>
</div>
<p>
<button type="button" id="closeButton">Close</button>
</body>
</html>
chrome/common/extensions/docs/examples/api/tabs/zoom/popup.js 0 → 100644
View file @ a586a1a3
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @fileoverview This code supports the popup behaviour of the extension, and
* demonstrates how to:
*
* 1) Set the zoom for a tab using tabs.setZoom()
* 2) Read the current zoom of a tab using tabs.getZoom()
* 3) Set the zoom mode of a tab using tabs.setZoomSettings()
* 4) Read the current zoom mode of a tab using
* tabs.getZoomSettings()
*
* It also demonstrates using a zoom change listener to update the
* contents of a control.
*/
zoomStep = 1.1;
tabId = -1;
function displayZoomLevel(level) {
var percentZoom = parseFloat(level) * 100;
var zoom_percent_str = percentZoom.toFixed(1) + '%';
document.getElementById('displayDiv').textContent = zoom_percent_str;
}
document.addEventListener('DOMContentLoaded', function() {
// Find the tabId of the current (active) tab. We could just omit the tabId
// parameter in the function calls below, and they would act on the current
// tab by default, but for the purposes of this demo we will always use the
// API with an explicit tabId to demonstrate its use.
chrome.tabs.query({active: true}, function (tabs) {
if (tabs.length > 1)
console.log(
'[ZoomDemoExtension] Query unexpectedly returned more than 1 tab.');
tabId = tabs[0].id;
chrome.tabs.getZoomSettings(tabId, function(zoomSettings) {
var modeRadios = document.getElementsByName('modeRadio');
for (var i = 0; i < modeRadios.length; i++) {
if (modeRadios[i].value == zoomSettings.mode)
modeRadios[i].checked = true;
}
var scopeRadios = document.getElementsByName('scopeRadio');
for (var i = 0; i < scopeRadios.length; i++) {
if (scopeRadios[i].value == zoomSettings.scope)
scopeRadios[i].checked = true;
}
});
chrome.tabs.getZoom(tabId, displayZoomLevel);
});
document.getElementById('increaseButton').onclick = doZoomIn;
document.getElementById('decreaseButton').onclick = doZoomOut;
document.getElementById('defaultButton').onclick = doZoomDefault;
document.getElementById('setModeButton').onclick = doSetMode;
document.getElementById('closeButton').onclick = doClose;
});
function zoomChangeListener(zoomChangeInfo) {
displayZoomLevel(zoomChangeInfo.newZoomFactor);
}
chrome.tabs.onZoomChange.addListener(zoomChangeListener);
function changeZoomByFactorDelta(factorDelta) {
if (tabId == -1)
return;
chrome.tabs.getZoom(tabId, function(zoomFactor) {
var newZoomFactor = factorDelta * zoomFactor;
chrome.tabs.setZoom(tabId, newZoomFactor, function() {
if (chrome.runtime.lastError)
console.log('[ZoomDemoExtension] ' + chrome.runtime.lastError.message);
});
});
}
function doZoomIn() {
changeZoomByFactorDelta(zoomStep);
}
function doZoomOut() {
changeZoomByFactorDelta(1.0/zoomStep);
}
function doZoomDefault() {
if (tabId == -1)
return;
chrome.tabs.setZoom(tabId, 1.0, function() {
if (chrome.runtime.lastError)
console.log('[ZoomDemoExtension] ' + chrome.runtime.lastError.message);
});
}
function doSetMode() {
if (tabId == -1)
return;
var modeVal;
var modeRadios = document.getElementsByName('modeRadio');
for (var i = 0; i < modeRadios.length; i++) {
if (modeRadios[i].checked)
modeVal = modeRadios[i].value;
}
var scopeVal;
var scopeRadios = document.getElementsByName('scopeRadio');
for (var i = 0; i < scopeRadios.length; i++) {
if (scopeRadios[i].checked)
scopeVal = scopeRadios[i].value;
}
if (!modeVal || !scopeVal) {
console.log(
'[ZoomDemoExtension] Must specify values for both mode & scope.');
return;
}
chrome.tabs.setZoomSettings(tabId, { mode: modeVal, scope: scopeVal },
function() {
if (chrome.runtime.lastError) {
console.log('[ZoomDemoExtension] doSetMode() error: ' +
chrome.runtime.lastError.message);
}
});
}
function doClose() {
self.close();
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment