鬥魚擴展初識Chrome擴展(一)

看鬥魚有些時間了，也寫了不少輔助的js,但是昨天不小心把硬碟分區表搞沒了，自己寫了好久的代碼不見了，DiskGenius 也沒恢覆成功，所以要重寫一次，大家要引以為鑒，常備份代碼，github是個不錯的選擇。

先通過一個簡單的程式， 來認識下 Chrome 擴展，通過最簡單的2個文件，就能組成一個Chrome擴展(圖標的那個可以不要)

1. manifest.json 主要文件，一些許可權說明都在此註冊

content_scripts.js 主要執行文件(這裡我們只要打一行文字)

chrome://extensions/  打開，開發者模式，然後 將DouyuRoom 文件夾 拖入 這個頁面

我們打開一個 鬥魚房間， 然後就看到 一行我們設置的文字被列印出來了。

這時，我們要把 代碼 同步一以github上去，先創建一個名為DouyuRoom的倉庫。

記下 倉庫地址 https://github.com/likehc/DouyuRoom.git

用”Ctrl+Shift+p”打開命令視窗，輸入”Git:init”初始化git環境。註意工程目錄，別錯了

在Git directory 里敲回車，確定當前目錄

"Git:add" 來添加新增和修改的文件(這裡的文件都是第一次修改上傳，所以我選了all)

“Git:commit” 在彈出的視窗處寫入確認信息，直接關閉視窗就行，直接觸發commit

關聯地址 遠程倉庫地址 ，Sublime 插件上的，我不知道怎麼關聯，所以用了這個方法。

然後 就是push.

回到Sublime ，我們就可以 修改完文件，add..選擇修改的文件，commit，然後pull 與push 了。

manifest.json

 1 {
 2     "manifest_version": 2,
 3     "name": "DouyuRoom",
 4     "description": "鬥魚房間的一些優化",
 5     "version": "1.0.0",
 6     "icons":{
 7         "16":"ico/icon.png",    //擴展在瀏覽器右上圖標
 8         "48":"ico/icon.png"        //擴展程式管理裡面的圖標
 9     },
10     "content_scripts":[{
11         "js": ["js/content_scripts.js"],    //要註入的js
12         "matches": ["https://www.douyu.com/*"],    //滿足這裡的頁面方能註入js
13         "run_at": "document_idle",
14         "all_frames":true
15     }]
16 }

content_scripts.js

console.log("I'm form %cDouyuRoom","color:red");