feat: 增加 chrome beta 打包机制 & 优化 transfrom-dom 代码块规则 & 修复图片上传失败后无提示问题

package.json

@@ -14,9 +14,9 @@
   },
   "scripts": {
     "pack-zip": "sh ./scripts/build-zip.sh",
-    "pack-crx": "node ./scripts/build-crx.js && sh ./scripts/zip-crx.sh",
     "bundle": "NODE_ENV=production webpack --mode=production",
-    "build": "npm run bundle && npm run pack-zip && npm run pack-crx",
+    "bundle:beta": "NODE_ENV=production BETA=beta webpack --mode=production",
+    "build": "npm run bundle && npm run pack-zip",
     "clean:dist": "sh ./scripts/clean.sh",
     "postinstall": "npm run clean:dist",
     "contributor": "git-contributor",

scripts/build-zip.sh

@@ -1,3 +1,4 @@
 CRUEENT_VERSION=`node -e "console.log(require('./package').version)"`
 
 zip -r $CRUEENT_VERSION.zip ./dist/$CRUEENT_VERSION
+zip -r $CRUEENT_VERSION-beta.zip ./dist/$CRUEENT_VERSION-beta

scripts/common.js

@@ -3,7 +3,7 @@
 const path = require('path');
 const pkg = require('../package.json');
 
-const distFolder = path.resolve(__dirname, '..', 'dist', pkg.version);
+const distFolder = path.resolve(__dirname, '..', 'dist', process.env.BETA === 'beta' ? `${pkg.version}-beta` : pkg.version);
 const cdnPrefix = 'https://app.nlark.com/yuque-chrome-extension';
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 

src/background/index.ts

@@ -18,6 +18,9 @@ listenShortcut();
 chrome.runtime.onInstalled.addListener(async details => {
   console.log('-- runtime installed');
 
+  createContextMenu();
+  updateDynamicRules();
+
   if (details.reason === 'install') {
     chrome.tabs.create({
       url: LinkHelper.introduceExtension,
@@ -64,8 +67,6 @@ chrome.runtime.onInstalled.addListener(async details => {
     );
     chrome.runtime.reload();
   }
-  createContextMenu();
-  updateDynamicRules();
 });
 
 chrome.runtime.setUninstallURL(LinkHelper.unInstallFeedback);

src/components/SuperSideBar/impl/ClipAssistant/index.tsx

@@ -151,12 +151,10 @@ function ClipContent() {
 
   const onUploadImage = useCallback(async (params: { data: string }) => {
     const file = await transformUrlToFile(params.data);
-    const res = await Promise.all(
-      [
-        backgroundBridge.request.upload.attach(params.data),
-        ocrManager.startOCR('file', file),
-      ].map(p => p.catch(e => e)),
-    );
+    const res = await Promise.all([
+      backgroundBridge.request.upload.attach(params.data),
+      ocrManager.startOCR('file', file),
+    ]);
     return {
       ...(res[0] || {}),
       ocrLocations: res[1],

src/core/transform-dom.ts

@@ -28,29 +28,53 @@ function hexoCodeBlock(cloneNode: Element) {
 
 function commonCodeBlock(node: Element) {
   const preElements = node.querySelectorAll('pre');
+  /**
+   * 查询所有 pre 节点
+   * 并将 pre 节点下所有的 code 节点融合成一个新的 code 节点
+   * <pre>
+   *  <code>1</code>
+   *  <ol><code>2</code></ol>
+   * </pre>
+   * 转化后
+   * <pre>
+   *  <code>
+   *    <div>1</div>
+   *    <div>2</div>
+   *  </code>
+   * </pre>
+   */
   preElements.forEach(pre => {
-    const codeElement = pre.querySelector('code');
-    if (codeElement) {
-      const childNodes = pre.childNodes;
-      const needRemoveNodes: ChildNode[] = [];
-      const needMergeNodes: ChildNode[] = [];
-      childNodes.forEach(item => {
-        if ((item as Element)?.tagName === 'CODE' && item !== codeElement) {
-          needMergeNodes.push(item);
-        }
-        if (item !== codeElement) {
-          needRemoveNodes.push(item);
-        }
-      });
-      // 将非 code 移除掉
-      needRemoveNodes.forEach(item => {
+    const codeElementArray = pre.querySelectorAll('code');
+    const cleanCode: ChildNode[] = [];
+    for (const codeElement of codeElementArray) {
+      if (codeElement) {
+        const childNodes = pre.childNodes;
+        const needRemoveNodes: ChildNode[] = [];
+        const needMergeNodes: ChildNode[] = [];
+        childNodes.forEach(item => {
+          if ((item as Element)?.tagName === 'CODE' && item !== codeElement) {
+            needMergeNodes.push(item);
+          }
+          if (item !== codeElement) {
+            needRemoveNodes.push(item);
+          }
+        });
+        const div = document.createElement('div');
+        codeElement.childNodes.forEach(item => {
+          div.appendChild(item);
+        });
+        cleanCode.push(div);
+      }
+      // 移除掉所有的子节点
+      pre.childNodes.forEach(item => {
         pre.removeChild(item);
       });
-      // 将多 code 合成一个 dom
-      needMergeNodes.forEach(item => {
-        codeElement.appendChild(document.createElement('br'));
-        item.childNodes.forEach(codeChild => codeElement.appendChild(codeChild));
+      const code = document.createElement('code');
+      cleanCode.forEach(item => code.appendChild(item));
+      pre.childNodes.forEach(item => {
+        pre.removeChild(item);
       });
+      pre.appendChild(code);
     }
   });
 }
@@ -96,7 +120,10 @@ function findYuqueChildId(element: Element | null) {
 }
 
 function isYuqueContent(element: Element) {
-  if (element.closest('.ne-viewer-body') || document.querySelector('.ne-viewer-body')) {
+  if (
+    element.closest('.ne-viewer-body') ||
+    document.querySelector('.ne-viewer-body')
+  ) {
     return true;
   }
   return false;
@@ -130,7 +157,9 @@ async function transformYuqueContent(element: Element) {
     }, 3000);
 
     await new Promise(resolve1 => {
-      let script = document.querySelector('#yuque-content-transform-script') as HTMLScriptElement;
+      let script = document.querySelector(
+        '#yuque-content-transform-script',
+      ) as HTMLScriptElement;
       if (script) {
         return resolve1(true);
       }
@@ -155,7 +184,9 @@ async function transformYuqueContent(element: Element) {
           ids.push(id);
         }
       } else if (element.querySelector('.ne-viewer-body')) {
-        const childIds = findYuqueChildId(element.querySelector('.ne-viewer-body'));
+        const childIds = findYuqueChildId(
+          element.querySelector('.ne-viewer-body'),
+        );
         ids = ids.concat(childIds);
       }
 
@@ -177,7 +208,11 @@ interface IOriginAndCloneDomItem {
   clone: Element;
 }
 
-function generateOriginAndCloneDomArray(cloneElement: Element, originElement: Element, name: keyof HTMLElementTagNameMap): Array<IOriginAndCloneDomItem> {
+function generateOriginAndCloneDomArray(
+  cloneElement: Element,
+  originElement: Element,
+  name: keyof HTMLElementTagNameMap,
+): Array<IOriginAndCloneDomItem> {
   const originDoms = originElement.querySelectorAll(name);
   const cloneDoms = cloneElement.querySelectorAll(name);
   const result: Array<IOriginAndCloneDomItem> = [];
@@ -202,7 +237,11 @@ function generateOriginAndCloneDomArray(cloneElement: Element, originElement: El
 }
 
 async function transformVideoToImage(element: Element, originDom: Element) {
-  const videoMapArray = generateOriginAndCloneDomArray(element, originDom, 'video');
+  const videoMapArray = generateOriginAndCloneDomArray(
+    element,
+    originDom,
+    'video',
+  );
 
   for (const videoMap of videoMapArray) {
     const rect = videoMap.origin.getBoundingClientRect();
@@ -224,7 +263,11 @@ async function transformVideoToImage(element: Element, originDom: Element) {
 }
 
 function transformCanvasToImage(element: Element, originDom: Element) {
-  const canvasMapArray = generateOriginAndCloneDomArray(element, originDom, 'canvas');
+  const canvasMapArray = generateOriginAndCloneDomArray(
+    element,
+    originDom,
+    'canvas',
+  );
 
   for (const canvasMap of canvasMapArray) {
     const imageElement = document.createElement('img');
@@ -255,12 +298,18 @@ export async function transformDOM(domArray: Element[]) {
     clonedDOMArray.push(div);
   }
 
-  for (let clonedDOMIndex = 0; clonedDOMIndex < clonedDOMArray.length; clonedDOMIndex++) {
+  for (
+    let clonedDOMIndex = 0;
+    clonedDOMIndex < clonedDOMArray.length;
+    clonedDOMIndex++
+  ) {
     let clonedDOM = clonedDOMArray[clonedDOMIndex];
 
     if (isYuqueContent(clonedDOM)) {
       try {
-        clonedDOMArray[clonedDOMIndex] = (await transformYuqueContent(clonedDOM)) as Element;
+        clonedDOMArray[clonedDOMIndex] = (await transformYuqueContent(
+          clonedDOM,
+        )) as Element;
         yuqueDOMIndex.push(clonedDOMIndex);
         continue;
       } catch (error) {

webpack.config.js

@@ -10,6 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const WebpackNotifierPlugin = require('webpack-notifier');
 const WebpackLogPlugin = require('./scripts/log-plugin');
+const isBeta = process.env.BETA === 'beta';
 
 const {
   presetEditor,
@@ -62,16 +63,20 @@ const plugins = [
         from: path.join(srcPath, 'manifest.json'),
         transform(content) {
           const origin = JSON.parse(content.toString());
-          const value = JSON.stringify(Object.assign({
+          const value = Object.assign({
             version: pkg.version,
             name: pkg.description,
-          }, origin), null, 2);
-          return Buffer.from(value);
+          }, origin);
+          if (isBeta) {
+            value.name = `${value.name} BETA`;
+            value.description = `${value.description} (THIS EXTENSION IS FOR BETA TESTING)`
+          }
+          return Buffer.from(JSON.stringify(value, null, 2));
         },
       },
       {
         from: path.join(srcPath, 'background/background-wrapper.js'),
-        to: path.join(distPath, pkg.version, 'background-wrapper.js'),
+        to: path.join(distPath, isBeta ? `${pkg.version}-beta` : pkg.version, 'background-wrapper.js'),
       },
     ],
   }),
@@ -202,7 +207,7 @@ const options = {
   stats: 'errors-only',
   entry,
   output: {
-    path: path.join(__dirname, 'dist', pkg.version),
+    path: path.join(__dirname, 'dist', isBeta ? `${pkg.version}-beta` : pkg.version),
     filename: '[name].js',
   },
   module: {
@@ -250,7 +255,6 @@ const options = {
   },
 };
 
-
 module.exports = async () => {
   await presetEditor();
   return options;