目录

  • 列举其权限
  • 执行流程
  • login 验证相关
  • 采集结束流程

列举其权限

  1. "permissions": [ "*://*/*", "contextMenus", "cookies", "storage", "tabs", "webRequest", "webRequestBlocking" ]

如下位于 background.js 中 init 部分的说明，该插件（下文都用“其”指代）主要会有三个页面，create（意思创建采集 pin，将单个图片作为采集添加到画板）、search（相似匹配页面）、grid（就是当前页面图片 grid 列表，只会展示一部分，应该是有个 limit 限制，尚未找到）

（相比较，花瓣采集插件多了多张采集，以及那个截图与截图编辑的功能）

（按我的想法，晓得个别 chrome api 的存在后，有相当多的页面内功能可以做进插件，就比如说有多个功能，可以是单 js 文件，也可以是集成在 func，settings 页面可以进行编辑所需要的功能，最后将需要的几个功能按钮展示在 popup）

  1. // overlays are: create, search, and grid
  2. // we also have: logic, which alerts
  3. // this grabs all possible messages one time and
  4. // sends them via localStorage instead of using
  5. // the i18n API every time, which is slow/blockish

执行流程

插件安装完成启动，自然而然，background.js 已执行 $.f.getLocal({ cb: “init” })，完成初始化。

之后，当页面首先加载 content.js，在非 pinterest 主站或 iframe 等情况下通过校验后，会向 background 发消息请求执行 injectLogic，

再后面，若用户点击右上按钮，background 中的 browserAction.onClick 事件响应，

login 验证相关

  1. // 在 logic.js 的初始化过程中，首先向 background 发消息
  2. $.f.sendMessage({ to: "background", act: "login" });
  4. // backgound 中响应，执行 authCheck，里面主要内容是获取 cookies 特定字段 value 值，处理后得到 token，用于之后 api 请求，参考
  5. authCheck: () => {
  6.   // ...
  7.   makeToken(processCookies(getThese), handoff);
  8. }

采集结束流程

点击 Save 采集，由 create.js 向 background 发消息执行 save，期间 async 函数去创建 XMLHttpRequest 通信，成功后执行回调，

向 create.js 发 newPinWin。在 create 中，给对应 Save 按钮加上 class 显示 checked 效果，延迟 1s 后改变 main 的 class 为 CREATE_main CREATE_hazFeedback，

之后再延迟 5s，即 1 + 5 = 6s，向 background 请求 closeCreate