@orangelogic/orange-dam-content-browser-sdk 2.1.55 → 2.2.0-beta

package/config/webpackDevServer.config.js

@@ -0,0 +1,128 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+'use strict';
+
+const fs = require('fs');
+const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
+const ignoredFiles = require('react-dev-utils/ignoredFiles');
+const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
+const paths = require('./paths');
+const getHttpsConfig = require('./getHttpsConfig');
+
+const host = process.env.HOST || '0.0.0.0';
+const sockHost = process.env.WDS_SOCKET_HOST;
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
+const sockPort = process.env.WDS_SOCKET_PORT;
+
+module.exports = function (proxy, allowedHost) {
+  const disableFirewall =
+    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
+  return {
+    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
+    // websites from potentially accessing local content through DNS rebinding:
+    // https://github.com/webpack/webpack-dev-server/issues/887
+    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
+    // However, it made several existing use cases such as development in cloud
+    // environment or subdomains in development significantly more complicated:
+    // https://github.com/facebook/create-react-app/issues/2271
+    // https://github.com/facebook/create-react-app/issues/2233
+    // While we're investigating better solutions, for now we will take a
+    // compromise. Since our WDS configuration only serves files in the `public`
+    // folder we won't consider accessing them a vulnerability. However, if you
+    // use the `proxy` feature, it gets more dangerous because it can expose
+    // remote code execution vulnerabilities in backends like Django and Rails.
+    // So we will disable the host check normally, but enable it if you have
+    // specified the `proxy` setting. Finally, we let you override it if you
+    // really know what you're doing with a special environment variable.
+    // Note: ["localhost", ".localhost"] will support subdomains - but we might
+    // want to allow setting the allowedHosts manually for more complex setups
+    allowedHosts: disableFirewall ? 'all' : [allowedHost],
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': '*',
+      'Access-Control-Allow-Headers': '*',
+    },
+    // Enable gzip compression of generated files.
+    compress: true,
+    static: {
+      // By default WebpackDevServer serves physical files from current directory
+      // in addition to all the virtual build products that it serves from memory.
+      // This is confusing because those files won’t automatically be available in
+      // production build folder unless we copy them. However, copying the whole
+      // project directory is dangerous because we may expose sensitive files.
+      // Instead, we establish a convention that only files in `public` directory
+      // get served. Our build script will copy `public` into the `build` folder.
+      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+      // Note that we only recommend to use `public` folder as an escape hatch
+      // for files like `favicon.ico`, `manifest.json`, and libraries that are
+      // for some reason broken when imported through webpack. If you just want to
+      // use an image, put it in `src` and `import` it from JavaScript instead.
+      directory: paths.appPublic,
+      publicPath: [paths.publicUrlOrPath],
+      // By default files from `contentBase` will not trigger a page reload.
+      watch: {
+        // Reportedly, this avoids CPU overload on some systems.
+        // https://github.com/facebook/create-react-app/issues/293
+        // src/node_modules is not ignored to support absolute imports
+        // https://github.com/facebook/create-react-app/issues/1065
+        ignored: ignoredFiles(paths.appSrc),
+      },
+    },
+    client: {
+      webSocketURL: {
+        // Enable custom sockjs pathname for websocket connection to hot reloading server.
+        // Enable custom sockjs hostname, pathname and port for websocket connection
+        // to hot reloading server.
+        hostname: sockHost,
+        pathname: sockPath,
+        port: sockPort,
+      },
+      overlay: {
+        errors: true,
+        warnings: false,
+      },
+    },
+    devMiddleware: {
+      // It is important to tell WebpackDevServer to use the same "publicPath" path as
+      // we specified in the webpack config. When homepage is '.', default to serving
+      // from the root.
+      // remove last slash so user can land on `/test` instead of `/test/`
+      publicPath: paths.publicUrlOrPath.slice(0, -1),
+    },
+
+    https: getHttpsConfig(),
+    host,
+    historyApiFallback: {
+      // Paths with dots should still use the history fallback.
+      // See https://github.com/facebook/create-react-app/issues/387.
+      disableDotRule: true,
+      index: paths.publicUrlOrPath,
+    },
+    // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
+    proxy,
+    onBeforeSetupMiddleware(devServer) {
+      // Keep `evalSourceMapMiddleware`
+      // middlewares before `redirectServedPath` otherwise will not have any effect
+      // This lets us fetch source contents from webpack for the error overlay
+      devServer.app.use(evalSourceMapMiddleware(devServer));
+
+      if (fs.existsSync(paths.proxySetup)) {
+        // This registers user provided middleware for proxy reasons
+        require(paths.proxySetup)(devServer.app);
+      }
+    },
+    onAfterSetupMiddleware(devServer) {
+      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
+
+      // This service worker file is effectively a 'no-op' that will reset any
+      // previous service worker registered for the same host:port combination.
+      // We do this in development to avoid hitting the production cache if
+      // it used the same host and port.
+      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+    },
+  };
+};

