Merge pull request #7 from aboutsource/feature/5259

chrome compat

Author: WendelinPraktikum

background.js

@@ -0,0 +1,12 @@
+trektor.runtime.onMessage((msg) => {
+  switch (msg.action) {
+    case 'fetchJSON':
+      return fetchJSON(...msg.args);
+    default:
+      return Promise.reject('unknown action');
+  }
+});
+
+function fetchJSON(url, options = {}) {
+  return fetch(url, options).then((response) => response.json());
+}

content_script.js

@@ -1,11 +1,3 @@
-let engine;
-
-if (window.browser !== undefined) {
-    engine = browser;
-} else {
-    engine = chrome;
-}
-
 function addButton() {
     const sidebar = document.querySelector(".window-sidebar")
     const button = document.createElement('span');
@@ -37,7 +29,7 @@ const mappings = {
 
 function onClick() {
     let trelloApiKey = "afadffe77f745496f80ebb4bf460c615"
-    engine.storage.local.get().then(result => {
+    trektor.storage.get(['trello', 'toggl']).then(result => {
         const trelloToken = result.trello
         const togglToken = result.toggl
 
@@ -94,12 +86,12 @@ function onClick() {
 
             url = new URL("https://api.track.toggl.com/api/v8/workspaces")
             const togglAuth = btoa(`${togglToken}:api_token`)
-            fetch(url.toString(), {
+            trektor.fetchJSON(url.toString(), {
                 headers: {
                     'Authorization': `Basic ${togglAuth}`,
                     'Content-Type': 'application/json'
                 }
-            }).then(response => response.json()).then(response => {
+            }).then(response => {
                 for (var i in response) {
                     if (response[i]["name"] == "aboutsource") {
                         var wid = response[i]["id"]
@@ -111,12 +103,12 @@ function onClick() {
                 }
 
                 url = new URL(`https://api.track.toggl.com/api/v8/workspaces/${wid}/projects`)
-                fetch(url.toString(), {
+                trektor.fetchJSON(url.toString(), {
                     headers: {
                         'Authorization': `Basic ${togglAuth}`,
                         'Content-Type': 'application/json'
                     }
-                }).then(response => response.json()).then(response => {
+                }).then(response => {
                     for (var i in response) {
                         if (response[i]["name"].endsWith(`(${labelShort})`)) {
                             var pid = response[i]["id"]
@@ -128,7 +120,7 @@ function onClick() {
                                     "pid": pid
                                 }
                             }
-                            fetch(url.toString(), {
+                            trektor.fetchJSON(url.toString(), {
                                 method: 'POST',
                                 headers: {
                                     'Authorization': `Basic ${togglAuth}`,

manifest.json

@@ -13,11 +13,17 @@
         "*://trello.com/*"
       ],
       "js": [
+        "trektor.js",
         "content_script.js"
       ]
     }
   ],
-
+  "background": {
+    "scripts": [
+      "trektor.js",
+      "background.js"
+    ]
+  },
   "permissions": [
     "*://api.trello.com/*",
     "*://*.toggl.com/*",

options/index.html

@@ -11,8 +11,9 @@ <h2>Trektor settings</h2>
 
     <a href="https://trello.com/1/authorize?expiration=never&scope=read,write,account&response_type=token&name=Trektor&key=afadffe77f745496f80ebb4bf460c615">
       Trello Token generieren</a><br>
-    <input type="text" id='trello_token' class="browser-style" aria-label="Trello Token"/><br><a href="https://track.toggl.com/profile">Toggl Token (ziemlich weit runter scrollen)</a> <br>
-    <input type="text" id="toggl_token"/><br><br><br>
-    <script src="script.js"></script>
+    <input type="text" id='trello_token' name="trello" class="chrome-style browser-style" aria-label="Trello Token"/><br><a href="https://track.toggl.com/profile">Toggl Token (ziemlich weit runter scrollen)</a> <br>
+    <input type="text" id="toggl_token" name="toggl" /><br><br><br>
+    <script src="../trektor.js"></script>
+    <script src="./script.js"></script>
   </body>
 </html>

options/script.js

@@ -1,27 +1,14 @@
-let engine;
-
-if (window.browser !== undefined) {
-    engine = browser;
-} else {
-    engine = chrome;
-}
-
-const trelloTextField = document.querySelector("#trello_token")
-const togglTextField = document.querySelector("#toggl_token")
+let trelloTextField = document.querySelector("#trello_token")
+let togglTextField = document.querySelector("#toggl_token")
 
 trelloTextField.addEventListener("input", onChange)
 togglTextField.addEventListener("input", onChange)
 
-function onChange() {
-    engine.storage.local.set({
-        "trello": trelloTextField.value,
-        "toggl": togglTextField.value
-    })
-    console.log(`set trello token to ${togglTextField.value}`)
-    console.log(`set toggl token to ${togglTextField.value}`)
+function onChange(e) {
+    trektor.storage.set({[e.target.name]: e.target.value});
 }
 
-engine.storage.local.get().then(result => {
-    trelloTextField.value = result["trello"]
-    togglTextField.value = result["toggl"]
+trektor.storage.get(['trello', 'toggl']).then(result => {
+    trelloTextField.value = result.trello;
+    togglTextField.value = result.toggl;
 })

trektor.js

@@ -0,0 +1,54 @@
+class ChromeStorage {
+  constructor() {
+      this.storage = chrome.storage.local;
+  }
+  get(keys) {
+      return new Promise((resolve) => {
+          this.storage.get(keys, resolve);
+      })
+  }
+  set(values) {
+      return new Promise((resolve) => {
+          this.storage.set(values, resolve);
+      })
+  }
+}
+
+class ChromeRuntime {
+  constructor() {
+    this.runtime = chrome.runtime;
+  }
+
+  sendMessage(msg) {
+    return new Promise((resolve) => {
+      this.runtime.sendMessage(msg, resolve);
+    });
+  }
+
+  onMessage(callback) {
+    this.runtime.onMessage.addListener((msg, sender, respond) => {
+      callback(msg).then((response) => { respond(response) });
+      return true;
+    });
+  }
+}
+
+window.trektor = {
+  storage: null,
+  runtime: null,
+
+  fetchJSON(url, options = {}) {
+    return this.runtime.sendMessage({
+      action: 'fetchJSON',
+      args: [url, options],
+    });
+  },
+};
+
+if (window.chrome !== undefined) {
+  window.trektor.storage = new ChromeStorage();
+  window.trektor.runtime = new ChromeRuntime();
+} else {
+  window.trektor.storage = browser.storage.local;
+  window.trektor.runtime = browser.runtime;
+}