第一个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!!!!