package/config-overrides.js

@@ -0,0 +1,8 @@
+module.exports = function override(config, _env) {
+  config.output = {
+    ...config.output, // copy all settings
+    filename: 'static/js/[name].js',
+    chunkFilename: 'static/js/[name].chunk.js',
+  };
+  return config;
+};

package/gab_extension/GAB.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
+  <script src="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.2.0-beta/OrangeDamAssetBrowser.min.js"></script>
+  <link rel="stylesheet" type="text/css"
+    href="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.2.0-beta/OrangeDamAssetBrowser.min.css">
+  <style>
+    #orangelogic-GAB-browser-wrapper {
+      min-width: 382px;
+      min-height: 360px;
+      width: 100vw;
+      height: 100vh;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body onload="myFunction()" allow="clipboard-read; clipboard-write"
+  style="background-color: rgb(255, 255, 255); margin:0;">
+  <div id="orangelogic-GAB-browser-wrapper">
+  </div>
+</body>
+<script>
+  function myFunction() {
+    CortexAssetPicker.open({
+      onError: console.error,
+      // baseUrl: "local.orangelogic.com",
+      availableDocTypes: ['Images', 'Videos', 'Audio', 'Others'],
+      availableRepresentativeSubtypes: ['Standard Image', 'Other'],
+      displayInfo: {
+        title: true,
+        dimension: true,
+        fileSize: true,
+        tags: false,
+      },
+      extraFields: ['coreField.OriginalFileName', 'coreField.DocType'],
+      multiSelect: false, // single or multiple file picker
+      persistMode: true,
+      // pluginName: "Generic Asset Browser",
+      // pluginShortName: "GAB"
+      searchInDrive: false,
+      showCollections: true,
+      containerId: "orangelogic-GAB-browser-wrapper",
+      onClose: () => { },
+      onAssetSelected: function (assets) {
+        if (assets && assets.length > 0) {
+          console.table(assets);
+          const imageUrl = assets[0].imageUrl;
+          function copyToClipboard(text) {
+            navigator.clipboard.writeText(text).then(() => {
+              console.log('Text copied to clipboard:', text);
+            }).catch(err => {
+              console.warn('Failed to copy text to clipboard:', err);
+
+              // Use the 'out of viewport hidden text area' trick
+              const textArea = document.createElement("textarea");
+              textArea.value = text;
+
+              // Move textarea out of the viewport so it's not visible
+              textArea.style.position = "absolute";
+              textArea.style.left = "-999999px";
+
+              document.body.prepend(textArea);
+              textArea.select();
+
+              try {
+                document.execCommand('copy');
+              } catch (error) {
+                console.error(error);
+              } finally {
+                textArea.remove();
+              }
+            });
+          }
+
+          copyToClipboard(imageUrl);
+        }
+      },
+    });
+  }
+</script>
+
+</html>

package/gab_extension/GoogleChrome/manifest.json

@@ -0,0 +1,28 @@
+{
+  "manifest_version": 3,
+  "name": "Orange DAM Asset Browser Extension",
+  "version": "0.0.1",
+  "icons": {
+    "16": "src/assets/icon48.png",
+    "32": "src/assets/icon48.png",
+    "48": "src/assets/icon48.png",
+    "128": "src/assets/icon48.png"
+  },
+  "description": "Get Orange DAM Assets everywhere",
+  "externally_connectable": {
+    "matches": [ "*://*/*"]
+  },
+  "action": {
+    "default_icon":{
+      "16":"src/assets/icon48.png",
+      "24":"src/assets/icon48.png",
+      "32":"src/assets/icon48.png",
+      "48":"src/assets/icon48.png"
+    },
+    "default_title": "Orange DAM Asset Browser Extension"
+  },
+  "permissions":["scripting","activeTab","storage","clipboard"],
+  "background":{
+    "service_worker":"src/background/index.js"  
+  }
+}

package/gab_extension/GoogleChrome/src/background/index.js

@@ -0,0 +1,6 @@
+chrome.action.onClicked.addListener((tab) => {
+  chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    files: ["src/scripts/index.js"]
+  });
+});

package/gab_extension/GoogleChrome/src/scripts/index.js

