browser-extension-manager 0.0.1 → 1.0.0

package/dist/background.js

@@ -50,6 +50,9 @@ Manager.prototype.initialize = function () {
     // Import firebase
     // importFirebase(self);
 
+    // Setup livereload
+    setupLiveReload(self);
+
     // Log
     self.log('Initialized!', self.version, self.cache.name, self);
 
@@ -241,6 +244,85 @@ function importFirebase(self) {
   self.libraries.firebase = firebase;
 }
 
+function setupLiveReload(self) {
+  // Quit if not in dev mode
+  if (self.environment !== 'development') { return };
+
+  // Setup livereload
+  const address = `ws://localhost:{ liveReloadPort }/livereload`;
+  let connection;
+  let isReconnecting = false; // Flag to track reconnections
+
+  // Function to establish a connection
+  function connect() {
+    connection = new WebSocket(address);
+
+    // Log connection
+    self.log(`Reload connecting to ${address}...`);
+
+    // Log connection errors
+    connection.onerror = (e) => {
+      self.error('Reload connection got error:', e);
+    };
+
+    // Log when set up correctly
+    connection.onopen = () => {
+      self.log('Reload connection set up!');
+
+      // Reload the extension only on reconnections
+      if (isReconnecting) {
+        // reload();
+      }
+
+      // Reset the reconnection flag
+      isReconnecting = false;
+    };
+
+    // Handle connection close and attempt to reconnect
+    connection.onclose = () => {
+      // Set time
+      const seconds = 1;
+
+      // Log
+      self.log(`Reload connection closed. Attempting to reconnect in ${seconds} second(s)...`);
+
+      // Set the reconnection flag
+      isReconnecting = true;
+
+      // Reconnect
+      setTimeout(connect, seconds * 1000); // Retry
+    };
+
+    // Handle incoming messages
+    connection.onmessage = function (event) {
+      if (!event.data) {
+        return;
+      }
+
+      // Get data
+      const data = JSON.parse(event.data);
+
+      // Log
+      self.log('Reload connection got message:', data);
+
+      // Handle reload command
+      if (data && data.command === 'reload') {
+        reload();
+      }
+    };
+  }
+
+  function reload() {
+    self.log('Reloading extension...');
+    setTimeout(() => {
+      self.extension.runtime.reload();
+    }, 1000);
+  }
+
+  // Start the initial connection
+  connect();
+}
+
 function arrayUnique(array) {
   var a = array.concat();
 

package/dist/build.js

@@ -67,7 +67,7 @@ Manager.prototype.getManifest = Manager.getManifest;
 
 // getConfig: requires and parses config.json
 Manager.getConfig = function () {
-  return JSON5.parse(jetpack.read(path.join(process.cwd(), 'config.json')));
+  return JSON5.parse(jetpack.read(path.join(process.cwd(), 'config', 'config.json')));
 }
 Manager.prototype.getConfig = Manager.getConfig;
 
@@ -82,6 +82,24 @@ Manager.getPackage = function (type) {
 }
 Manager.prototype.getPackage = Manager.getPackage;
 
+// getRootPath: returns the root path of the project or package
+Manager.getRootPath = function (type) {
+  return type === 'project'
+    ? process.cwd()
+    : path.resolve(__dirname, '..')
+}
+Manager.prototype.getRootPath = Manager.getRootPath;
+
+// getLiveReloadPort: (35729)
+Manager.getLiveReloadPort = function () {
+  // Check if the port is set in the environment
+  process.env.BXM_LIVERELOAD_PORT = process.env.BXM_LIVERELOAD_PORT || 35729;
+
+  // Return the port
+  return process.env.BXM_LIVERELOAD_PORT;
+}
+Manager.prototype.getLiveReloadPort = Manager.getLiveReloadPort;
+
 // Require
 Manager.require = function (path) {
   return require(path);

package/dist/commands/clean.js

@@ -12,6 +12,7 @@ const dirs = [
   '.temp',
   'dist',
   'packaged',
+  // 'src/assets/themes',
 ]
 
 module.exports = async function (options) {

package/dist/config/manifest.json

@@ -75,4 +75,12 @@
     pages: [
     ],
   },
+
+  // IDs
+  browser_specific_settings: {
+    gecko: {
+      id: 'my-addon@example.com',
+      strict_min_version: '91.0',
+    },
+  },
 }

package/dist/defaults/src/assets/css/options.scss

@@ -1,2 +1,11 @@
 // options.scss
 // This file contains the styles for the options page of the extension.
+
+// Imports
+@import '/node_modules/browser-extension-manager/dist/assets/themes/bootstrap/5.3.3/css/bootstrap.css';
+
+// Page size
+body {
+  min-width: 400px;
+  max-width: 100%;
+}

package/dist/defaults/src/assets/css/popup.scss

@@ -1,2 +1,14 @@
 // popup.scss
 // This file contains the styles for the popup page of the extension.
+
+// Imports
+@import '/node_modules/browser-extension-manager/dist/assets/themes/bootstrap/5.3.3/css/bootstrap.css';
+
+// Page size
+body {
+  min-width: 400px;
+  max-width: 100%;
+}
+
+
+

package/dist/defaults/src/assets/js/options.js

@@ -0,0 +1,10 @@
+// Import the Ultimate Extension Manager
+const Manager = new (require('browser-extension-manager'));
+
+// Import themes
+const bootstrap = require('/node_modules/browser-extension-manager/dist/assets/themes/bootstrap/5.3.3/js/bootstrap.bundle.js');
+
+// Initialize
+Manager.initialize(() => {
+  console.log('Initialized');
+})

package/dist/defaults/src/assets/js/popup.js

@@ -1,6 +1,9 @@
 // Import the Ultimate Extension Manager
 const Manager = new (require('browser-extension-manager'));
 
+// Import themes
+const bootstrap = require('/node_modules/browser-extension-manager/dist/assets/themes/bootstrap/5.3.3/js/bootstrap.bundle.js');
+
 // Initialize
 Manager.initialize(() => {
   console.log('Initialized');

package/dist/defaults/src/manifest.json

@@ -75,6 +75,12 @@
 
   // Commands
   commands: {
+    // test: {
+    //   description: 'Test',
+    //   suggested_key: {
+    //     default: 'Alt+T',
+    //   },
+    // },
   },
 
   // Sandbox
@@ -83,4 +89,12 @@
       // 'pages/sandbox.html',
     ],
   },
+
+  // IDs
+  browser_specific_settings: {
+    gecko: {
+      // id: 'my-addon@example.com',
+      // strict_min_version: '91.0',
+    },
+  },
 }

package/dist/defaults/src/pages/options.html

@@ -1,10 +1,13 @@
 <!doctype html>
 <html>
   <head>
+    <!-- Meta -->
     <meta charset="utf-8">
-    <link href="/assets/css/options.bundle.css" rel="stylesheet">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Options & Settings</title>
+
+    <!-- CSS -->
+    <link href="/assets/css/options.bundle.css" rel="stylesheet">
   </head>
   <body class="wrap">
     <footer class="main-footer">
@@ -16,6 +19,8 @@
         </div>
       </div>
     </footer>
+
+    <!-- JS -->
     <script src="/assets/css/options.bundle.js"></script>
   </body>
 </html>

package/dist/defaults/src/pages/popup.html

@@ -1,10 +1,13 @@
 <!doctype html>
 <html>
   <head>
+    <!-- Meta -->
     <meta charset="utf-8">
-    <link href="/assets/css/popup.bundle.css" rel="stylesheet">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Popup</title>
+
+    <!-- CSS -->
+    <link href="/assets/css/popup.bundle.css" rel="stylesheet">
   </head>
   <body class="wrap">
     <footer class="main-footer">
@@ -16,6 +19,8 @@
         </div>
       </div>
     </footer>
+
+    <!-- JS -->
     <script src="/assets/css/popup.bundle.js"></script>
   </body>
 </html>

package/dist/gulp/main.js

@@ -14,7 +14,7 @@ const tasks = jetpack.list(path.join(__dirname, 'tasks'));
 
 // Init global
 global.tasks = {};
-global.browserSync = null;
+global.websocket = null;
 
 // Load tasks
 tasks.forEach((file) => {
@@ -34,6 +34,7 @@ global.tasks = exports;
 exports.build = series(
   // exports.setup,
   // exports.clean,
+  // exports.themes,
   exports.distribute,
   parallel(exports.sass, exports.webpack, exports.icons),
   exports.package,

package/dist/gulp/tasks/_importer.js

@@ -0,0 +1,35 @@
+const customAliasImporter = {
+  canonicalize(url) {
+    if (url.startsWith('@themes/')) {
+      const fullPath = path.resolve(
+        rootPathProject,
+        'node_modules/browser-extension-manager/dist/assets/themes',
+        url.replace('@themes/', '')
+      )
+
+      console.log('🧭 [SASS IMPORTER] canonicalize:', url)
+      console.log('✅ [SASS IMPORTER] Resolved to:', fullPath)
+
+      return new URL(`file://${fullPath}`)
+    }
+
+    return null
+  },
+
+  load(canonicalUrl) {
+    const fs = require('fs')
+    const filePath = canonicalUrl.pathname
+
+    console.log('📦 [SASS IMPORTER] Loading file from:', filePath)
+
+    if (fs.existsSync(filePath)) {
+      return {
+        contents: fs.readFileSync(filePath, 'utf8'),
+        syntax: 'scss'
+      }
+    }
+
+    console.log('❌ [SASS IMPORTER] File not found:', filePath)
+    return null
+  }
+}

package/dist/gulp/tasks/_package.js

@@ -0,0 +1,171 @@
+// Libraries
+const Manager = new (require('../../build.js'));
+const logger = Manager.logger('package');
+const path = require('path');
+const jetpack = require('fs-jetpack');
+const { series, parallel, watch } = require('gulp');
+const { execute, getKeys } = require('node-powertools');
+const JSON5 = require('json5');
+
+// Load package
+const package = Manager.getPackage('main');
+const project = Manager.getPackage('project');
+const rootPathPackage = Manager.getRootPath('main');
+const rootPathProject = Manager.getRootPath('project');
+
+// Glob
+const input = [
+  // Files to include
+  'dist/**/*',
+
+  // Files to exclude
+  // '!dist/**',
+];
+const output = 'dist';
+const delay = 250;
+
+// Supported browsers
+const BROWSERS = ['chrome', 'firefox', 'opera'];
+
+// Environment Check
+const targetBrowser = process.env.BROWSER;
+const isSpecificBrowser = targetBrowser && BROWSERS.includes(targetBrowser);
+
+// Special Compilation Task for manifest.json with default settings
+async function compileManifest(browser, complete) {
+  try {
+    const manifestPath = path.join('dist', 'manifest.json');
+    const outputPath = path.join('packaged', browser, 'manifest.json');
+    const configPath = path.join(rootPathPackage, 'dist', 'config', 'manifest.json');
+
+    // Read and parse using JSON5
+    const manifest = JSON5.parse(jetpack.read(manifestPath));
+    const defaultConfig = JSON5.parse(jetpack.read(configPath));
+
+    // Apply defaults
+    getKeys(defaultConfig).forEach(key => {
+      const defaultValue = key.split('.').reduce((o, k) => (o || {})[k], defaultConfig);
+      const userValue = key.split('.').reduce((o, k) => (o || {})[k], manifest);
+
+      if (Array.isArray(defaultValue) && Array.isArray(userValue)) {
+        // Merge arrays
+        const mergedArray = Array.from(new Set([...defaultValue, ...userValue]));
+        key.split('.').reduce((o, k, i, arr) => {
+          if (i === arr.length - 1) o[k] = mergedArray;
+          else o[k] = o[k] || {};
+          return o[k];
+        }, manifest);
+      } else if (userValue === undefined) {
+        // Apply default if user value doesn't exist
+        key.split('.').reduce((o, k, i, arr) => {
+          if (i === arr.length - 1) o[k] = defaultValue;
+          else o[k] = o[k] || {};
+          return o[k];
+        }, manifest);
+      }
+    });
+
+    // Save as regular JSON
+    jetpack.write(outputPath, JSON.stringify(manifest, null, 2));
+
+    logger.log(`Manifest compiled with defaults and saved for ${browser}`);
+  } catch (e) {
+    logger.error(`Error compiling manifest for ${browser}`, e);
+  }
+  return complete();
+}
+
+// Special Compilation Task for _locales
+async function compileLocales(browser, complete) {
+  try {
+    const localesDir = path.join('dist', '_locales');
+    const outputDir = path.join('packaged', browser, '_locales');
+
+    // Ensure the directory exists
+    jetpack.dir(outputDir);
+
+    // Process each locale file
+    jetpack.find(localesDir, { matching: '**/*.json' }).forEach(filePath => {
+      const relativePath = path.relative(localesDir, filePath);
+      const outputPath = path.join(outputDir, relativePath);
+
+      // Read and parse using JSON5
+      const localeData = JSON5.parse(jetpack.read(filePath));
+
+      // Save as regular JSON
+      jetpack.write(outputPath, JSON.stringify(localeData, null, 2));
+
+      logger.log(`Locale compiled and saved: ${outputPath}`);
+    });
+  } catch (e) {
+    logger.error(`Error compiling locales for ${browser}`, e);
+  }
+  return complete();
+}
+
+// Package Task for Each Browser
+async function packageBrowser(browser, complete) {
+  // Log
+  logger.log(`Starting packaging for ${browser}...`);
+
+  try {
+    const outputDir = `packaged/${browser}`;
+
+    // Ensure the directory exists
+    jetpack.dir(outputDir);
+
+    // Perform any browser-specific adjustments if needed
+    // await execute(`npx bxm setup --browser=${browser}`);
+
+    // Copy files to browser-specific directory
+    await execute(`cp -r dist/* ${outputDir}`);
+
+    // Compile manifest and locales
+    await compileManifest(browser, () => {});
+    await compileLocales(browser, () => {});
+
+    // Create packed extension (.zip)
+    if (Manager.isBuildMode()) {
+      await execute(`zip -r ${outputDir}.zip ${outputDir}`);
+    }
+
+    // Log completion
+    logger.log(`Finished packaging for ${browser}`);
+  } catch (e) {
+    logger.error(`Error packaging for ${browser}`, e);
+  }
+
+  return complete();
+}
+
+// Generate tasks for each browser
+const tasks = isSpecificBrowser
+  ? [packageBrowser.bind(null, targetBrowser)]
+  : BROWSERS.map((browser) => packageBrowser.bind(null, browser));
+
+// Watcher Task
+function packageWatcher(complete) {
+  // Quit if in build mode
+  if (Manager.isBuildMode()) {
+    logger.log('[watcher] Skipping watcher in build mode');
+    return complete();
+  }
+
+  // Log
+  logger.log('[watcher] Watching for changes...');
+
+  // Watch for changes in the dist folder
+  watch(input, { delay: delay }, parallel(...tasks))
+    .on('change', function (path) {
+      logger.log(`[watcher] File ${path} was changed`);
+    });
+
+  // Complete
+  return complete();
+}
+
+// Export tasks
+module.exports = series(
+  parallel(...tasks),
+  packageWatcher
+);

package/dist/gulp/tasks/developmentRebuild.js

@@ -8,12 +8,13 @@ const { execute } = require('node-powertools');
 // Load package
 const package = Manager.getPackage('main');
 const project = Manager.getPackage('project');
+const rootPathPackage = Manager.getRootPath('main');
+const rootPathProject = Manager.getRootPath('project');
 
 // Glob
 const input = [
   // Files to include
-  // `${__dirname}/../../defaults/dist/**/*`,
-  `${path.join(__dirname, '..', '..', 'defaults/dist')}/**/*`,
+  `${rootPathPackage}/dist/defaults/dist/**/*`,
 
   // Files to exclude
 ];

package/dist/gulp/tasks/distribute.js

@@ -11,6 +11,8 @@ const { execute } = require('node-powertools');
 const package = Manager.getPackage('main');
 const project = Manager.getPackage('project');
 const manifest = Manager.getManifest();
+const rootPathPackage = Manager.getRootPath('main');
+const rootPathProject = Manager.getRootPath('project');
 
 // Glob
 const input = [
@@ -86,7 +88,7 @@ function customPathTransform() {
 // Watcher task
 function distributeWatcher(complete) {
   // Quit if in build mode
-  if (process.env.BXM_ === 'true') {
+  if (Manager.isBuildMode()) {
     logger.log('[watcher] Skipping watcher in build mode');
     return complete();
   }

package/dist/gulp/tasks/icons.js

@@ -8,13 +8,13 @@ const responsive = require('gulp-responsive-modern');
 // Load package
 const package = Manager.getPackage('main');
 const project = Manager.getPackage('project');
+const rootPathPackage = Manager.getRootPath('main');
+const rootPathProject = Manager.getRootPath('project');
 
 // Glob
 const input = [
   // Files to include
-  // 'src/assets/images/**/*.{jpg,jpeg,png}',
-  // 'src/assets/images/icons/**/*.{jpg,jpeg,png}',
-  'src/assets/images/icons/icon.png',
+  'config/icon.{png,svg}',
 
   // Files to exclude
   // '!dist/**',
@@ -24,6 +24,9 @@ const delay = 250;
 
 // Main task
 function icons(complete) {
+  // Define sizes
+  const sizes = [1024, 512, 256, 128, 48, 32, 16];
+
   // Log
   logger.log('Starting...');
 
@@ -65,46 +68,16 @@ function icons(complete) {
   return src(files)
     .pipe(
       responsive({
-        '**/*.{jpg,jpeg,png}': [
-          // 1024 resized version in original format
-          {
-            width: 1024,
-            rename: { suffix: '-1024x' }
-          },
-          // 512 resized version in original format
-          {
-            width: 512,
-            rename: { suffix: '-512x' }
-          },
-          // 256 resized version in original format
-          {
-            width: 256,
-            rename: { suffix: '-256x' }
-          },
-          // 128 resized version in original format
-          {
-            width: 128,
-            rename: { suffix: '-128x' }
-          },
-          // 48 resized version in original format
-          {
-            width: 48,
-            rename: { suffix: '-48x' }
-          },
-          // 32 resized version in original format
-          {
-            width: 32,
-            rename: { suffix: '-32x' }
-          },
-          // 16 resized version in original format
-          {
-            width: 16,
-            rename: { suffix: '-16x' }
-          },
+        '**/*.{jpg,jpeg,png,svg}': [
+          // Generate configurations dynamically
+          ...sizes.map((size) => ({
+            width: size,
+            rename: { suffix: `-${size}x`, extname: '.png' },
+          })),
           // Original size in original format
           {
-            rename: { suffix: '' }
-          }
+            rename: { suffix: '', extname: '.png' },
+          },
         ]
       }, {
         quality: 100,