Google Chrome 플러그인 개발 - Context Menus

이 섹션에서는 Google Chrome 브라우저 웹 페이지에서 오른쪽 단추를 눌러 사용자 정의 메뉴를 팝업하는 방법, 즉 구글 Context Menus API 인터페이스를 사용하는 방법에 대해 설명합니다.상절에서 주요 절차를 소개했는데 이 부분은 바로 코드를 올린다. 코드는 모두 공식적인 예이기 때문에 실제적인 의미가 없지만 벽돌을 던져 옥을 끌어올리는 역할을 할 수 있다. 모두가 자신의 수요에 따라 자신이 원하는 기능을 개발하는 것이 왕도다.
manifest.json 코드는 다음과 같습니다.

{
	  "name": "Context Menus Sample",
	  "description": "Shows some of the features of the Context Menus API",
	  "version": "0.6",
	  "permissions": ["contextMenus"],
	  "background": {
	    "scripts": ["sample.js"]
	  },
	  "manifest_version": 2
}

sample.js 코드는 다음과 같습니다.

// Copyright (c) 2010 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.  
  
// A generic onclick callback function.  
function genericOnClick(info, tab) {  
  console.log("item " + info.menuItemId + " was clicked");  
  console.log("info: " + JSON.stringify(info));  
  console.log("tab: " + JSON.stringify(tab));  
}  
  
// Create one test item for each context type.  
var contexts = ["page","selection","link","editable","image","video",  
				"audio"];  
for (var i = 0; i < contexts.length; i++) {  
  var context = contexts[i];  
  var title = "Test '" + context + "' menu item";  
  var id = chrome.contextMenus.create({"title": title, "contexts":[context],  
									   "onclick": genericOnClick});  
  console.log("'" + context + "' item:" + id);  
}  
  
  
// Create a parent item and two children.  
var parent = chrome.contextMenus.create({"title": "Test parent item"});  
var child1 = chrome.contextMenus.create(  
{"title": "Child 1", "parentId": parent, "onclick": genericOnClick});  
var child2 = chrome.contextMenus.create(  
  {"title": "Child 2", "parentId": parent, "onclick": genericOnClick});  
console.log("parent:" + parent + " child1:" + child1 + " child2:" + child2);  
  
  
// Create some radio items.  
function radioOnClick(info, tab) {  
  console.log("radio item " + info.menuItemId +  
			  " was clicked (previous checked state was "  +  
			  info.wasChecked + ")");  
}  
var radio1 = chrome.contextMenus.create({"title": "Radio 1", "type": "radio",  
										 "onclick":radioOnClick});  
var radio2 = chrome.contextMenus.create({"title": "Radio 2", "type": "radio",  
										 "onclick":radioOnClick});  
console.log("radio1:" + radio1 + " radio2:" + radio2);  
  
  
// Create some checkbox items.  
function checkboxOnClick(info, tab) {  
  console.log(JSON.stringify(info));  
  console.log("checkbox item " + info.menuItemId +  
			  " was clicked, state is now: " + info.checked +  
			  "(previous state was " + info.wasChecked + ")");  
  
}  
var checkbox1 = chrome.contextMenus.create(  
  {"title": "Checkbox1", "type": "checkbox", "onclick":checkboxOnClick});  
var checkbox2 = chrome.contextMenus.create(  
  {"title": "Checkbox2", "type": "checkbox", "onclick":checkboxOnClick});  
console.log("checkbox1:" + checkbox1 + " checkbox2:" + checkbox2);  
  
  
// Intentionally create an invalid item, to show off error checking in the  
// create callback.  
console.log("About to try creating an invalid item - an error about " +  
			"item 999 should show up");  
chrome.contextMenus.create({"title": "Oops", "parentId":999}, function() {  
  if (chrome.extension.lastError) {  
	console.log("Got expected error: " + chrome.extension.lastError.message);  
  }  
});  

플러그인 로드 프로세스 참조:http://blog.csdn.net/anda0109/article/details/50325849