谷歌插件开发 | 易学教程

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