Merge pull request #1 from frank-zsy/master

feat: add first edtion

.gitignore

@@ -0,0 +1 @@
+.vscode

README.md

@@ -1,2 +1,29 @@
-# hypertrons-crx
-Hypertrons chrome extension
+# Hypertrons Chrome Extension
+
+This project is Hypertrons Chrome extension which help users to improve their user experience of Hypertrons.
+
+## Functions
+
+The main purpose of this project is to enhance Chrome to show dashboard and commandline on web pages of certain hosting service like GitHub, GitLab and Gitee. And this extension is used to 
+
+### Welcome information
+
+In the first `div` of the `hypertrons-mini-dashboard`, you can setup your own welcome information to developers visit your front page. The default information is `Hello, ${user-login}, welcome to ${repo-name}. You are ${role} of this repo.`.
+
+### Dashboard
+
+There are two kinds of default dashboard components supported, `line chart` and `table`.
+
+#### Line chart
+
+We use simple `echarts` library to support chart functions. So you can refer to `echarts` documentation to checkout how to use it to customize your own charts.
+
+You can set simple data to `line chart` to get a default dashboard component.
+
+#### Table
+
+You can set simple data to `table` component to get a default dashboard component.
+
+### Commandline
+
+After user setup his platform token, the `commandline` will turn on. User can use commandline to send valid command to Hypertrons backend to interact with other platforms or automation process.

common/background/util.js

@@ -0,0 +1,39 @@
+function sendNotification(options) {
+  const { type, iconUrl, title, message } = options;
+  chrome.notifications.create(null, {
+    type,
+    iconUrl,
+    title,
+    message,
+  }, nid => {
+    chrome.notifications.onClicked.addListener((id) => {
+      if (id === nid) {
+        window.open(options.url);
+      }
+    });
+  });
+}
+
+function sendDefaultNotification(options) {
+  const o = Object.assign({
+    type: 'basic',
+    iconUrl: 'logo.png',
+  }, options);
+  sendNotification(o);
+}
+
+function onMessage(msg, func) {
+  chrome.runtime.onMessage.addListener(request => {
+    if (request.type === msg) {
+      func(request);
+    }
+  });
+}
+
+onMessage('sendNotification', p => {
+  sendDefaultNotification({
+    title: `Hypertrons new Release ${p.num}!`,
+    message: `Hypertrons new Release ${p.num} has come, click to check more.`,
+    url: 'https://www.github.com/hypertrons/hypertrons',
+  });
+});

common/content-script/hypertrons-dashboard.js

@@ -0,0 +1,75 @@
+class SimpleTable {
+}
+
+class SimpleGraph {
+}
+
+class HypertronsDashboard {
+  options;
+  defaultWelcome = (userName, repoName, role) => {
+    let msg = 'Hello, ';
+    if (userName) {
+      msg += `${userName}, `;
+    }
+    if (repoName) {
+      msg += `welcome to ${repoName}. `;
+    } else {
+      msg += 'welcome. '
+    }
+    if (role) {
+      msg += `You are ${role} of this repo.`
+    }
+    return msg;
+  };
+  dashboardIdAndClass = 'hypertrons-mini-dashboard';
+  welcomeIdAndClass = 'hypertrons-welcome-div';
+
+  constructor(options) {
+    this.options = options;
+    this.init();
+    this.insertItems();
+  }
+
+  init() {
+    if (!this.options.getInsertElement) {
+      return;
+    }
+    const ele = this.options.getInsertElement();
+    if (elementExists(ele)) {
+      const insertItem = `<div id="${this.dashboardIdAndClass}" class="${this.dashboardIdAndClass}"></div>`;
+      switch (this.options.insertType) {
+        case 'before':
+          ele.before(insertItem);
+          break;
+        case 'after':
+          ele.after(insertItem);
+          break;
+      }
+    }
+  }
+
+  insertItems() {
+    this.insertWelcome();
+  }
+
+  getRoot() {
+    const root = $(`#${this.dashboardIdAndClass}`);
+    if (elementExists(root)) {
+      return root;
+    }
+    return null;
+  }
+
+  insertWelcome() {
+    if (this.options.welcome === false) return;
+    const { userName, repoName, role } = this.options;
+    let msg = this.defaultWelcome(userName, repoName, role);
+    if (this.options.getWelcome) {
+      msg = this.options.getWelcome(userName, repoName, role);
+    }
+    const root = this.getRoot();
+    if (root) {
+      root.prepend(`<div id="${this.welcomeIdAndClass}" class="${this.welcomeIdAndClass}">${msg}</div>`);
+    }
+  }
+}

