feat: 检查更新

Author: lucifer

leetcode-cheat-0.5.1.zip

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "leetcode cheatsheet",
   "description": "刷题小助手，made by 力扣加加",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "browser_action": {
     "default_popup": "index.html",
     "default_title": "力扣加加"

leetcode-cheat.zip

@@ -5,7 +5,7 @@
   width: 800px;
 }
 .row {
-  margin: 0 0 10px 0;
+  margin: 0;
 }
 .link {
   display: block;
@@ -34,3 +34,6 @@
   width: 30px;
   height: 30px;
 }
+.guide-wrapper {
+  display: flex;
+}

public/manifest.json

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button, Table, Empty, Tabs } from "antd";
+import { Button, Table, Empty, Tabs, Image } from "antd";
 
 import "highlight.js/styles/github.css";
 
@@ -13,6 +13,7 @@ import ProblemDetail from "./Detail";
 import Roadmap from "./roadmap/roadmap.jsx";
 import TagOrLink from "./TagOrLink";
 import tempaltes from "./codeTemplates/index";
+import checkUpdate from "./checkUpdates";
 
 // import { bfs } from "./utils";
 // import drawTree from "canvas-binary-tree";
@@ -87,12 +88,12 @@ function App() {
       setInLeetCode(inLeetCodeWebsite(currentUrl));
     });
 
-  // setTimeout(() => {
-  //   setProblemId("uncrossed-lines");
-  //   // setProblemId("two-sum");
-  //   setInSelected(!!selected[problemId]);
-  //   setHasSolution(!!problems[problemId]);
-  // }, 1000);
+  setTimeout(() => {
+    // setProblemId("uncrossed-lines");
+    setProblemId("two-sum");
+    // setInSelected(!!selected[problemId]);
+    setHasSolution(!!problems[problemId]);
+  }, 1000);
 
   const [problemId, setProblemId] = useState("");
 
@@ -129,7 +130,7 @@ function App() {
         <canvas width="1000" height="1000" id="canvas"></canvas>
       </div>
 
-      <div>
+      <div className="guide-wrapper">
         <div className="guide">
           {page !== "" ? (
             <Button type="link" onClick={() => setPage("")}>
@@ -172,7 +173,6 @@ function App() {
               </Button>
             ))}
         </div>
-
         {page === "detail" && <ProblemDetail problemId={problemId} />}
       </div>
 
@@ -190,14 +190,39 @@ function App() {
         </Empty>
       </div>
 
-      <Tabs type="card">
-        <TabPane key="roadmap" tab="学习路线">
-          <Roadmap />
-        </TabPane>
-        <TabPane key="app" tab="代码模板">
-          <CodeTemplates page={page} tempaltes={tempaltes}></CodeTemplates>
-        </TabPane>
-      </Tabs>
+      {page === "" && (
+        <Tabs type="card">
+          <TabPane key="roadmap" tab="学习路线">
+            <Roadmap />
+          </TabPane>
+          <TabPane key="app" tab="代码模板">
+            <CodeTemplates page={page} tempaltes={tempaltes}></CodeTemplates>
+          </TabPane>
+          <TabPane key="checkUpdate" tab="检查更新">
+            <div>
+              一般只要你开启了自动更新，那么当插件更新之后
+              chrome会在五个小时以内自动更新。
+              如果你想第一时间更新，或者您禁用了自动更新，都可以在这里检测最新版。
+            </div>
+            <Button
+              style={{ margin: "20px 0 0 20px" }}
+              type="primary"
+              onClick={checkUpdate}
+            >
+              检查更新
+            </Button>
+          </TabPane>
+          <TabPane key="about" tab="关于我">
+            <div>
+              作者是一个 Github 40K star 的前端架构师，leetcode 刷题插件
+              leetcode-cheatsheet
+              作者，掌握各种算法套路，写了十几万字的算法刷题套路电子书，公众号回复
+              <b>电子书</b>获取。
+              <Image src="https://tva1.sinaimg.cn/large/007S8ZIlly1gfcuzagjalj30p00dwabs.jpg"></Image>
+            </div>
+          </TabPane>
+        </Tabs>
+      )}
     </div>
   );
 }

src/App.css

@@ -0,0 +1,30 @@
+import { message } from "antd";
+// eslint-disable-next-line
+chrome.runtime.onUpdateAvailable &&
+  // eslint-disable-next-line
+  chrome.runtime.onUpdateAvailable.addListener(function (details) {
+    console.log("updating to version " + details.version);
+    // eslint-disable-next-line
+    chrome.runtime.reload();
+  });
+
+export default function checkUpdate() {
+  // eslint-disable-next-line
+  if (!chrome.runtime.requestUpdateCheck) return;
+  // eslint-disable-next-line
+  return chrome.runtime.requestUpdateCheck(function (status) {
+    if (status == "update_available") {
+      message.success({
+        content: `检测到有新版本，您可以去 <a href="chrome://extensions/">扩展中心</a> 手动更新`,
+      });
+    } else if (status == "no_update") {
+      message.success({
+        content: `已经是最新版本了~`,
+      });
+    } else if (status == "throttled") {
+      message.success({
+        content: `操作太频繁，请稍后再试~`,
+      });
+    }
+  });
+}

src/App.js

@@ -14,7 +14,6 @@ const { Panel } = Collapse;
 export default function CodeTemplate({ page, tempaltes }) {
   return (
     <div style={page === "" ? {} : { display: "none" }}>
-      <h2 style={{ display: "flex", justifyContent: "center" }}>代码模板</h2>
       <Tabs>
         {tempaltes.map((tempalte) => (
           <TabPane

src/checkUpdates.js

@@ -17,7 +17,7 @@ export default function Codes({ codes, renderHeader }) {
         <Panel
           key={c.text}
           header={
-            <div className="row" style={{ marginTop: "10px" }}>
+            <div className="row">
               <span className="language language-js">{c.language}</span>
               <Button
                 type="primary"

src/codeTemplates/codeTemplate.jsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import "./index.css";
 // import App from "./visualDebug/index";
 import App from "./App";
+import "./checkUpdates";
 
 import * as serviceWorker from "./serviceWorker";