impress-pick v0.0.1

注意事项

请使用yarn而非npm进行包管理, 配合的node版本请使用^10.0.0以确保依赖被正确安装。

Build

# Compatible Windows & MacOS & Linux

# Make sure nodejs, npm, yarn, git, zip is installed
# Ubuntu 18.0.4 e.g:
# `sudo apt install nodejs npm git`
# `npm i -g yarn`

# run `yarn` throw "ERROR: There are no scenarios; must have at least one."
# https://github.com/yarnpkg/yarn/issues/2821#issuecomment-284181365
# or
# `sudo apt remove yarn`
# `npm i -g yarn`

yarn
NODE_ENV=production yarn run build.v2 / NODE_ENV=production yarn run build.v3

# Generate firefox extension file
# /build/*-{{version}}.zip can be temporary load
yarn run pack

Bookmark

// dev env
javascript: (function (w, d) {
  w.impressPick
    ? w.impressPick()
    : (d.body.appendChild(d.createElement("script")).src =
        "http://localhost:8000/impress-pick/extension/dist/index.js?t=" +
        Date.now());
})(this, document);

// prod env
javascript: (function (w, d) {
  w.impressPick
    ? w.impressPick()
    : (d.body.appendChild(d.createElement("script")).src =
        "https://upzip.b0.upaiyun.com/pick/index.js?t=" + Date.now());
})(this, document);

Debugger

yarn run watch.v2 / yarn run watch.v3

# Web Extension debugger in firefox
npx web-ext run -s extension/ --firefox=nightly
# in chrome
# menus -> more tools -> extensions -> load unpacked(developer mode)

Publish

yarn run release

Setting key

Dev 储存在 browser.storage.local 中，Prod 储存在 sync 区域中。

打包与更新

谷歌拓展更新

由于谷歌与 Edge 需要持 ManifestV3 才能上架商店，所以需要使用 v3 的 manifest 文件进行打包

• yarn run lint
• yarn run lang
• NODE_ENV=production yarn run build.v3 && yarn run pack 这时候打包出了一个 zip 文件，这个文件交给抽屉，他会将更新到谷歌拓展的线上商店里去。 同时，将这个文件重命名为，extension.zip (你文件夹里可能已经有这个同名的文件，将过去的重命名为如 extension-old.zip，只有最新的可以使用 extension.zip 这个文件名)， 然后将这个文件上传到 云存储空间下 pick 文件夹，上传工具可以使用 updrive 或者 Upyun Manager。 这样，用户在 https://x.yupoo.com/extension 页面可以下载到最新的拓展了。

火狐的更新

由于本拓展在 firefox 商店已经发布，所以后续改动，都应该是更新该拓展的版本。 拓展的 uuid 是 {314d4f37-f4e3-4ab5-92f2-995d9ea435cc}, uuid 是带大括号的。 火狐商店地址：https://addons.mozilla.org/en-US/firefox/addon/yupoo-tools/

注意：当你决定发布时，请务必确保已经经过了测试，功能验证无误，否则会影响线上用户使用。

火狐的更新命令 yarn run release 是自动化的，有多个步骤集合而成，中间过程出错的话，不容易发现，建议分步骤手动处理。 由于火狐只支持 ManifestV2，所以需要使用 v2 的 manifest 文件进行打包

1. 文件打包。
   先 yarn run lint , yarn run lang, NODE_ENV=production yarn run build.v2 打包出 extension/ 文件夹
2. 更新拓展。
   然后这行命令，可以直接更新 firefox 商店的拓展版本，进行此命令前，请告知 firefox 拓展管理人员，以便进行版本相关控制。web-ext sign -s "extension/" -a "build/" -i "**/*.map" --id="{314d4f37-f4e3-4ab5-92f2-995d9ea435cc}" --api-key="user:16968375:405" --api-secret="b89e260966e8b316ec9dbb53c2aac4434270a996422e92495022a5c2643472f2" --timeout=900000
   正常情况下，应该会返回 Your add-on has been submitted for review. It passed validation but could not be automatically signed because thi is a listed add-on,表示已经成功将新版本拓展推送到 firefox 商店，因为是已发布的拓展，所以不需要再自动签名。如果这个命令无法成功，可以将打包后的 extension/ 文件夹压缩成 zip 格式，交给 firefox 拓展管理人员，直接在火狐 add-on 管理界面里上传压缩包，也可手动更新版本。
3. 后备办法。
   如果上述命令一直报错，也没法手动更新版本，没有其他办法的情况下，可以尝试web-ext sign -s "extension/" -a "build/" -i "**/*.map" --id="tools@x.yupoo.com" --api-key="user:12230883:17" --api-secret="f8adbbbeb5d5184b52396082f59ec52707d179efdc11fd452dfa4569f4066ea6" --timeout=900000 ，利用 web-ext 进行应用签名. 成功执行的话，可以自动下载得到.xpi 文件了.这个文件可以直接被 firefox 识别并安装。但由于 api 权限或者时效性等问题，可能会失败。如果还有问题，联系项目负责人员处理。
4. 获取 xpi 文件。
   如果步骤 2 成功，默认自动更新或手动选用新版本后，在拓展页面里 https://addons.mozilla.org/en-US/firefox/addon/yupoo-tools/ 可以通过 download file 来下载 xpi 文件，重命名为 addon-latest.xpi, 只有最新的 xpi 文件可以被命名为 addon-latest.xpi。
   如果步骤 3 成功，此时应该会自动下载得到了一个 xpi 文件，重命名为 addon-latest.xpi, 只有最新的 xpi 文件可以被命名为 addon-latest.xpi。
5. 将这个文件上传到 云存储空间下 pick文件夹中，可视化上传工具可以使用 updrive 或者 Upyun Manager。yarn run sync 命令会上传多余文件，没时间好好整理剔除冗余，故暂不推荐使用此命令。
6. 此时用户在 firefox 下访问 https://x.yupoo.com/extension 点击下载火狐拓展，可以直接获得 xpi 文件来安装拓展。也可以通过 firefox 拓展商店 https://addons.mozilla.org/zh-CN/firefox/ ，搜索 yupoo-tools 来在线安装。

更新不及时?

因为用户下载的文件路径始终是一样的（只不过路径下的文件内容不同），针对同样的 uri 的资源，可能被 CDN 缓存了，只要保证确实更新了云存储里 extension.zip、addon-latest.xpi，一段时间后用户就会下载到最新的文件。

已知 bug

打包出来的 extension/dist/index.js, 用来放在书签栏里的点击调用。有 bug，待修复。 目前使用的是之前旧的 index.js git SHA 806c823bafe7f210608050cc7b730ab207fcbcce

Function("...") 导致的 unsafe-eval CSP 报错？

问题表现：

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'"

Chrome 扩展在升级 ManifestV3 之后，background script 改为使用 service worker 实现，且不允许使用 unsafe-eval 的 CSP。

由于 service worker 中是没有 window 对象的。导致babel-runtime所使用的generator-runtime@^0.11.0依赖在 service worker 中对于全局对象判断 fallback 到了Function("return this")，导致触发 CSP 报错。generator-runtime在0.12.0版本后修复了该问题。

解决方案： 由于升级 babel 破坏性较大，目前的解决方式为：在 package.json 文件中，将babel-runtime所使用的generator-runtime版本锁在0.12.1以上。

*注：如发现本问题复现的，请确保使用的是yarn而不是npm进行包管理。