introduce webextensions-polyfill

Author: ushi-as

.gitignore

@@ -1 +1,2 @@
 web-ext-artifacts
+node_modules

background.js

@@ -1,4 +1,4 @@
-trektor.runtime.onMessage.addListener(async (msg) => {
+browser.runtime.onMessage.addListener(async (msg) => {
   switch (msg.action) {
     case 'track':
       await track(...msg.args);

content_script.js

@@ -33,9 +33,9 @@ async function addButton() {
   trackButton.addEventListener("click", async () => {
     trackButtonIcon.classList.add("trektor-state-loading");
 
-    const response = await trektor.runtime.sendMessage({
-        action: "track",
-        args: [window.location.pathname.split("/", 3)[2]],
+    const response = await browser.runtime.sendMessage({
+      action: "track",
+      args: [window.location.pathname.split("/", 3)[2]],
     });
     trackButtonIcon.classList.remove("trektor-state-loading");
 
@@ -48,7 +48,7 @@ async function addButton() {
   });
 
   addButton.addEventListener("click", async () => {
-    const response = await trektor.runtime.sendMessage({
+    const response = await browser.runtime.sendMessage({
       action: "addTask",
       args: [window.location.pathname.split("/", 3)[2]],
     });

manifest.json

@@ -17,7 +17,7 @@
         "https://trello.com/*"
       ],
       "js": [
-        "trektor.js",
+        "node_modules/webextension-polyfill/dist/browser-polyfill.min.js",
         "content_script.js"
       ],
       "css": [
@@ -27,6 +27,7 @@
   ],
   "background": {
     "scripts": [
+      "node_modules/webextension-polyfill/dist/browser-polyfill.min.js",
       "trektor.js",
       "background.js"
     ]

options/index.html

@@ -29,7 +29,7 @@
 
     <input type="text" name="toggl" />
 
-    <script src="../trektor.js"></script>
+    <script src="../node_modules/webextension-polyfill/dist/browser-polyfill.min.js"></script>
     <script src="./script.js"></script>
   </body>
 </html>

options/script.js

@@ -1,9 +1,9 @@
 document.querySelectorAll("input").forEach((field) => {
   field.addEventListener("input", (e) => {
-    trektor.storage.set({ [e.target.name]: e.target.value });
+    browser.storage.local.set({ [e.target.name]: e.target.value });
   });
 
-  trektor.storage.get(field.name).then(({ [field.name]: value }) => {
+  browser.storage.local.get(field.name).then(({ [field.name]: value }) => {
     field.value = (value === undefined) ? '' : value;
   });
 });

package.json

@@ -0,0 +1,10 @@
+{
+  "name": "trektor",
+  "version": "0.0.3",
+  "repository": "git@github.com:aboutsource/trektor",
+  "author": "info@aboutsource.net",
+  "license": "MIT",
+  "dependencies": {
+    "webextension-polyfill": "^0.8.0"
+  }
+}

trektor.js

@@ -1,65 +1,24 @@
-class ChromeStorage {
-  constructor(storage) {
-    this.storage = storage;
-  }
-  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(runtime) {
-    this.runtime = runtime;
-  }
-
-  sendMessage(msg) {
-    return new Promise((resolve) => {
-      this.runtime.sendMessage(msg, resolve);
-    });
-  }
-
-  get onMessage() {
-    const runtime = this.runtime;
-
-    return {
-      addListener(callback) {
-        runtime.onMessage.addListener((msg, sender, respond) => {
-          callback(msg)
-            .then((response) => { respond(response) })
-            .catch((error) => respond(error.message));
-          return true;
-        });
-      },
-    }
-  }
-}
-
 class TrelloGateway {
   static ENDPOINT = "https://api.trello.com/1";
   static API_KEY = "afadffe77f745496f80ebb4bf460c615";
 
+  #storage;
+
   constructor(storage) {
-    this.storage = storage;
+    this.#storage = storage;
   }
 
   getCard(id) {
-    return this.request("get", `/cards/${id}`);
+    return this.#request("get", `/cards/${id}`);
   }
 
   updateCard(id, data) {
-    return this.request("put", `/cards/${id}`, data);
+    return this.#request("put", `/cards/${id}`, data);
   }
 
-  async request(method, path, data = null) {
+  async #request(method, path, data = null) {
     const url = this.constructor.ENDPOINT + path;
-    const { trello: token } = await this.storage.get("trello");
+    const { trello: token } = await this.#storage.get("trello");
 
     const response = await fetch(url, {
       method,
@@ -81,37 +40,43 @@ class TrelloGateway {
 class TogglGateway {
   static ENDPOINT = "https://api.track.toggl.com/api/v8";
 
+  #storage;
+
   constructor(storage) {
-    this.storage = storage;
+    this.#storage = storage;
   }
 
   getWorkspaces() {
-    return this.request("get", "/workspaces");
+    return this.#request("get", "/workspaces");
   }
 
   getProjects(workspaceId) {
-    return this.request("get", `/workspaces/${workspaceId}/projects`);
+    return this.#request("get", `/workspaces/${workspaceId}/projects`);
   }
 
   getTasks(projectId) {
-    return this.request("get", `/projects/${projectId}/tasks`);
+    return this.#request("get", `/projects/${projectId}/tasks`);
   }
 
   createTask(projectId, name) {
-    return this.request("post", "/tasks", {
+    return this.#request("post", "/tasks", {
       task: { name, pid: projectId },
     });
   }
 
+  getCurrentTimeEntry() {
+    return this.#request("get", "/time_entries/current");
+  }
+
   startTimeEntry(taskId) {
-    return this.request("post", "/time_entries/start", {
+    return this.#request("post", "/time_entries/start", {
       time_entry: { tid: taskId, created_with: "trektor" },
     });
   }
 
-  async request(method, path, data = null) {
+  async #request(method, path, data = null) {
     const url = this.constructor.ENDPOINT + path;
-    const { toggl: token } = await this.storage.get("toggl");
+    const { toggl: token } = await this.#storage.get("toggl");
 
     const response = await fetch(url, {
       method,
@@ -130,17 +95,7 @@ class TogglGateway {
   }
 }
 
-const trektor = {};
-
-if (window.chrome !== undefined) {
-  trektor.storage = new ChromeStorage(chrome.storage.local);
-  trektor.runtime = new ChromeRuntime(chrome.runtime);
-} else {
-  trektor.storage = browser.storage.local;
-  trektor.runtime = browser.runtime;
-}
-
-trektor.trelloGateway = new TrelloGateway(trektor.storage);
-trektor.togglGateway = new TogglGateway(trektor.storage);
-
-window.trektor = trektor;
+window.trektor = {
+  trelloGateway: new TrelloGateway(browser.storage.local),
+  togglGateway: new TogglGateway(browser.storage.local),
+};

yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+webextension-polyfill@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.8.0.tgz#f80e9f4b7f81820c420abd6ffbebfa838c60e041"
+  integrity sha512-a19+DzlT6Kp9/UI+mF9XQopeZ+n2ussjhxHJ4/pmIGge9ijCDz7Gn93mNnjpZAk95T4Tae8iHZ6sSf869txqiQ==