摘要：代碼代碼戳這里插件預備知識首先給出一本參考的中文書籍，在練習的過程中有幫到忙。你還可以重寫別的頁面，比如書簽管理頁面等，可以參考文檔中文翻譯過來應該叫內容腳本，它可以運行在你指定的頁面之中，可以拿到指定頁面的一些信息。

這是一篇關于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才是真正搞事情的腳本，注意依賴是有順序的噢，其實與在標簽里引