Merge pull request #33 from WebExp0528/development

Fix regeneratorRuntime issue and update some functions

.babelrc

@@ -9,5 +9,13 @@
  ],
  "@babel/preset-react"
  ],
- "plugins": [["@babel/plugin-proposal-class-properties"]]
+ "plugins": [
+ ["@babel/plugin-proposal-class-properties"],
+ [
+ "@babel/plugin-transform-runtime",
+ {
+ "regenerator": true
+ }
+ ]
+ ]
 }

.prettierrc.json

@@ -2,5 +2,6 @@
  "tabWidth": 4,
  "semi": true,
  "singleQuote": false,
- "useTabs": false
+ "useTabs": false,
+ "printWidth": 120
 }

package.json

@@ -14,6 +14,7 @@
  "@babel/core": "^7.14.3",
  "@babel/eslint-parser": "^7.14.3",
  "@babel/plugin-proposal-class-properties": "^7.13.0",
+ "@babel/plugin-transform-runtime": "^7.14.5",
  "@babel/preset-env": "^7.14.2",
  "@babel/preset-react": "^7.13.13",
  "babel-loader": "^8.2.2",

src/background/index.js

@@ -1,7 +1,7 @@
 import browser from "webextension-polyfill";
 
 /**
- * Define content script functions
+ * Define background script functions
  * @type {class}
  */
 class Background {
@@ -11,29 +11,26 @@ class Background {
 
  /**
  * Document Ready
+ *
  * @returns {void}
  */
  init = () => {
- console.log("loaded Background Scripts");
+ console.log("[===== Loaded Background Scripts =====]");
 
  //When extension installed
- browser.runtime.onInstalled.addListener(() => this.onInstalled());
+ browser.runtime.onInstalled.addListener(this.onInstalled);
 
  //Add message listener in Browser.
- browser.runtime.onMessage.addListener((message, sender, reply) =>
- this.onMessage(message, sender, reply)
- );
+ browser.runtime.onMessage.addListener(this.onMessage);
 
- //Add message listener from Extension
- browser.extension.onConnect.addListener((port) => this.onConnect(port));
+ //Add message listener from Long Live Connection
+ browser.extension.onConnect.addListener(this.onConnect);
 
  //Add Update listener for tab
- browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) =>
- this.onUpdatedTab(tabId, changeInfo, tab)
- );
+ browser.tabs.onUpdated.addListener(this.onUpdatedTab);
 
  //Add New tab create listener
- browser.tabs.onCreated.addListener((tab) => this.onCreatedTab(tab));
+ browser.tabs.onCreated.addListener(this.onCreatedTab);
  };
 
  //TODO: Listeners
