分析一個項目，作爲chrome插件項目，直接添加anki卡牌。
項目分析基於chrome-anki-quick-adder v2.0.6。
依賴庫分析
採用了幾個庫
- jquery
- MediumEditor
採用的MediumEditor作爲使用的卡牌內容樣式的編輯器。
添加Anki卡牌的原理
使用Anki Connect暴露的本地REST API，與anki交互。默認端口號8765，默認綁定的IP地址127.0.0.1，用於外網訪問需要修改。
每個請求都包含一個JSON編碼的對象，該對象包含一個action，一個version，上下文參數params以及用於身份驗證的鍵值key（可選的，默認情況下可以省略）。
例如：
$ curl localhost:8765 -X POST -d "{\"action\": \"deckNames\", \"version\": 6}"
{"result": ["Default"], "error": null}
Anki Connect項目支持的API操作見supported-actions。
Chrome插件執行流程
之前沒有開發過Chrome插件，最近有一些工具，想採用Chrome插件的方式做做看。
根據chrome-anki-quick-adder的插件執行邏輯，順便理清一些Chrome插件的工作機制。
從項目中看，popup.html就是彈出的添加卡牌的界面了。popup.html中的控制邏輯在javascript.js中，還要一些代碼，如src/importFile.js。
簡單閱讀了popup.html中界面和代碼的對應關係，除了“Saved Notes”選項卡，採用了jsgrid是個網格，其他都很明確。
至於爲什麼點插件按鈕可以彈出頁面，可能與chrome插件指定的彈出頁面有關，manifest.json可以找到線索。eventPage.js也是在manifest.json中被引入。
部分截取內容
{
"name": "Anki Quick Adder",
"version": "2.0.5",
"short_name": "Anki Adder",
"description": "This extension provides the ability to create anki cards directly from Google Chrome on your Anki Desktop.",
"background":{
"scripts": ["lib/common/js/jquery-3.3.1.min.js","eventPage.js"],
"persistent": false
},
"permissions": [
"storage",
"notifications",
"contextMenus",
"activeTab",
"http://localhost/"
],
"browser_action": {
"default_icon": "icon-64.png",
"default_popup": "popup.html"
},
"web_accessible_resources": [
"icon-64.png",
"src/importFile.js",
"src/editCardModal.js",
"src/editCardModel.css",
"popup.html#tabs-2"
],
"options_page": "popup.html#tabs-2"
}
- browser_action 指定了插件圖標和彈出頁面
- options_page 指定了插件配置頁面
- background 中引入了JavaScript庫和腳本
- 使用了chrome runtime的哪些功能，就要聲明好
permissions權限
其他更多的，就要看文檔了，順便翻一翻文檔，有助理解Getting Started Tutorial、Extensions Overview、Develop Extensions。
看了一條新聞，谷歌停止個平臺對Chrome Apps的支持，不過還是繼續Chrome Extension的支持，不影響不用考慮更換Extension的技術路線。一方面是網上已經有相當多基於HTML5等方式打造的Web Apps，加上在Chrome瀏覽器中被使用比重較多的項目還是擴展插件，所以谷歌只好將Apps捨棄。
擴展程序是基於事件的程序。事件是瀏覽器觸發器，例如，導航到新頁面，刪除書籤或關閉選項卡。擴展程序在其後臺腳本中監視這些事件，然後按照指定的指示進行響應。eventPages中寫的就是後臺腳本的觸發邏輯。
比如：
chrome.contextMenus.create(menuItem)創建了瀏覽器右鍵菜單chrome.tabs.executeScript()注入代碼到所有tab裏chrome.notifications.create()創建一個通知
這張圖很清晰了，項目中eventPages.js對應的是background.js和popup.js，javascript.js對應的是contentscript.js。popup.js包含對擴展很重要的瀏覽器事件的偵聽器。它處於休眠狀態，直到觸發事件然後執行所指示的邏輯爲止。它僅在需要時才加載，而在空閒時則不加載。contentscript.js在已加載到瀏覽器的頁面的上下文中執行，讀取和修改瀏覽器訪問的網頁的DOM。
contentscript.js腳本可以通過使用storage API交換消息和存儲值來與其父擴展插件進行通信。
那Chrome插件的API文檔在哪呢？找了一下，這裏有一份Chrome 擴展插件規範API的目錄。
大多數Chrome API方法都是異步的，它們立即返回而無需等待操作完成。
至於，如何打包成.crx文件，要在Chrome Web Store Developer中發佈得先註冊，一次性註冊費$5。