chrome-anki-quick-adder分析

最新推荐文章于 2024-06-09 09:44:41 发布

jahentao

最新推荐文章于 2024-06-09 09:44:41 发布

阅读量531

点赞数 1

本文链接：https://blog.csdn.net/u011730792/article/details/105527264

版权

anki 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

分析一个项目，作为chrome插件项目，直接添加anki卡牌。

项目分析基于chrome-anki-quick-adder v2.0.6。

依赖库分析

采用了几个库

jquery
MediumEditor

采用的MediumEditor作为使用的卡牌内容样式的编辑器。
MediumEditor TIM主题

添加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交换消息和存储值来与其父扩展插件进行通信。