@@ -42,21 +39,25 @@ class Background {
  * Extension Installed
  */
  onInstalled = () => {
- console.log("~~~~~Installed Extension!");
+ console.log("[===== Installed Extension!] =====");
  };
 
  /**
  * Message Handler Function
  *
  * @param { object } message
  * @param { object } sender
- * @param { object } reply
  */
- onMessage = (message, sender, reply) => {
- console.log("~~~~~Received message", message);
- switch (message.type) {
+ onMessage = async (message, sender) => {
+ try {
+ console.log("[===== Received message =====]", message, sender);
+ switch (message.type) {
+ }
+ return true; // result to reply
+ } catch (error) {
+ console.log("[===== Error in MessageListener =====]", error);
+ return error;
  }
- return true;
  };
 
  /**
@@ -66,27 +67,25 @@ class Background {
  */
  onConnect = (port) => {
  this._port = port;
- console.log("~~~~~Connected .....");
- this._port.onMessage.addListener((msg) =>
- this.onMessageFromExtension(msg)
- );
+ console.log("[===== Connected Long Live Connection =====]");
+ this._port.onMessage.addListener((msg) => this.onMessageFromExtension(msg));
  };
 
  /**
- * Message from Extension
+ * Message from Long Live Connection
  *
  * @param {*} msg
  */
  onMessageFromExtension = (msg) => {
- console.log("~~~~Recieved message from Popup:" + msg);
+ console.log("[===== Message from Long Live Connection =====]");
  };
 
  /**
  *
  * @param {object} tab
  */
  onCreatedTab = (tab) => {
- console.log("~~~~~Created new tab", tab);
+ console.log("[===== New Tab Created =====]", tab);
  };
 
  /**
@@ -97,77 +96,63 @@ class Background {
  * @param {*} tab
  */
  onUpdatedTab = (tabId, changeInfo, tab) => {
- console.log("~~~~~Changed tab", tabId);
+ console.log("[===== Tab Created =====]", tabId);
  };
 
  /**
- * get url from tab
- * @param {number} tabid
+ * Get url from tabId
+ *
+ * @param {number} tabId
  */
- getURLFromTab = (tabid) => {
- return new Promise(function (resolve, reject) {
- browser.tabs.get(tabid, function (tab) {
- resolve(tab.url ? tab.url : "");
- });
- });
+ getURLFromTab = async (tabId) => {
+ try {
+ const tab = await browser.tabs.get(tabId);
+ return tab.url || "";
+ } catch (error) {
+ console.log(`[===== Could not get Tab Info$(tabId) in getURLFromTab =====]`, error);
+ throw "";
+ }
  };
 
  /**
- * open new tab
+ * Open new tab by url
  *
  * @param {string} url
  */
- openNewTab = (url) => {
- return new Promise((resolve, reject) =>
- browser.tabs.create({ url }, function (tab) {
- resolve(tab);
- })
- );
+ openNewTab = async (url) => {
+ try {
+ const tab = await browser.tabs.create({ url });
+ return tab;
+ } catch (error) {
+ console.log(`[===== Error in openNewTab =====]`, error);
+ return null;
+ }
  };
 
  /**
  * Close specific tab
- * @param {} tab
- */
- closeTab = (tab) => {
- return new Promise((resolve, reject) =>
- browser.tabs.remove(tab.id, () => {
- resolve();
- })
- );
- };
-
- /**
- * Update Tab
- */
- updateTab = (tab, options) => {
- return new Promise((resolve, reject) => {
- browser.tabs.update(tab.id, options, function (updateTab) {
- resolve(updateTab);
- });
- });
- };
-
- /**
- * Get info from tabId
+ *
+ * @param {number} tab
  */
- getTab = (tab) => {
- return new Promise((resolve) => {
- browser.tabs.get(tab.id, function (newTab) {
-  resolve(newTab);
- });
- });
+ closeTab = async (tab) => {
+ try {
+ await browser.tabs.remove(tab.id);
+ } catch (error) {
+ console.log(`[===== Error in closeTab =====]`, error);
+ }
  };
 
  /**
  * send message
  */
- sendMessage = (tab, msg) => {
- return new Promise((resolve, reject) =>
- browser.tabs.sendMessage(tab.id, msg, function (response) {
- resolve(response);
- })
- );
+ sendMessage = async (tab, msg) => {
+ try {
+ const res = await browser.tabs.sendMessage(tab.id, msg);
+ return res;
+ } catch (error) {
+ console.log(`[===== Error in sendMessage =====]`, error);
+ return null;
+ }
  };
 }
 

src/content/messageListener.js

@@ -1,6 +1,6 @@
 export const onRequest = (request) => {
- if (request.action === "change-color") {
- document.body.style.background = request.data.color;
+ if (request.msgType === "change-color") {
+ document.body.style.background = request.color;
  }
 };
 

src/popup/Popup.jsx

@@ -1,13 +1,13 @@
 import React from "react";
 import Button from "components/Button";
-import sendMessage from "./services/comunicationManager";
+import { sendMessageToActiveTab } from "utils/sendMessages";
 
 function setGreen() {
- sendMessage("change-color", { color: "green" });
+ sendMessageToActiveTab("change-color", { color: "green" });
 }
 
 function setRed() {
- sendMessage("change-color", { color: "red" });
+ sendMessageToActiveTab("change-color", { color: "red" });
 }
 
 export const Popup = () => (

src/utils/hot-reload.js

@@ -7,11 +7,7 @@ const filesInDirectory = (dir) =>
  entries
  .filter((e) => e.name[0] !== ".")
  .map((e) =>
- e.isDirectory
- ? filesInDirectory(e)
- : new Promise((resolvePromise) =>
- e.file(resolvePromise)
- )
+ e.isDirectory ? filesInDirectory(e) : new Promise((resolvePromise) => e.file(resolvePromise))
  )
  )
  .then((files) => [].concat(...files))
@@ -20,9 +16,7 @@ const filesInDirectory = (dir) =>
  );
 
 const timestampForFilesInDirectory = (dir) =>
- filesInDirectory(dir).then((files) =>
- files.map((f) => f.name + f.lastModifiedDate).join()
- );
+ filesInDirectory(dir).then((files) => files.map((f) => f.name + f.lastModifiedDate).join());
 
 const reload = () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {

src/utils/sendMessages.js

@@ -9,26 +9,43 @@ export const MSG_TYPE = {
 };
 
 /**
- * Send Message to background script
+ * gen message
+ *
  * @param { keyof MSG_TYPE } msgType
  * @param { {[string]:any} } message
  */
-export const sendMessage = async (msgType, message) => {
- const msg = {
+const genMessage = (msgType, message) => {
+ return {
  msgType,
  ...message,
  };
- console.log("===== Sending Message => ", msg);
- return new Promise((resolve, reject) => {
- try {
- browser.runtime.sendMessage(msg, (response) => {
- resolve(response);
- });
- } catch (e) {
- console.log(" SendMessage Failed => ", e);
- reject(e);
- }
- });
 };
 
-export default sendMessage;
+/**
+ * Send Message to background script
+ *
+ * @param { keyof MSG_TYPE } msgType
+ * @param { {[string]:any} } message
+ */
+export const sendMessage = async (msgType, message) => {
+ try {
+ console.log("===== Sending Message => ", msg);
+ const res = await browser.runtime.sendMessage(genMessage(msgType, message));
+ return res;
+ } catch (e) {
+ console.log("[===== Error in SendMessage =====]", e);
+ return null;
+ }
+};
+
+export const sendMessageToActiveTab = async (msgType, message) => {
+ try {
+ const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+ const activeTab = tabs[0];
+ const res = await browser.tabs.sendMessage(activeTab.id, genMessage(msgType, message));
+ return res;
+ } catch (error) {
+ console.log("[===== Error in sendMessageToActiveTab =====]", error);
+ return null;
+ }
+};

src/utils/storage.js

@@ -1,5 +1,3 @@
 import browser from "webextension-polyfill";
 
-module.exports = browser.storage.sync
- ? browser.storage.sync
- : browser.storage.local;
+export default browser.storage.sync ? browser.storage.sync : browser.storage.local;