Chrome扩展插件练习——书签管理

摘要：代码代码戳这里插件预备知识首先给出一本参考的中文书籍，在练习的过程中有帮到忙。你还可以重写别的页面，比如书签管理页面等，可以参考文档中文翻译过来应该叫内容脚本，它可以运行在你指定的页面之中，可以拿到指定页面的一些信息。

这是一篇关于Chrome扩展插件入门、Vue.js入门的小练习，功能是：在当前浏览的页面点击扩展图标，并点击保存之后，该页面就会存在你的新标签页中。其实就是一个可视书签的内容。
欢迎大家指出代码的不足之处，很多时候都是自己学习自己码代码，太需要别人的意见了。

代码戳这里

首先给出一本参考的中文书籍，在练习的过程中有帮到忙。当然，最权威的还是官方文档，只不过像我这种英文不太好星人只能拣自己看得懂的看了。另外还有官方文档的中文版，在英文版看不懂的时候用。

manifest.json

这个文件其实就是你的扩展插件的一个说明书。来人，上代码！

{
  // 前三个必填
  "manifest_version": 2,
  "name": "bookmark",
  "version": "1.0",

  "description": "This extension shows bookmarks",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  
  "chrome_url_overrides": {
        "newtab": "main.html"
    },
  "content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["jquery-3.2.1.min.js", "html2canvas.js", "canvas2image.js","contentScripts.js"]
    }
  ],
  "permissions": [
    "tabs"
  ]
}

   前三个必填的我不想说了，无非就是版本、名称之类的。

browser_action

这一项是设置你的扩展在浏览器窗口上的小图标，以及点击这个图标弹出的页面的，你会发现文档的写法跟我有些不一样，因为我有点懒，这样写字数比较少，省事儿。同学们不要学我呦。

chrome_url_overrides

顾名思义，重写chrome相关的页面。我这里要重写的是“new tab”，即新标签页，页面的内容入口在main.html。你还可以重写别的页面，比如书签管理页面等，可以参考文档

content_scripts

中文翻译过来应该叫内容脚本，它可以运行在你指定的页面之中，可以拿到指定页面的一些信息。指定的页面就是“matches”这一项了。在本练习中，可以看到用正则匹配了所有页面，因为毕竟是要做书签嘛。“js”这一项是一个数组，里面放的就是你在指定页面里用的脚本，前三个都是依赖，最后一个contentScripts.js才是真正搞事情的脚本，注意依赖是有顺序的噢，其实与在标签里引