第一個chrome extension

現在，chrome瀏覽器的使用如愈來愈流行，chrome extension每每能提供更多很豐富的功能。之前一直想了解這方面的東西，但是又擔憂很複雜。前段時間，在鬥魚看一個直播，想刷彈幕，可是每次本身輸入有很麻煩，因此寫個小腳本就能夠了，後來想如下也可使用chrome extension來實現。關於chrome extension,google就給出了相關的文檔，另外國內360也翻譯了這篇文檔。固然我所作的東西仍是很基礎的，在此，也是就是說一下本身第一次嘗試的經驗。
其實，chrome extension彷佛和如今很火的pwa有一點相似，對於chrome extension來講，有個文件是必不可少的，即manifest.json，這對於extension是很是重要的。這個文件主要是項目的某些描述，以及一些文件的引入。以個人文件爲例：

{
  "manifest_version": 2,

  "name": "彈幕加強",
  "description": "This extension provides you a good experience of sending danmu at douyu",
  "version": "1.0",
  "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" },
  "content_scripts" : [{ "matches": [ "http://*/*", "https://*/*" ], "js" : ["app.js"], "run_at": "document_end" }] }

manifes_version好像是必須定義爲2，這個好像是強制要求。說起一點的就是你可使用開發者模式從而調試你的extension。你能夠在tab右鍵打開更多工具，而後找到拓展程序打開，而後你能夠經過加載已解壓的拓展程序，只要選擇你extension的文件夾就能夠了，而且在右上角勾選上開發者模式。
接着主要講一下「brower_action」裏面定義的是extension的相關內容，」default_icon」便是插件的圖標，」default_popup」就是彈出的頁面，chrome extension規定html文件和js文件必須是分開來的。extension和當前打開的頁面之間的環境是相互隔離的，是不能夠直接通訊的。」content_script」是定義插入到當前打開頁面的相關js文件，「matches」可讓腳本再匹配到規定的正則纔會執行，「js」則是插入到頁面的js文件，你還能夠插入css文件。須要注意的是，」content_script」雖然可以操縱當前頁面的dom，可是他和當前頁面的js環境是相互隔離的，不可以互相交互，固然也有相應的其餘方法。
個人extension只是用到了」content_script」:

var times = 1000;
for (var i = 0; i < times; i ++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
      document.getElementById('js-send-msg').childNodes[1].value = '凸凸凸凸凸凸凸凸凸凸凸道歉' + i;
      document.getElementById('js-send-msg').childNodes[5].click();
    }, i * 10000);
  })(i);
}

這個能夠用來直接操控當前dom，用了個小閉包。固然代碼仍是比較醜陋，比較基礎，這也是我本身對chrome extension的第一次小嚐試，源代碼地址 https://github.com/neal1991/danmu-sender

求star!!!!