将开源划词翻译插件适新版 Edge

本文共 881 字，预计阅读时间 4 分钟。

原始 repo

从原 repo 下载最新版 Chrome release，解压。

适配和使用

针对老版本

对于老版本 Edge，需要从 Windows Store 下载 Microsoft Edge Extension Toolkit。注意：如果有代理可能需要关闭代理，否则会导致 Windows Store 发生诸如 0x80131500 之类的连接错误，这是由于 TLS 相关问题导致的。

使用 Microsoft Edge Extension Toolkit 打开 crx-selection-translate-x.x.x/src 项目文件，修改部分代码用于适配。其实一般只是将 x="chrome-extension://extension_eaxmple 修改为 x=getExtensionProtocol()+"//extension_eaxmple"，以及部分出现 chrome-extension 文本的地方换一下（没错，巨硬适配程序是直接搜索字符串的，即便是纯文本也要替换）。

对于新版本 Edge 其内核为 Chromium，可以直接兼容 Chrome 扩展。我们这里针对子新版本 Chrome 做适配。

针对新版本

有一个问题就是 Windows 上处理 node 相关的问题。

从 NodeJS 官网下载 Windows 安装包，一路「下一步」。注意 Terminal 的整个 App 窗口要重启（而不是像 MacOS/Linux 那样重启 Tab 刷新 rc 文件），不出意外应该能用 node npm 了。

此时不要慌，不要去 npm ci，此时大概率会出现 MSBUILD : error MSB3428 错误：

MSBUILD : error MSB3428: 未能加载 Visual C++ 组件VCBuild.exe。要解决此问题，1) 安装 .NET Framework 2.0 SDK；2) 安装 Microsoft Visual Studio 2005；或 3) 如果将该组件安装到了其他位置，请将其位置添加到系统路径中。

独立安装 node-sass

依次运行：

1 2	$ npm install node-sass@latest $ npm ls node-sass

此时应该会出现：

E:\crx-selection-translate-6.4.9
`-- UNMET PEER DEPENDENCY [email protected]

npm ERR! peer dep missing: node-sass@^3.4.2, required by [email protected]

其中 4.13.1 是版本号。查看目录下 node_modules\node-sass\vendor 的文件夹名称，这里的 win32-x64-72 是发行版号，进入 https://github.com/sass/node-sass/releases/download/v<版本号>/<发行版号>_binding.node 并且下载对应的 release，将下载的结果重命名为 binding.node 覆盖 node_modules\node-sass\vendor\win32-x64-72 其中的文件即可。

重新查看版本应该没有错误：

1
2
3

$ npm ls node-sass
[email protected] E:\crx-selection-translate-6.4.9\node_modules\node-sass
`-- (empty)

执行编译

$ npm ci
...
$ npm run dev
> @ dev E:\crx-selection-translate-6.4.9
> webpack --config build/webpack.dev.config.js

Hash: 7d48333263ea05fb5613
Version: webpack 1.15.0
Time: 2920ms
                    Asset     Size  Chunks             Chunk Names
selection-translator.woff   3.6 kB          [emitted]
                    bg.js   387 kB       0  [emitted]  bg
               bs-lite.js   3.9 kB       1  [emitted]  bs-lite
               content.js   611 kB       2  [emitted]  content
               options.js   553 kB       3  [emitted]  options
                 popup.js  21.8 kB       4  [emitted]  popup
              commons1.js   250 kB       5  [emitted]  commons1.js
              commons2.js   727 kB       6  [emitted]  commons2.js
              commons3.js   968 kB       7  [emitted]  commons3.js
              bs-lite.css   132 kB       1  [emitted]  bs-lite
              options.css  2.01 kB       3  [emitted]  options
                popup.css  1.16 kB       4  [emitted]  popup
          commons1.js.css  21.9 kB       5  [emitted]  commons1.js
    + 511 hidden modules
Child extract-text-webpack-plugin:
        + 3 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules

此时 repo 的src 目录下已经有 bunble 文件了，可以按 Ctrl+C 强行停止。

加载插件

进入 Edge - 扩展，打开左下方「开发人员模式」，选择右上方「加载解压缩的扩展」，注意需要加载 repo 的 src 目录而不是 repo 根目录。

此时应该已经可以使用了，需要刷新页面才能使插件生效。

相关插件已提交 Microsoft Store 审核，也可以从 GitHub 先行下载体验。

Cyrus Blog