common/content-script/util.js

@@ -0,0 +1,11 @@
+function elementExists(obj) {
+  return Number.isInteger(obj.length) && obj.length > 0;
+}
+
+function getMetaContent(index) {
+  var ele = document.getElementsByTagName('meta')[index];
+  if (ele && ele.content) {
+    return ele.content;
+  }
+  return null;
+}

common/css/style.css

@@ -0,0 +1,43 @@
+.hypertrons-mini-dashboard {
+  height: auto;
+  width: 100%;
+  display: block;
+  border: 1px solid #dfe2e5;
+  border-radius: 3px;
+  margin-bottom: 10px;
+}
+
+.hypertrons-welcome-div {
+  height: auto;
+  width: 100%;
+  align-self: start;
+  padding-left: 10px;
+  padding-top: 10px;
+  margin-bottom: 10px;
+}
+
+.hypertron-graph {
+  height: 150px;
+  width: 50% !important;
+  padding: 10px;
+  display: inline-block;
+}
+
+.hypertrons-table {
+  border: 1px solid #dfe2e5;
+  border-radius: 3px;
+  height: 150px;
+  width: 50% !important;
+  padding: 10px;
+  display: inline-block;
+}
+
+.hypertrons-cli-input-label {
+  width: 5% !important;
+  padding-left: 10px;
+}
+
+.hypertrons-cli-input {
+  width: 80% !important;
+  margin-left: 30px;
+}

github/content-script/github-script.js

@@ -0,0 +1,11 @@
+new HypertronsDashboard({
+  getInsertElement: () => $('.file-navigation.in-mid-page.mb-2.d-flex.flex-items-start'),
+  insertType: 'before',
+  welcome: true,
+  userName: getMetaContent('user-login'),
+  repoName: getMetaContent('octolytics-dimension-repository_nwo'),
+  role: 'role',
+  getWelcome: (userName, repoName, role) => `Welcome to ${repoName}, ${userName}, ${role} of this repo.`,
+  tokenKey: 'github-personal-token',
+  turnOnCmd: true,
+});

manifest.json

@@ -0,0 +1,39 @@
+{
+  "name": "Hypertrons Mini Dashboard",
+  "manifest_version": 2,
+  "version": "1.0",
+  "author": "frank-zsy",
+  "description": "Hypertrons 迷你面板",
+  "browser_action": {
+    "default_icon": "logo.png",
+    "default_title": "Hypertrons helper",
+    "default_popup": "popup/popup.html"
+  },
+  "background": {
+    "scripts": [
+      "common/background/util.js"
+    ]
+  },
+  "permissions": [
+    "notifications",
+    "http://hypertrons.io/*"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "https://*.github.com/*"
+      ],
+      "js": [
+        "third-party/jquery-3.5.0.min.js",
+        "third-party/echarts.simple.min.js",
+        "common/content-script/util.js",
+        "common/content-script/hypertrons-dashboard.js",
+        "github/content-script/github-script.js"
+      ],
+      "css": [
+        "common/css/style.css"
+      ],
+      "run_at": "document_end"
+    }
+  ]
+}

popup/popup.html

@@ -0,0 +1,16 @@
+<div>
+  <div>
+    <label>Notification</label>
+    <label class="switch">
+      <input type="checkbox">
+      <span class="slider"></span>
+    </label>
+  </div>
+  <div>
+    <lable>GitHub Token</lable>
+    <input type="text" />
+  </div>
+  <div>
+    <button>Save</button>
+  </div>
+</div>