@@ -0,0 +1,347 @@
+var modalOpen = false; // Flag to track if the modal is open
+var minimized = false; // Flag to track if the modal is minimized
+
+var storage = (typeof browser !== 'undefined' && browser.storage) ? browser.storage : chrome.storage;
+
+function createModal(iframeSrc) {
+  //! Initialization Helpers
+  // Prevent creating the modal if it's already open
+  if (modalOpen) return;
+  modalOpen = true; // Set the flag to true
+
+  // Remove existing overlay if it exists
+  const existingOverlay = document.getElementById("OrangeDAMAssetBrowserPluginPopupOverlay");
+  if (existingOverlay) {
+    document.body.removeChild(existingOverlay);
+  }
+
+  //! Variables
+  const highestZIndex = 2147483647;
+  const minWidth = 400;
+  const minHeight = 400;
+  const buttonSize = { width: '24px', height: '24px' };
+  const buttonMargin = '-4px';
+  const borderRadius = '8px';
+  const transition = 'width 500ms, height 500ms, top 500ms, left 500ms, top 500ms, left 500ms';
+  const fontSize = '16px';
+  const headerHeight = '40px';
+  const iframeHeight = `calc(100% - ${headerHeight})`;
+
+  // Initial position and size
+  const initialTop = '20px';
+  const initialLeft = '20px';
+  const initialWidth = 'calc(100vw - 40px)';
+  const initialHeight = 'calc(100vh - 40px)';
+
+
+  //! Components
+  // Overlay
+  const overlay = document.createElement('div');
+  overlay.id = "OrangeDAMAssetBrowserPluginPopupOverlay";
+  overlay.style.display = 'none';
+  overlay.style.position = 'fixed';
+  overlay.style.top = '0';
+  overlay.style.left = '0';
+  overlay.style.width = '100%';
+  overlay.style.height = '100%';
+  overlay.style.zIndex = highestZIndex;
+  overlay.style.pointerEvents = 'none';
+
+  // Popup
+  const popup = document.createElement('div');
+  popup.style.display = 'none';
+  popup.style.position = 'absolute';
+  popup.style.backgroundColor = 'rgb(128, 128, 128)';
+  popup.style.boxShadow = '0 0 8px rgba(0, 0, 0, 0.5)';
+  popup.style.borderRadius = borderRadius;
+  popup.style.pointerEvents = 'auto';
+
+  // Header
+  const header = document.createElement('div');
+  header.style.display = 'none';
+  header.style.justifyContent = 'space-between';
+  header.style.backgroundColor = 'white';
+  header.style.color = 'gray';
+  header.style.padding = '12px';
+  header.style.textAlign = 'right';
+  header.style.position = 'relative';
+  header.style.borderTopLeftRadius = borderRadius;
+  header.style.borderTopRightRadius = borderRadius;
+  header.style.lineHeight = fontSize;
+  header.style.cursor = 'move';
+  header.style.userSelect = 'none';
+  header.style.borderBottom = '1px solid var(--cx-color-neutral-300)';
+
+  // SVG icon for minimize/restore
+  const minimizeButton = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  minimizeButton.setAttribute("focusable", "false");
+  minimizeButton.setAttribute("aria-hidden", "true");
+  minimizeButton.setAttribute("viewBox", "0 0 24 24");
+  const minimizePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  minimizePath.setAttribute("d", "M22 3.41 16.71 8.7 20 12h-8V4l3.29 3.29L20.59 2 22 3.41zM3.41 22l5.29-5.29L12 20v-8H4l3.29 3.29L2 20.59 3.41 22z");
+  minimizePath.style.pointerEvents = 'none';
+  minimizeButton.appendChild(minimizePath);
+  minimizeButton.style.cursor = 'pointer';
+  minimizeButton.style.width = buttonSize.width;
+  minimizeButton.style.height = buttonSize.height;
+  minimizeButton.style.margin = buttonMargin;
+  minimizeButton.style.fill = 'var(--color-secondary)';
+
+  // SVG icon for minimize/restore
+  const restoreButton = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  restoreButton.setAttribute("focusable", "false");
+  restoreButton.setAttribute("aria-hidden", "true");
+  restoreButton.setAttribute("viewBox", "0 0 24 24");
+  const restorePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  restorePath.setAttribute("d", "M21 11V3h-8l3.29 3.29-10 10L3 13v8h8l-3.29-3.29 10-10z");
+  restorePath.style.pointerEvents = 'none';
+  restoreButton.appendChild(restorePath);
+  restoreButton.style.cursor = 'pointer';
+  restoreButton.style.width = buttonSize.width;
+  restoreButton.style.height = buttonSize.height;
+  restoreButton.style.margin = buttonMargin;
+  restoreButton.style.display = 'none';
+  restoreButton.style.fill = 'var(--color-secondary)';
+
+  // close button
+  const closeButton = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  closeButton.setAttribute("focusable", "false");
+  closeButton.setAttribute("aria-hidden", "true");
+  closeButton.setAttribute("viewBox", "0 0 24 24");
+  const closePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  closePath.setAttribute("d", "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z");
+  closePath.style.pointerEvents = 'none';
+  closeButton.appendChild(closePath);
+  closeButton.style.cursor = 'pointer';
+  closeButton.style.width = buttonSize.width;
+  closeButton.style.height = buttonSize.height;
+  closeButton.style.margin = buttonMargin;
+  closeButton.style.fill = 'var(--color-secondary)';
+
+  const navigationGroup = document.createElement('div');
+  navigationGroup.style.display = 'flex';
+  navigationGroup.style.gap = '12px';
+  navigationGroup.appendChild(minimizeButton);
+  navigationGroup.appendChild(restoreButton);
+  navigationGroup.appendChild(closeButton);
+
+
+  // popup title
+  const popupTitle = document.createElement('span');
+  popupTitle.style.fontFamily = '"Fira Sans", Arial, Helvetica, sans-serif';
+  popupTitle.textContent = 'Orange DAM Asset Browser Extension';
+  popupTitle.style.color = 'var(--color-secondary)';
+  popupTitle.style.fontSize = fontSize;
+  popupTitle.style.cursor = 'move';
+  popupTitle.style.userSelect = 'none';
+
+  // iframe
+  const iframe = document.createElement('iframe');
+  iframe.src = iframeSrc;
+  iframe.style.width = '100%';
+  iframe.style.height = iframeHeight;
+  iframe.style.border = 'none';
+  iframe.style.borderBottomLeftRadius = borderRadius;
+  iframe.style.borderBottomRightRadius = borderRadius;
+  iframe.style.userSelect = 'none';
+
+  // Resize Functionality
+  const resizer = document.createElement('div');
+  resizer.style.width = '10px';
+  resizer.style.height = '10px';
+  resizer.style.position = 'absolute';
+  resizer.style.right = '2px';
+  resizer.style.bottom = '2px';
+  resizer.style.overflow = 'auto';
+  resizer.style.resize = 'both';
+  resizer.style.cursor = 'se-resize';
+
+  //! Functions
+  function savePopupState() {
+    const popupState = {
+      width: popup.style.width,
+      height: popup.style.height,
+      top: popup.style.top,
+      left: popup.style.left
+    };
+    storage.local.set({ popupState });
+  }
+
+  function restorePopupState() {
+    return new Promise((resolve) => {
+      storage.local.get('popupState', function (data) {
+        if (data.popupState) {
+          let top = parseInt(data.popupState.top, 10);
+          let left = parseInt(data.popupState.left, 10);
+
+          // Limit the left position
+          if (left < 0) left = 0;
+          if (left + popup.offsetWidth > window.innerWidth) {
+            left = window.innerWidth - popup.offsetWidth;
+          }
+
+          // Limit the top position
+          if (top < 0) top = 0;
+          if (top + popup.offsetHeight > window.innerHeight) {
+            top = window.innerHeight - popup.offsetHeight;
+          }
+
+          popup.style.left = left + 'px';
+          popup.style.top = top + 'px';
+          popup.style.width = data.popupState.width;
+          popup.style.height = data.popupState.height;
+          popup.style.transform = 'none';
+        } else {
+          // Center the popup if no position is saved
+          popup.style.top = initialTop;
+          popup.style.left = initialLeft;
+          popup.style.width = initialWidth;
+          popup.style.height = initialHeight;
+        }
+        resolve();
+      });
+    });
+  }
+
+  function minimizeModal() {
+    restoreButton.style.display = "block";
+    minimizeButton.style.display = "none";
+    header.style.cursor = 'default';
+    popupTitle.style.cursor = 'default';
+    popup.style.width = '500px';
+    popup.style.height = '40px';
+    popup.style.overflow = 'hidden';
+    popup.style.top = 'calc(100vh - 60px)';
+    popup.style.left = 'calc(100vw - 524px)';
+    popup.style.transition = transition;
+    resizer.style.display = 'none';
+    minimized = true;
+  }
+
+  function restoreModal() {
+    restoreButton.style.display = "none";
+    minimizeButton.style.display = "block";
+    header.style.cursor = 'move';
+    popupTitle.style.cursor = 'move';
+    popup.style.overflow = 'unset';
+    resizer.style.display = 'block';
+    popup.style.transition = transition;
+    minimized = false;
+    restorePopupState();
+  }
+
+  function closeModal() {
+    document.body.removeChild(overlay);
+    modalOpen = false;
+  }
+
+  function initResize(e) {
+    popup.style.transition = 'none'; // Remove transition to prevent animation for resizing
+    popup.style.pointerEvents = 'none';
+    popup.style.transform = 'none';
+    window.addEventListener('mousemove', resize);
+    window.addEventListener('mouseup', stopResize);
+  }
+
+  function resize(e) {
+    let newWidth = e.clientX - popup.offsetLeft;
+    let newHeight = e.clientY - popup.offsetTop;
+
+    // Enforce minimum width and height
+    if (newWidth < minWidth) newWidth = minWidth;
+    if (newHeight < minHeight) newHeight = minHeight;
+
+    popup.style.width = newWidth + 'px';
+    popup.style.height = newHeight + 'px';
+  }
+
+  function stopResize() {
+    popup.style.pointerEvents = 'auto';
+    resizer.style.width = '10px';
+    resizer.style.height = '10px';
+    window.removeEventListener('mousemove', resize);
+    window.removeEventListener('mouseup', stopResize);
+    savePopupState();
+  }
+
+  function initMove(e) {
+    if (minimized || e.target === minimizeButton || e.target === restoreButton || e.target === closeButton) {
+      return;
+    }
+    popup.style.transition = 'none'; // Remove transition to prevent animation for resizing
+    popup.style.pointerEvents = 'none';
+    popup.style.transform = 'none';
+    const offsetX = e.clientX - popup.offsetLeft;
+    const offsetY = e.clientY - popup.offsetTop;
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', stopMove);
+
+    function move(e) {
+      let newLeft = e.clientX - offsetX;
+      let newTop = e.clientY - offsetY;
+
+      // Limit the left position
+      if (newLeft < 0) newLeft = 0;
+      if (newLeft + popup.offsetWidth > window.innerWidth) {
+        newLeft = window.innerWidth - popup.offsetWidth;
+      }
+
+      // Limit the top position
+      if (newTop < 0) newTop = 0;
+      if (newTop + popup.offsetHeight > window.innerHeight) {
+        newTop = window.innerHeight - popup.offsetHeight;
+      }
+
+      popup.style.left = newLeft + 'px';
+      popup.style.top = newTop + 'px';
+    }
+
+    function stopMove() {
+      popup.style.pointerEvents = 'auto';
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', stopMove);
+      savePopupState();
+    }
+  }
+
+  //! Event Listeners
+  minimizeButton.addEventListener('click', function () {
+    minimizeModal();
+  });
+
+  restoreButton.addEventListener('click', function () {
+    restoreModal();
+  });
+
+  closeButton.addEventListener('click', function () {
+    closeModal();
+  });
+
+  header.addEventListener('click', function (e) {
+    if (e.target === header || e.target === popupTitle && minimized) {
+      restoreModal();
+    }
+  });
+
+  resizer.addEventListener('mousedown', initResize);
+  header.addEventListener('mousedown', initMove);
+
+  //? Restore popup location and size
+  restorePopupState().then(() => {
+    // Append elements
+    header.appendChild(popupTitle);
+    header.appendChild(navigationGroup);
+    popup.appendChild(header);
+    popup.appendChild(iframe);
+    overlay.appendChild(popup);
+    document.body.appendChild(overlay);
+    popup.appendChild(resizer);
+    // Display the popup
+    overlay.style.display = 'block';
+    popup.style.display = 'block';
+    header.style.display = 'flex';
+  });
+}
+
+// Call the function with the desired iframe source
+createModal('http://localhost:5500/GAB.html');

package/gab_extension/MozillaFirefox/manifest.json

@@ -0,0 +1,20 @@
+{
+  "manifest_version": 2,
+  "name": "Orange DAM Asset Browser Extension",
+  "version": "0.0.1",
+  "icons": {
+    "16": "src/assets/icon48.png",
+    "32": "src/assets/icon48.png",
+    "48": "src/assets/icon48.png",
+    "128": "src/assets/icon48.png"
+  },
+  "description": "Get Orange DAM Assets everywhere",
+  "browser_action": {
+    "default_icon": "src/assets/icon.png",
+    "default_title": "Orange DAM Asset Browser Extension"
+  },
+  "permissions":["scripting","activeTab","storage","clipboard"],
+  "background": {
+    "scripts": ["src/background/index.js"]
+  }
+}

package/gab_extension/MozillaFirefox/src/background/index.js

@@ -0,0 +1,5 @@
+browser.browserAction.onClicked.addListener((info, tab) => {
+  browser.tabs.executeScript({
+    file: "src/scripts/index.js",
+  });
+});