• 谷歌浏览器插件开发教程4


    1 页面对插件通信方法

    页面的js 

    $(function(){
    
            chrome.runtime.onMessage.addListener(
        function (request, sender, sendResponse) {
            
            console.log(request);
         
          
        }
    );
    })

    插件的js

        chrome.runtime.sendMessage({"name":"啦啦"},function(){
                  alert('发送成功');
        })

     2 实现右键菜单

     现在配置文件添加权限

    {
        "name": "todo-plugin",
        "version": "0.9.0",
        "manifest_version": 2,
        "description": "chrome plugin demo",
        "browser_action": {
            "default_icon": "icon.png",
            "default_title": "Todo List",
            "default_popup": "popup.html"
        },
        "content_scripts": [{  //对页面内容进行操作的脚本
             "matches": ["http://*/*","https://*/*"],  //满足什么条件执行该插件 
             "js": ["jquery.min.js","test.js"]
        }],
        "background":{
        "scripts":["jquery.min.js","background.js"]
        },
    //右键菜单权限
    "permissions": ["contextMenus"] }

    然后再background.js后台写

    chrome.contextMenus.create({
        title: "测试右键菜单",
        onclick: function(){alert('您点击了右键菜单!');}
       })

     就好了 

    下面加强版

    chrome.contextMenus.create({
        title: '使用度娘搜索:%s', // %s表示选中的文字
        contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单
        onclick: function(params)
        {
            // 注意不能使用location.href,因为location是属于background的window对象
            chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
        }
    });
  • 相关阅读:
    07组合,模版
    06享元、责任链
    05观察,命令
    04代理,迭代器
    03单例,策略
    02工厂,创建者
    01基础
    css随记02布局
    css随记01编辑技巧,背景与边框
    nodejs随记03
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11926969.html
Copyright © 2020-2023  润新知