diff --git a/README.md b/README.md
index 69479a1..a42cf93 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@
 
 ### github 添加在线编辑按钮
 
-github 添加在线编辑按钮，方便快速使用 `1s` 查看代码，（为什么？因为 1s 比 通过 github 页面中快捷键"句号"调出的 github.dev 要快）。
+github 添加在线编辑按钮并且可以使用快捷键 ","直接进入。 方便快速使用 `1s` 查看代码，（为什么？因为 1s 比 通过 github 页面中快捷键"句号"调出的 github.dev 要快）。
 
 ![](https://assets.fedtop.com/picbed/202210280935904.png)
 
diff --git a/src/contents/event/index.ts b/src/contents/event/index.ts
new file mode 100644
index 0000000..731a5d4
--- /dev/null
+++ b/src/contents/event/index.ts
@@ -0,0 +1,11 @@
+function toGithub1s () {
+  if (!window) {
+    return;
+  }
+
+  window.open(`${`https://github1s.com${window.location.pathname}`}`);
+}
+
+export {
+  toGithub1s
+}
\ No newline at end of file
diff --git a/src/contents/github.tsx b/src/contents/github.tsx
deleted file mode 100644
index 0689955..0000000
--- a/src/contents/github.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { PlasmoContentScript } from 'plasmo'
-import { useEffect, useState } from 'react'
-
-export const config: PlasmoContentScript = {
-  matches: ['https://github.com/*/*'],
-}
-
-// 判断当前页是否为 github code page
-function watchPage() {
-  // 获取当前页面的 url
-  const url = window.location.href
-  return (
-    document.querySelectorAll('.file-navigation').length > 0 ||
-    url.includes('/blob/') ||
-    url.includes('/tree/')
-  )
-}
-// 打开 github1s
-function github1s() {
-  window.open(`${`https://github1s.com${window.location.pathname}`}`)
-}
-
-// 监听tab页面加载状态，添加处理事件
-// chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-//   // 设置判断条件，页面加载完成才添加事件，否则会导致事件重复添加触发多次
-//   if (changeInfo.status === 'complete') {
-//     console.log('🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀 / onUpdated', changeInfo)
-//   }
-// })
-
-export default function FunctionPage() {
-  const [isCodePage, setIsCodePage] = useState(false)
-
-  useEffect(() => {
-    setIsCodePage(watchPage())
-  }, [])
-  return (
-    <>
-      {isCodePage && (
-        <button
-          onClick={github1s}
-          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',
-          }}
-        >
-          在线编辑
-        </button>
-      )}
-    </>
-  )
-}
-
-// window.addEventListener('load', () => {
-//   document.body.style.background = 'pink'
-// })
diff --git a/src/contents/hooks/useGitHub.ts b/src/contents/hooks/useGitHub.ts
new file mode 100644
index 0000000..421685f
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/src/contents/register/keydownListen.ts b/src/contents/register/keydownListen.ts
new file mode 100644
index 0000000..61bd0b4
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/contents/views/Github/components/OnlineEditBtn/index.tsx b/src/contents/views/Github/components/OnlineEditBtn/index.tsx
new file mode 100644
index 0000000..0af3917
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/contents/views/Github/index.tsx b/src/contents/views/Github/index.tsx
new file mode 100644
index 0000000..ab4cc86
--- /dev/null
+++ b/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='在线编辑' />}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/enum/commandEnum.ts b/src/enum/commandEnum.ts
new file mode 100644
index 0000000..54ece97
--- /dev/null
+++ b/src/enum/commandEnum.ts
@@ -0,0 +1,5 @@
+// 
+export enum keyCodeEnums {
+  /** 逗号的 code  */
+  comma = "Comma"
+}
\ No newline at end of file