谷歌插件開發

官方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:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions

參考

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

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

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