目录
- 列举其权限
- 执行流程
- login 验证相关
- 采集结束流程
列举其权限
"permissions": [ "*://*/*", "contextMenus", "cookies", "storage", "tabs", "webRequest", "webRequestBlocking" ]
如下位于 background.js 中 init 部分的说明,该插件(下文都用“其”指代)主要会有三个页面,create(意思创建采集 pin,将单个图片作为采集添加到画板)、search(相似匹配页面)、grid(就是当前页面图片 grid 列表,只会展示一部分,应该是有个 limit 限制,尚未找到)
(相比较,花瓣采集插件多了多张采集,以及那个截图与截图编辑的功能)
(按我的想法,晓得个别 chrome api 的存在后,有相当多的页面内功能可以做进插件,就比如说有多个功能,可以是单 js 文件,也可以是集成在 func,settings 页面可以进行编辑所需要的功能,最后将需要的几个功能按钮展示在 popup)
// overlays are: create, search, and grid
// we also have: logic, which alerts
// this grabs all possible messages one time and
// sends them via localStorage instead of using
// 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 验证相关
// 在 logic.js 的初始化过程中,首先向 background 发消息
$.f.sendMessage({ to: "background", act: "login" });
// backgound 中响应,执行 authCheck,里面主要内容是获取 cookies 特定字段 value 值,处理后得到 token,用于之后 api 请求,参考
authCheck: () => {
// ...
makeToken(processCookies(getThese), handoff);
}
采集结束流程
点击 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