Re-organize project into background and contentScript folders

src/background.js → src/background/background.js

@@ -1,9 +1,9 @@
-import { storageGet, storageSet } from "./utils";
-import { Tab } from "./types";
+import { storageGet, storageSet } from "../utils";
+import { Tab } from "../types";
 import { loadSignature, saveSignature } from "./signatureStorage";
-import { getLogger } from "./log";
+import { getLogger } from "../log";
 import { startTheGarbageCollector } from "./garbageCollector";
-import { EVENT_OPEN_RENAME_DIALOG } from "./config";
+import { EVENT_OPEN_RENAME_DIALOG } from "../config";
 
 const log = getLogger('background.js');
 log.setLevel('DEBUG');
@@ -30,7 +30,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     } else if (message.command === "load_signature") {
         loadSignature(sender.tab.id, sender.tab.url, sender.tab.index, false)
         .then((resp) => {
-            sendResponse(resp);
+            return sendResponse(resp);
+        }).catch(e => {
+            log.error('Error while loading signature:', e);
+            return sendResponse(null);
         });
         return true; // To indicate that the response will be asynchronous
     }

src/garbageCollector.js → src/background/garbageCollector.js

@@ -1,5 +1,5 @@
-import { storageGet, storageSet } from "./utils.js";
-import { Tab } from "./types";
+import { storageGet, storageSet } from "../utils.js";
+import { Tab } from "../types.js";
 
 /** garbage collector (gc) logger */
 const gcLog = require("loglevel").getLogger("module-one")

src/signatureStorage.js → src/background/signatureStorage.js

@@ -1,6 +1,6 @@
-import { Tab, TabSignature } from "./types";
-import { storageGet, storageSet } from "./utils";
-import { getLogger } from "./log";
+import { Tab, TabSignature } from "../types";
+import { storageGet, storageSet } from "../utils";
+import { getLogger } from "../log";
 
 const log = getLogger('signatureStorage.js')
 // log.setLevel('DEBUG');

src/backgroundScriptApi.js → src/contentScript/backgroundScriptApi.js

@@ -1,4 +1,4 @@
-import log from "./log";
+import log from "../log";
 
 class BackgroundScriptAPI {
     async saveSignature(title, favicon) {

src/components/App.js → src/contentScript/components/App.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import EmojiPicker from './EmojiPicker';
 import { setTabTitle, setTabFavicon } from '../contentScript';
-import { ROOT_ELEMENT_ID, INPUT_BOX_ID, OVERLAY_ID, MAIN_BAR_ID, EVENT_OPEN_RENAME_DIALOG } from '../config';
+import { ROOT_ELEMENT_ID, INPUT_BOX_ID, OVERLAY_ID, MAIN_BAR_ID, EVENT_OPEN_RENAME_DIALOG } from '../../config';
 import PropTypes from 'prop-types';
 import bgScriptApi from '../backgroundScriptApi';
-import log from "../log";
+import log from "../../log";
 import SelectedEmoji from './SelectedEmoji';
 
 export function App() {

src/components/EmojiPicker.js → src/contentScript/components/EmojiPicker.js

@@ -1,6 +1,6 @@
 import React, { Component, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { EMOJI_PICKER_ID } from '../config';
+import { EMOJI_PICKER_ID } from '../../config';
 
 const SEARCH_RESULTS_ID = 'tab-renamer-extension-search-results-div';
 const ALL_EMOJIS_ID = 'tab-renamer-extension-all-emojis-div';

src/components/SelectedEmoji.js → src/contentScript/components/SelectedEmoji.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { emojiToDataURL } from '../utils';
+import { emojiToDataURL } from '../../utils';
 import PropTypes from 'prop-types';
-import { EMOJI_PICKER_IMAGE_ID, FAVICON_PICKER_ID, PICKED_EMOJI_ID } from '../config';
-import log from '../log';
+import { EMOJI_PICKER_IMAGE_ID, FAVICON_PICKER_ID, PICKED_EMOJI_ID } from '../../config';
+import log from '../../log';
 
 function SelectedEmoji({ selectedEmoji, handleFaviconPickerClick }) {
     log.debug('Rendering SelectedEmoji with emoji:', selectedEmoji);

src/contentScript.js → src/contentScript/contentScript.js

@@ -1,20 +1,17 @@
 import { preserveFavicon, preserveTabTitle, disconnectTabTitlePreserver, disconnectFaviconPreserver } from "./preservers";
 import listenerManager from "./listenerManager";
-import { EVENT_OPEN_RENAME_DIALOG, ROOT_ELEMENT_ID, ROOT_TAG_NAME } from "./config";
+import { EVENT_OPEN_RENAME_DIALOG, ROOT_ELEMENT_ID, ROOT_TAG_NAME } from "../config";
 import { createRoot } from 'react-dom/client';
 import { App } from './components/App';
-import { emojiToDataURL } from './utils';
+import { emojiToDataURL } from '../utils';
 import bgScriptApi from "./backgroundScriptApi";
 import React from 'react';
-import log from "./log";
+import log from "../log";
 
 // Global variables:
 let uiInsertedIntoDOM = false;
 let root = null;
 
-// TODO: Separate your code into background and contentscript folders.
-// But maybe do that after React refactoring is finished.
-
 export async function setTabTitle(newTabTitle) {
     log.debug('setTabTitle called with newTabTitle:', newTabTitle);
     preserveTabTitle(newTabTitle);

src/listenerManager.js → src/contentScript/listenerManager.js

@@ -1,4 +1,4 @@
-import log from "./log";
+import log from "../log";
 
 class ListenerManager {
     constructor() {

tests/unit/garbageCollector.test.js

@@ -1,4 +1,4 @@
-const { garabageCollectionFilter } = require('../../src/garbageCollector');
+const { garabageCollectionFilter } = require('../../src/background/garbageCollector');
 
 describe('garabageCollectionFilter', () => {
     test('should keep the tab if it is not closed', () => {

tests/unit/signatureStorage.test.js

@@ -1,4 +1,4 @@
-const { findMatchingTab, loadSignature, saveSignature } = require('../../src/signatureStorage.js');
+const { findMatchingTab, loadSignature, saveSignature } = require('../../src/background/signatureStorage.js');
 const { Tab, TabSignature } = require('../../src/types.js');
 const { storageSet, storageGet } = require('../../src/utils.js');
 const { chromeStorageMock } = require('../chromeStorageMock.js');

webpack.config.js

@@ -8,8 +8,8 @@ module.exports = (_env, argv) => {
 
   return {
     entry: {
-      contentScript: './src/contentScript.js',
-      background: './src/background.js',
+      contentScript: './src/contentScript/contentScript.js',
+      background: './src/background/background.js',
     },
 
     output: {