Merge pull request #2 from PlayGuitar-CoderQ/feature/keyboard-shortcuts

Feature/keyboard shortcuts

README.md

@@ -30,7 +30,7 @@
 
 ### github 添加在线编辑按钮
 
-github 添加在线编辑按钮，方便快速使用 `1s` 查看代码，（为什么？因为 1s 比 通过 github 页面中快捷键"句号"调出的 github.dev 要快）。
+github 添加在线编辑按钮并且可以使用快捷键 ","直接进入。 方便快速使用 `1s` 查看代码，（为什么？因为 1s 比 通过 github 页面中快捷键"句号"调出的 github.dev 要快）。
 
 ![](https://assets.fedtop.com/picbed/202210280935904.png)
 

src/contents/event/index.ts

@@ -0,0 +1,11 @@
+function toGithub1s () {
+  if (!window) {
+    return;
+  }
+
+  window.open(`${`https://github1s.com${window.location.pathname}`}`);
+}
+
+export {
+  toGithub1s
+}

src/contents/hooks/useGitHub.ts

@@ -0,0 +1,26 @@
+import { useEffect, useMemo } from 'react';
+import registerKeyDownListen from '../register/keydownListen';
+
+const useGitHub = () => {
+
+  useEffect(() => {
+    registerKeyDownListen();
+  }, [])
+
+  const isCodePage = useMemo<boolean>(() => {
+    const url = window.location.href;
+    const fileNavigation = document.querySelectorAll('.file-navigation');
+    const isHasBlob = url.includes('/blob/');
+    const isHasTree = url.includes('/tree/');
+
+    return  fileNavigation.length > 0 || isHasBlob || isHasTree;
+  }, [])
+
+  return {
+    isCodePage,
+  }
+}
+
+export {
+  useGitHub
+}

src/contents/register/keydownListen.ts

@@ -0,0 +1,14 @@
+import { keyCodeEnums } from '../../enum/commandEnum';
+import { toGithub1s } from '../event';
+
+const keyCodeEventMap: Record<string, Function> = {
+  [keyCodeEnums.comma]: toGithub1s
+}
+
+const keyDownListen = () => {
+  window.addEventListener("keydown", function (e) {
+      keyCodeEventMap[e.code]();
+  })
+}
+
+export default keyDownListen;

src/contents/views/Github/components/OnlineEditBtn/index.tsx

@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+
+interface OnlineEditBtnProps {
+  onClick?: () => void;
+  title: string;
+}
+
+const OnlineEditBtn: FC<OnlineEditBtnProps> = props => {
+  const { onClick, title } = props;
+
+  return (
+    <button
+    onClick={onClick}
+    style={{
+      color: 'white',
+      colorScheme: 'dark',
+      fontWeight: 'bold',
+      padding: '5px 10px',
+      lineHeight: '20px',
+      cursor: 'pointer',
+      fontSize: '14px',
+      background: 'rgb(52, 125, 57)',
+      position: 'fixed',
+      right: '100px',
+      bottom: '100px',
+      border: '1px solid rgba(205, 217, 229, 0.1)',
+      borderRadius: '6px',
+    }}
+  >
+    {title}
+  </button>
+  )
+}
+
+export default OnlineEditBtn;

src/contents/views/Github/index.tsx

@@ -0,0 +1,21 @@
+import type { PlasmoContentScript } from 'plasmo'
+
+import { useGitHub } from '../../hooks/useGitHub';
+
+import OnlineEditBtn from './components/OnlineEditBtn';
+
+export const config: PlasmoContentScript = {
+  matches: ['https://github.com/*/*'],
+}
+
+
+export default function FunctionPage() {
+  const { isCodePage } = useGitHub();
+
+
+  return (
+    <>
+      {isCodePage && <OnlineEditBtn title='在线编辑' />}
+    </>
+  )
+}

src/enum/commandEnum.ts

@@ -0,0 +1,5 @@
+// 
+export enum keyCodeEnums {
+  /** 逗号的 code  */
+  comma = "Comma"
+}