本节主要介绍如何在 Google Chrome 浏览器 web 页面上点击右键弹出自定义菜单, 即如何使用谷歌 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
来源: http://www.bubuko.com/infodetail-2662250.html