chore: daily development

canyon-project · Dec 24, 2024 · b57321e · b57321e
1 parent 3010a5d
commit b57321e
Show file tree

Hide file tree

Showing 30 changed files with 1,129 additions and 0 deletions.
diff --git a/tools/canyon-extension/.eslintignore b/tools/canyon-extension/.eslintignore
@@ -0,0 +1,5 @@
+node_modules
+server.js
+index.html
+Dockerfile
+dist
diff --git a/tools/canyon-extension/.eslintrc b/tools/canyon-extension/.eslintrc
@@ -0,0 +1,76 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/typescript",
+    "plugin:react/jsx-runtime",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2021,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "import",
+    "simple-import-sort",
+    "jsx-a11y",
+    "react-hooks",
+    "prettier",
+    "@emotion"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "linebreak-style": "off",
+    "comma-dangle": [0, "always-multiline"],
+    "quotes": [0, "double"],
+    "semi": [0, "always"],
+    "space-before-function-paren": [0, "never"],
+    "multiline-ternary": "off",
+    "camelcase": "off",
+    "prettier/prettier": [
+      "warn",
+      {
+        "endOfLine": "auto",
+        "singleQuote": true
+      }
+    ],
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "react/react-in-jsx-scope": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
+    "jsx-a11y/no-autofocus": "off"
+  },
+  "ignorePatterns": ["**/*.css","**/*.md"]
+}
diff --git a/tools/canyon-extension/.gitignore b/tools/canyon-extension/.gitignore
@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+canyon-extension.zip
+
+pnpm-lock.yaml
+bun.lockb
diff --git a/tools/canyon-extension/.prettierrc b/tools/canyon-extension/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "jsxSingleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "bracketSameLine": false,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "auto",
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/tools/canyon-extension/README.md b/tools/canyon-extension/README.md
@@ -0,0 +1,5 @@
+# Canyon Extension
+
+## Usage
+
+To see how to use this uploader, please visit our [documentation](https://docs.canyonjs.org/zh/documentation/ecosystem/canyon-extension).
diff --git a/tools/canyon-extension/index.html b/tools/canyon-extension/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/tools/canyon-extension/package.json b/tools/canyon-extension/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "canyon-extension",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "buildzip": "node zip.js"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.2.6",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "adm-zip": "^0.5.10",
+    "ahooks": "^3.7.8",
+    "antd": "^5.12.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@emotion/eslint-plugin": "^11.11.0",
+    "@types/chrome": "^0.0.256",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.18.0",
+    "@typescript-eslint/parser": "^6.18.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "prettier": "^3.1.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
+  }
+}
diff --git a/tools/canyon-extension/public/background.js b/tools/canyon-extension/public/background.js
diff --git a/tools/canyon-extension/public/content-scripts.js b/tools/canyon-extension/public/content-scripts.js
@@ -0,0 +1,51 @@
+const e = function () {
+  const t = document.createElement('script');
+  (t.type = 'text/javascript'),
+    (t.className = 'content_scripts'),
+    // eslint-disable-next-line no-undef
+    (t.src = chrome.runtime.getURL('interceptor.js')),
+    (document.head || document.documentElement).appendChild(t);
+};
+e();
+
+let casualCoverageAndCanyonData = null;
+
+window.addEventListener('message', function (e) {
+  if (e.data.type === '__canyon__event_get_coverage_and_canyon_data_response') {
+    casualCoverageAndCanyonData = e.data.payload;
+  }
+});
+
+function getCoverageAndCanyonData(reportID, intervalTime, reporter) {
+  window.postMessage(
+    {
+      type: '__canyon__event_get_coverage_and_canyon_data_request',
+      payload: {
+        reportID,
+        intervalTime,
+        reporter,
+      },
+    },
+    '*',
+  );
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(casualCoverageAndCanyonData);
+    }, 360);
+  });
+}
+
+// eslint-disable-next-line no-undef
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (request.type === '__canyon__') {
+    getCoverageAndCanyonData(
+      request?.payload?.reportID,
+      request?.payload?.intervalTime,
+      request?.payload?.reporter,
+    ).then((res) => {
+      casualCoverageAndCanyonData = null;
+      sendResponse(res);
+    });
+    return true;
+  }
+});
diff --git a/tools/canyon-extension/public/interceptor.js b/tools/canyon-extension/public/interceptor.js
@@ -0,0 +1,61 @@
+// const __canyon__ = ((window.__canyon__||(Object.keys(window.__coverage__||{}).length>0 ? Object.values(window.__coverage__)[0] : undefined))||(Object.keys(window.__coverage__||{}).length>0 ? Object.values(window.__coverage__)[0] : undefined));
+window.addEventListener('message', function (e) {
+  if (e.data.type === '__canyon__event_get_coverage_and_canyon_data_request') {
+    // 新增逻辑，获取覆盖率数据的时候还可以set reportID，key定为__canyon__report__id__
+    if (e.data.payload?.reportID !== undefined) {
+      localStorage.setItem('__canyon__report__id__', e.data.payload.reportID);
+    }
+    if (e.data.payload?.intervalTime !== undefined) {
+      localStorage.setItem('__canyon__interval__time__', e.data.payload.intervalTime);
+    }
+    if (e.data.payload?.reporter !== undefined) {
+      localStorage.setItem('__canyon__reporter__', e.data.payload.reporter);
+    }
+    window.postMessage(
+      {
+        type: '__canyon__event_get_coverage_and_canyon_data_response',
+        payload: {
+          canyon: {
+            ...(window.__canyon__||(Object.keys(window.__coverage__||{}).length>0 ? Object.values(window.__coverage__)[0] : undefined)),
+            reportID: localStorage.getItem('__canyon__report__id__') || undefined,
+            intervalTime: localStorage.getItem('__canyon__interval__time__') || (window.__canyon__||(Object.keys(window.__coverage__||{}).length>0 ? Object.values(window.__coverage__)[0] : undefined))?.intervalTime,
+            reporter: localStorage.getItem('__canyon__reporter__') || (window.__canyon__||(Object.keys(window.__coverage__||{}).length>0 ? Object.values(window.__coverage__)[0] : undefined))?.reporter,
+          },
+          coverage: window.__coverage__,
+        },
+      },
+      '*',
+    );
+  }
+});
+
+// 1s后再去获取尝试间隔上报
+setTimeout(()=>{
+  // 先尝试本地获取，如果没有再去获取window上的数据
+  const __canyon__interval__time__ = Number(localStorage.getItem('__canyon__interval__time__')) || Number(window?.__canyon__?.intervalTime);
+  if (!isNaN(__canyon__interval__time__)) {
+    const num = __canyon__interval__time__;
+    if (num > 0) {
+      setInterval(() => {
+        if ((window.__canyon__||(Object.keys(window.__coverage__||{}).length>0 ? Object.values(window.__coverage__)[0] : undefined)) && window.__coverage__) {
+          fetch((window.__canyon__||(Object.keys(window.__coverage__||{}).length>0 ? Object.values(window.__coverage__)[0] : undefined)).dsn, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${(window.__canyon__||(Object.keys(window.__coverage__||{}).length>0 ? Object.values(window.__coverage__)[0] : undefined)).reporter}`,
+            },
+            body: JSON.stringify({
+              coverage: window.__coverage__,
+              ...(window.__canyon__||(Object.keys(window.__coverage__||{}).length>0 ? Object.values(window.__coverage__)[0] : undefined)),
+              reportID: localStorage.getItem('__canyon__report__id__') || undefined,
+            }),
+          }).then(() => {
+            console.log('report coverage success');
+          });
+        } else {
+          console.log('coverage or canyon data is not ready');
+        }
+      }, num * 1000);
+    }
+  }
+},1000)
diff --git a/tools/canyon-extension/public/logo-128.png b/tools/canyon-extension/public/logo-128.png
diff --git a/tools/canyon-extension/public/manifest.json b/tools/canyon-extension/public/manifest.json
@@ -0,0 +1,38 @@
+{
+  "name": "Canyon Extension",
+  "version": "2.0.0",
+  "manifest_version": 3,
+  "description": "Canyon manual report plugin",
+  "icons": {
+    "128": "logo-128.png"
+  },
+  "host_permissions": [
+    "http://*/*",
+    "https://*/*"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "web_accessible_resources": [{
+    "resources": ["interceptor.js"],
+    "matches": ["<all_urls>"]
+  }],
+  "content_scripts": [
+    {
+      "matches": [
+        "http://*/*",
+        "https://*/*"
+      ],
+      "js": [
+        "content-scripts.js"
+      ],
+      "run_at": "document_start"
+    }
+  ],
+  "action": {
+    "default_popup": "index.html",
+    "default_icon": {
+      "128": "/logo-128.png"
+    }
+  }
+}
diff --git a/tools/canyon-extension/src/App.tsx b/tools/canyon-extension/src/App.tsx
@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+import { ConfigProvider } from 'antd';
+
+import AppFooter from './components/app/footer.tsx';
+import AppHeader from './components/app/header.tsx';
+import AppMain from './components/app/main.tsx';
+
+function App() {
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: '#3264ff',
+        },
+      }}
+    >
+      <div
+        css={css`
+          width: 500px;
+        `}
+      >
+        <AppHeader />
+        <AppMain></AppMain>
+        <AppFooter />
+      </div>
+    </ConfigProvider>
+  );
+}
+
+export default App;
diff --git a/tools/canyon-extension/src/assets/light-logo.svg b/tools/canyon-extension/src/assets/light-logo.svg
diff --git a/tools/canyon-extension/src/assets/react.svg b/tools/canyon-extension/src/assets/react.svg