zoukankan      html  css  js  c++  java
  • 谷歌插件开发

    官方API

    manifest.json

    文件内容如下,官方manifest

    {
        "name": "aeolian Extensions",  //插件名称
        "description" : "Hello world Extension",   //鼠标悬浮时提示
        "version": "1.0",  // version在打包完插件的时候,根据version判断插件是否需要更新。
        "manifest_version": 2,   // 写死的
        "browser_action": {   //工具栏样式
          "default_popup": "./popup.html",  //点击工具栏图标弹出的界面样式
          "default_icon": "./icon.png"  //工具栏显示的小图标
        },
        "commands": {    //设置快捷键
          "_execute_browser_action": {
            "suggested_key": {
              "default": "Ctrl+Shift+F",
              "mac": "MacCtrl+Shift+F"
            },
            "description": "Opens popup.html"
          }
        }
    }

    然后新建icon图标和点击后的popup页面

    官方demo

    浏览器标签默认页

    manifest配置

        // 覆盖浏览器默认页面
        "chrome_url_overrides":
        {
            // 覆盖浏览器默认的新标签页
            "newtab": "newtab.html"
        },

    后台常驻JS/HTML

    manifest配置

        // 会一直常驻的后台JS或后台页面
        "background":
        {
            // 2种指定方式,如果指定JS,那么会自动生成一个背景页
            //"page": "background.html"
            "scripts": ["./background.js"]
        },

    background.js文件内容

    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)});
        }
    });

    注入页面的JS/CSS

    manifest配置

        "content_scripts":
            [
                {
                    //"matches": ["http://*/*", "https://*/*"],
                    // "<all_urls>" 表示匹配所有地址
                    "matches": ["<all_urls>"],
                    // 多个JS按顺序注入
                    "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
                    // JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
                    "css": ["css/custom.css"],
                    // 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
                    "run_at": "document_start"
                }
            ],

    权限申请

    manifest配置

        "permissions":
        [
            "contextMenus", // 右键菜单
            "tabs", // 标签
            "notifications", // 通知
            "webRequest", // web请求
            "webRequestBlocking",
            "storage", // 插件本地存储
            "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
            "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
        ],

    插件主页链接

    manifest配置

    // 插件主页,这个很重要,不要浪费了这个免费广告位
    "homepage_url": "https://www.baidu.com",

    其他配置

        // 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
        "omnibox": { "keyword" : "go" },
        // 默认语言
        "default_locale": "zh_CN",
        // devtools页面入口,注意只能指向一个HTML文件,不能是JS文件
        "devtools_page": "devtools.html"

    久坐提醒

    在background.js中添加如下代码

    $(function(){
            //定时器提醒久坐
            var time1=window.setInterval(sendNoticeMsg,1000 * 60 * 60);
            function sendNoticeMsg() {
              chrome.notifications.create(null, {
                            type: 'basic',
                            iconUrl: '../img/TeaTip.png',
                            title: '久坐提示!',
                            message: '抬头~挺胸~站起来~别看这~'
                    });
            }
            //去掉定时器的方法
            //window.setInterval(time1);  
    });

    右击菜单多个二级菜单

    在background.js中添加如下代码

    chrome.contextMenus.removeAll();
    chrome.contextMenus.create({
        type: "separator"
    });
    
    chrome.contextMenus.create({
        title: '使用度娘搜索:%s',
        contexts: ["all"],
        onclick: function(params) {
          chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
        }
    });
    
    chrome.contextMenus.create({
        title:  '使用博客园搜索:%s',
        contexts: ["all"],
        onclick: function(params) {
          chrome.tabs.create({url: 'https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=' + encodeURI(params.selectionText)});
        }
    });
    
    chrome.contextMenus.create({
        title:  '使用GitHub搜索:%s',
        contexts: ["all"],
        onclick: function(params) {
          chrome.tabs.create({url: 'https://github.com/search?q=' + encodeURI(params.selectionText)});
        }
    });
    
    chrome.contextMenus.create({
        title:  '使用知乎搜索:%s',
        contexts: ["all"],
        onclick: function(params) {
          chrome.tabs.create({url: 'https://www.zhihu.com/search?type=content&q=' + encodeURI(params.selectionText)});
        }
    });

    Message通信

    内容脚本(ContentScript)向后台脚本(BackgroundScript)使用chrome.runtime.sendMessage发送消息

    已安装插件路径

    C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultExtensions

    参考

    https://www.jianshu.com/p/51c650f98d9c

    http://chromecj.com/dev/2018-07/1482.html

    https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

  • 相关阅读:
    CSS之旅——第二站 如何更深入的理解各种选择器
    CSS之旅——第一站 为什么要用CSS
    记录一些在用wcf的过程中走过的泥巴路 【第一篇】
    asp.net mvc 之旅—— 第二站 窥探Controller下的各种Result
    asp.net mvc 之旅—— 第一站 从简单的razor入手
    Sql Server之旅——终点站 nolock引发的三级事件的一些思考
    Sql Server之旅——第十四站 深入的探讨锁机制
    Sql Server之旅——第十三站 对锁的初步认识
    Sql Server之旅——第十二站 sqltext的参数化处理
    Sql Server之旅——第十一站 简单说说sqlserver的执行计划
  • 原文地址:https://www.cnblogs.com/aeolian/p/10535547.html
Copyright © 2011-2022 走看看