feat: implement checking for updates (#82)

* introduce update background task

* change icon's name

* inline loadSettings in settings.ts

* introduce mocked check for updates

src/components/OptionsPage/index.tsx

@@ -4,7 +4,7 @@ import {
 } from 'office-ui-fabric-react';
 import { initializeIcons } from '@uifabric/icons';
 import { getMessageI18n, chromeGet, chromeSet, isNull } from '../../utils/utils'
-import Settings from "../../utils/settings"
+import Settings,{ loadSettings } from "../../utils/settings"
 import './index.css';
 
 initializeIcons();
@@ -13,21 +13,25 @@ const OptionsPage: React.FC = () => {
 
   const [settings, setSettings] = useState(new Settings());
   const [inited, setInited] = useState(false);
+  const [version, setVersion] = useState("0.0.0");
 
   useEffect(() => {
     const initSettings = async () => {
-      let obj = await chromeGet("settings");
-      if (isNull(obj)) {
-        obj = {};
-      }
-      settings.loadFromJson(obj);
-      setSettings(settings);
+      const temp=await loadSettings();
+      setSettings(temp);
       setInited(true);
     }
     initSettings();
   }, [settings]);
 
-  const saveSettings = async () => {
+  useEffect(() => {
+    // @ts-ignore
+    const details=chrome.app.getDetails();
+    setVersion(details["version"]);
+
+  }, [version]);
+
+  const saveSettings = async (settings:Settings) => {
     setSettings(settings);
     const obj = settings.toJson();
     await chromeSet("settings", obj);
@@ -41,7 +45,7 @@ const OptionsPage: React.FC = () => {
     <Stack>
       <Stack horizontalAlign="center">
         <h1>HYPERTRONS</h1>
-        <sub>version 0.1.2</sub>
+        <sub>{`version ${version}`}</sub>
       </Stack>
       <Stack horizontalAlign="center">
         <div className="container">
@@ -58,49 +62,34 @@ const OptionsPage: React.FC = () => {
                   childrenGap: 10
                 }}
               >
+                <Toggle
+                  label={getMessageI18n('options_toggle_checkForUpdates')}
+                  defaultChecked={settings.checkForUpdates}
+                  onText={getMessageI18n('options_toggle_checkForUpdates_onText')}
+                  offText={getMessageI18n('options_toggle_checkForUpdates_offText')}
+                  onChange={async (e, checked) => {
+                    settings.checkForUpdates = checked;
+                    await saveSettings(settings);
+                  }}
+                />
                 <Checkbox
                   label={getMessageI18n("component_developerCollabrationNetwork_title")}
                   defaultChecked={settings.developerNetwork}
                   onChange={async (e, checked) => {
                     settings.developerNetwork = checked;
-                    await saveSettings();
+                    await saveSettings(settings);
                   }}
                 />
                 <Checkbox
                   label={getMessageI18n("component_projectCorrelationNetwork_title")}
                   defaultChecked={settings.projectNetwork}
                   onChange={async (e, checked) => {
                     settings.projectNetwork = checked;
-                    await saveSettings();
-                  }}
-                />
-                <Stack
-                  horizontalAlign="start"
-                  verticalAlign='center'
-                  horizontal
-                  tokens={{
-                    childrenGap: 10
-                  }}
-                >
-                  <DefaultButton
-                    style={{ width: 100 }}
-                    onClick={() => {
-                    }}
-                  >
-                    {getMessageI18n("global_btn_ok")}
-                  </DefaultButton>
-                </Stack>
-                <Toggle
-                  label={getMessageI18n('options_toggle_checkForUpdates')}
-                  defaultChecked={settings.checkForUpdates}
-                  onText={getMessageI18n('options_toggle_checkForUpdates_onText')}
-                  offText={getMessageI18n('options_toggle_checkForUpdates_offText')}
-                  onChange={async (e, checked) => {
-                    settings.checkForUpdates = checked;
-                    await saveSettings();
+                    await saveSettings(settings);
                   }}
                 />
 
+
               </Stack>
             </PivotItem>
             <PivotItem headerText={getMessageI18n("options_header_commandLine")} itemIcon="CommandPrompt">

src/components/PopupPage/index.tsx

@@ -4,8 +4,7 @@ import {
 } from 'office-ui-fabric-react';
 import { initializeIcons } from '@uifabric/icons';
 import './index.css';
-import Settings from '../../utils/settings';
-import { chromeGet,isNull} from '../../utils/utils';
+import Settings,{ loadSettings } from '../../utils/settings';
 
 initializeIcons();
 
@@ -16,12 +15,8 @@ const PopupPage: React.FC = () => {
 
   useEffect(() => {
     const initSettings=async ()=> {
-      let obj=await chromeGet("settings");
-      if(isNull(obj)){
-        obj={};
-      }
-      settings.loadFromJson(obj);
-      setSettings(settings);
+      const temp=await loadSettings();
+      setSettings(temp);
       setInited(true);
     }
     initSettings();

src/manifest.json

@@ -3,15 +3,15 @@
   "default_locale": "zh_CN",
   "options_page": "options.html",
   "icons": {
-    "128": "128.png"
+    "128": "main.png"
   },
   "background": {
     "scripts": ["background.bundle.js"],
     "persistent": true
   },
   "browser_action": {
     "default_popup": "popup.html",
-    "default_icon": "128.png"
+    "default_icon": "main.png"
   },
   "content_scripts": [{
     "matches": ["*://github.com/*"],
@@ -20,7 +20,7 @@
   }],
   "web_accessible_resources": [
     "content.styles.css",
-    "128.png"
+    "main.png"
   ],
   "permissions": [
     "*://github.com/*",

src/mock/background.data.ts

@@ -0,0 +1,17 @@
+export const updateInformation = {
+  "chrome": {
+    "latest_version":"0.1.2",
+    "date":"2021-4-1",
+    "url":"https://github.com/hypertrons/hypertrons-crx/releases"
+  },
+  "edge": {
+    "latest_version":"0.1.2",
+    "date":"2021-3-1",
+    "url":"https://github.com/hypertrons/hypertrons-crx/releases"
+  },
+  "develop": {
+    "latest_version":"0.1.2",
+    "date":"2021-3-27",
+    "url":"https://github.com/hypertrons/hypertrons-crx/releases"
+  }
+}

src/pages/Background/index.ts

@@ -1,12 +1,43 @@
+import { compareVersion, getBrowserType} from '../../utils/utils';
+import { getUpdateInfor } from "../../services/background"
+import { loadSettings } from '../../utils/settings';
+
 export enum BackgroundTasks {
   update = 'check_for_updates'
 }
 
-chrome.alarms.create(BackgroundTasks.update,{periodInMinutes:10});
+chrome.alarms.create(BackgroundTasks.update,{periodInMinutes:0.1});
 
-chrome.alarms.onAlarm.addListener((alarm) => {
+chrome.alarms.onAlarm.addListener(async (alarm) => {
   const name=alarm.name;
-  if(name===BackgroundTasks.update){
-    console.log("check for updates");
+
+  const settings=await loadSettings();
+
+  if(name===BackgroundTasks.update ){
+    if(settings.checkForUpdates){
+      // @ts-ignore :we must ignore here
+      const details=chrome.app.getDetails();
+      const currentVersion=details["version"];
+      const browserType=getBrowserType();
+      const updateInformation=await getUpdateInfor();
+      let latestVersion;
+
+      if("key" in details){
+        // the store-version installation
+        if(browserType==="Edge"){
+          latestVersion=updateInformation["edge"]["latest_version"];
+        }
+        else{
+          latestVersion=updateInformation["chrome"]["latest_version"];
+        }
+      }
+      else{
+        latestVersion=updateInformation["develop"]["latest_version"];
+      }
+
+      if(compareVersion(currentVersion,latestVersion)===-1){
+        console.log(`new ${browserType} update available, version:${latestVersion}`);
+      }
+    }
   }
 });

src/services/background.ts

@@ -0,0 +1,8 @@
+import { updateInformation } from '../mock/background.data';
+const url_update="";
+
+export const getUpdateInfor = async () => {
+  // const response = await fetch(url_update);
+  // return await response.json();
+  return updateInformation;
+}

src/utils/settings.ts

@@ -1,3 +1,5 @@
+import { chromeGet, isNull } from './utils';
+
 class Settings {
   checkForUpdates: boolean | undefined;
   developerNetwork: boolean | undefined;
@@ -31,4 +33,14 @@ class Settings {
   }
 }
 
+export const loadSettings=async ()=>{
+  const settings=new Settings()
+  let obj = await chromeGet("settings");
+  if (isNull(obj)) {
+    obj = {};
+  }
+  settings.loadFromJson(obj);
+  return settings
+}
+
 export default Settings;

src/utils/utils.ts

@@ -111,3 +111,61 @@ export const minMaxRange = (data: any, key: string, MIN: number, MAX: number) =>
   }
   return data;
 }
+
+export const compareVersion=(version_1:string,version_2:string)=>{
+  const v1 = version_1.split('.');
+  const v2 = version_2.split('.');
+  const len = Math.max(v1.length, v2.length);
+
+  while (v1.length < len) {
+    v1.push('0');
+  }
+  while (v2.length < len) {
+    v2.push('0');
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num_1 = parseInt(v1[i]);
+    const num_2 = parseInt(v2[i]);
+
+    if (num_1 > num_2) {
+      return 1;
+    }
+    else if (num_1 < num_2) {
+      return -1;
+    }
+  }
+
+  return 0;
+}
+
+export const getBrowserType=()=> {
+  var userAgent = navigator.userAgent;
+  var isOpera = userAgent.indexOf("Opera") > -1;
+  var isEdge = userAgent.indexOf("Edge") > -1;
+  var isFF = userAgent.indexOf("Firefox") > -1;
+  var isSafari = userAgent.indexOf("Safari") > -1
+    && userAgent.indexOf("Chrome") === -1;
+  var isChrome = userAgent.indexOf("Chrome") > -1
+    && userAgent.indexOf("Safari") > -1;
+
+  if (isOpera) {
+    return "Opera";
+  }
+  else if (isEdge) {
+    return "Edge";
+  }
+  else if (isFF) {
+    return "FireFox";
+  }
+  else if (isSafari) {
+    return "Safari";
+  }
+  else if (isChrome) {
+    return "Chrome";
+  }
+  else{
+    return "Unknown";
+  }
+
+}