zoukankan      html  css  js  c++  java
  • Google Chrome插件开发-Context Menus

           本节主要介绍如何在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

  • 相关阅读:
    Mongodb在windows下的安装和启动
    git操作的常用命令
    删除smartygit的配置文件
    注册树模式
    关于js的一些基础知识点
    关于mysql的初步学习 (五)
    关于mysql的初步学习 (四)
    关于mysql的初步学习 (三)
    关于mysql的初步学习 (二)
    关于数据库建表时的有趣实例--关键字重复
  • 原文地址:https://www.cnblogs.com/h2zZhou/p/9237105.html
Copyright © 2011-2022 走看看