centersl/chrome-extensions-samples
1
0
Fork 0
mirror of https://github.com/GoogleChrome/chrome-extensions-samples.git synced 2026-03-26 13:19:49 +07:00
Code Issues Packages Projects Releases Wiki Activity

Update context menu sample to show per-window menus

Browse Source
This commit is contained in:
Mihai Parparita
2012-07-02 16:04:04 -07:00
parent 0e40a9ee66
commit 71651bddf7
7 changed files with 99 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
context-menu/README.md Normal file
View File

@@ -0,0 +1,3 @@
Sample that shows how to use the [contex menu API](http://developer.chrome.com/trunk/apps/contextMenus.html) in an app to achieve per-window windows.
Context menus are normally global to the entire app, and thus all windows would have the same menu. This sample uses a `focus` event handler in each window to detect when a window is brought to the foreground. When it is, the contents of the context menu are updated with that window's commands. The `chrome.contextMenus.onClicked` event handler also only handles events that occur in that window.

11
context-menu/a.html Normal file
View File

@@ -0,0 +1,11 @@
<html>
<head>
<script src="a.js"></script>
</head>
<body>
<h1>Window A</h1>
<p>Right click to see the context menu.</p>
<p>Log:</p>
<pre id="log"></pre>
</body>
</html>

36
context-menu/a.js Normal file
View File

@@ -0,0 +1,36 @@
var CONTEXT_MENU_COMMANDS = ['foo', 'bar', 'baz'];
function log(message) {
document.getElementById('log').textContent += message + '\n';
}
function setUpContextMenu() {
chrome.contextMenus.removeAll(function() {
CONTEXT_MENU_COMMANDS.forEach(function(commandId) {
chrome.contextMenus.create({
title: 'A: ' + commandId,
id: commandId,
contexts: ['all']
});
});
});
}
chrome.contextMenus.onClicked.addListener(function(info) {
if (!document.hasFocus()) {
log('Ignoring context menu click that happened in another window');
return;
}
log('Item selected in A: ' + info.menuItemId);
});
onload = function() {
log('A is loaded');
setUpContextMenu();
}
onfocus = function() {
log('A is focused');
setUpContextMenu();
}

11
context-menu/b.html Normal file
View File

@@ -0,0 +1,11 @@
<html>
<head>
<script src="b.js"></script>
</head>
<body>
<h1>Window B</h1>
<p>Right click to see the context menu.</p>
<p>Log:</p>
<pre id="log"></pre>
</body>
</html>

36
context-menu/b.js Normal file
View File

@@ -0,0 +1,36 @@
var CONTEXT_MENU_COMMANDS = ['foo', 'bar', 'baz'];
function log(message) {
document.getElementById('log').textContent += message + '\n';
}
function setUpContextMenu() {
chrome.contextMenus.removeAll(function() {
CONTEXT_MENU_COMMANDS.forEach(function(commandId) {
chrome.contextMenus.create({
title: 'B: ' + commandId,
id: commandId,
contexts: ['all']
});
});
});
}
chrome.contextMenus.onClicked.addListener(function(info) {
if (!document.hasFocus()) {
log('Ignoring context menu click that happened in another window');
return;
}
log('Item selected in B: ' + info.menuItemId);
});
onload = function() {
log('B is loaded');
setUpContextMenu();
}
onfocus = function() {
log('B is focused');
setUpContextMenu();
}

8
context-menu/index.html
View File

@@ -1,8 +0,0 @@
<html>
<head>
<title>Context Menu Demo</title>
</head>
<body>
<p>Right click to see the context menu</p>
</body>
</html>

22
context-menu/main.js
View File

@@ -1,22 +1,4 @@
// The click hander will get called when a context menu item is clicked
function click_handler(info, tab) {
console.log("You clicked the '" + info.menuItemId + "' menu item");
}
// Populate some entries in the context menu
function populate_context_menu() {
// Create one test item for each context type.
var contexts = ["cut","snarf","paste","send","pipe","defer"];
for (var i = 0; i < contexts.length; i++) {
var context = contexts[i];
var title = "The '" + context + "' menu item";
var id = chrome.contextMenus.create({"title": title, "id": context/* , "onclick": function (){} */ } );
console.log("'" + context + "' item:" + id);
}
// Attach a listener for clicks on the menu
chrome.contextMenus.onClicked.addListener(click_handler);
}
// Add a listener that sets up the applicaation ofter launch
chrome.experimental.app.onLaunched.addListener(function() {
chrome.appWindow.create('index.html');
populate_context_menu();
chrome.appWindow.create('a.html', {top: 0, left: 0, width: 300, height: 300});
chrome.appWindow.create('b.html', {top: 0, left: 310, width: 300, height: 300});
});