擼一個本身想要的chrome拓展的筆記

上一篇記的是chrome的devtools拓展。這裏記一下chrome拓展，也就是CRX。

顧名思義，chrome擴展，就是chrome瀏覽器的擴展。

chrome擴展，是使用chrome自己api開發的工具。 chrome插件，我沒記錯的話是基於webkit內核NPAPI (新版本是PPAPI)開發出來的工具。 本質上兩者好像就不同。

先來BB一下大致構成。後面詳細。

• manifest.json 我的理解嘛，這玩意兒就和package.json差很少，就是配置文件。後面BB這個的api。

• background 這個東西，就是和chrome打交道的了。叫後臺頁面。就是告訴chrome你是要幹啥，你是要持續運行的後臺頁面呢，仍是就是一個單純的事件頁面呢。

• popup 若是你須要操做這個拓展程序，那就須要這個東西了。這個是一個純web頁面。

• Content scripts -- 內容腳本，就是鏈接background和popup的媒介。

  popup告訴內容腳本要幹啥。內容腳本讓background去幹啥。
  複製代碼

manifest的api來了(沒錯，就是mani，不是main)

{
    //必須得有的
    "manifest_version" : 2, //這裏 是且只能是2 api裏只有2，姑且這麼認爲
    "name" : "nicaicai", //就是你這個chrome拓展叫啥
    "version" : "1.0.0",  //你這個拓展的版本

    //最好是有的
    "default_locale" : "zh_CN", //這個拓展是給哪國人看的
    "description" : "介紹一下這個拓展是幹啥的",
    
    //愛有沒有，有就有一個
    "browser_action":{
        //擴展再瀏覽器右上角那個小圖標
        "default_icon": "img/icon.png",
        // 鼠標在圖標懸停時的標題，想要就要，不想要就拉倒
        "default_title": "什麼玩意兒的擴展",
        //這個擴展的首頁，根據目錄結構來。
        "default_popup": "popup.html"    
    },
    //下面這個和上面最好活一個，不要都活下來
    "page_action":{
        "default_icon": "img/icon.png",
        "default_title": "愛啥啥",
        "default_popup": "popup.html"
    },

    //下面這些就隨意發揮了
    "action" : "我不知道是幹啥的",
    "author" : "誰幹的(確定句)",
    "automation" : "上一句的上一句",

    //敲黑板。這個是長駐在後臺執行的東西
    "background"  : {
      // 用js的形式，會自動生成一個後臺頁面
        "scripts": [
            "js/background.js"//目錄就是上面的那個background.js在你本地項目裏的目錄地址
        ]
  
        //或者，兩者活一個
        "page": "background.html"
    },
    // 須要直接注入頁面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配全部地址
             //下面這種寫法也能夠，matches後面是數組或者string就能夠
              // "http://*/",
              // "https://*/",
              // "http://*/*",
              // "https://*/*"
            
            "matches": ["<all_urls>"],
            // 若是有好幾個js的話，就按順序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
           // js若是沒有啥依賴的，能夠隨便順序
          // css最好按照順序來，省得覆蓋
            "css": ["css/index.css"],
            // 代碼注入的時間，可設置的值： "document_start", "document_end", or "document_idle"，最後一個表示頁面空閒時，默認document_idle
            "run_at": "document_start"
        }
    ],
     //再敲一次黑板，若是你要用chromeAPI中的一些東西，要在這裏列出來你要用的‘權限’。可使用的有不少，不一一舉例了。
    "permissions" : [
        "contextMenus", // 右鍵菜單
        "tabs", // 標籤
        "http://*/*",
        "https://*/*"
    ]
}
複製代碼

以上這些，基本上夠用0.0 若是有特殊需求，能夠本身找api裏你須要的。英語很差，有些不知道怎麼解釋。 都是授予對chrome.xxxapi的擴展訪問權限

咳咳。大致api說一下，下面再BB點我以爲有用的。。。。 開發過程當中，在background.js頁面裏，可使用一些chrome.xx.xx這種語法來綁定相關事件

// 接收消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.result) {
        sendResponse({
            farewell: "ok"
        });
    }

    localStorage.setItem("key", request.msg);
});
複製代碼

"scripts": ["js/background.js"]這裏就是接受信息的js。

在content 頁面裏

// 發送消息
chrome.runtime.sendMessage(
    {
        msg: '從 Content Script 向 事件頁面 傳遞消息',
        result: 1
    },
    function(response) {
        if (response && response.msg) {
            console.log(response.msg);
        }
    }
);
複製代碼

這個js文件至關因而入口js文件，要在你的"default_popup": "popup.html"這裏對應的html中引入。

以上就是大致操做，總之，用到chromeAPI裏的，須要傳遞的就要在內容頁面裏發送，在持續在後臺執行的js中接受。這樣才能實時知足你。

那麼，開發完了，若是想讓更多人使用要怎麼作呢？

登陸到 Chrome 開發者信息中心，以便你能夠發佈到Chrome應用商店。

首先，你須要有一個 Google 賬號，去註冊一個。 而後打包成*.zip，上傳上去。 可是，這個上傳是須要收費的。。。 chrome會索要 5刀 的開發者註冊費用，給錢以後，你能夠上傳20個擴展了。。 PS：貌似得用visa卡才能支付

若是隻是小範圍內使用，能夠直接打包發送出去，使用者添加到chrome擴展就行了。

本文僅供學習筆記使用。。。無抄襲之意、、、歡迎糾錯。。。

補一句，開發過程當中修改background和content Script的時候，要移除擴展再次添加，纔有效，相似於popup頁面的css、js，刷新(見下圖)就有效。

補一張圖

若是擴展有錯誤，在拓展程序的這個頁面裏，會有提示，點擊這個錯誤 就能夠看到哪裏有問題了。