first meaningful commit

.editorconfig

@@ -0,0 +1,19 @@
+# See https://editorconfig.org for more about editor config.
+
+# top-most EditorConfig file
+root = true
+
+# Match all files
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+# Markdown files
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false

.gitignore

@@ -1,104 +1,20 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Optional npm cache directory
-.npm
+# dependencies
+/node_modules
 
-# Optional eslint cache
-.eslintcache
+# production
+/build
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
+# misc
+.DS_Store
 
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
+npm-debug.log*
 
-# TernJS port file
-.tern-port
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.prettierignore

@@ -0,0 +1,4 @@
+# See https://prettier.io/docs/en/ignore.html for more about ignoring files from Prettier.
+
+# Ignore artifacts:
+build

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "semi": true
+}

.yarnrc.yml

@@ -0,0 +1 @@
+yarnPath: .yarn/releases/yarn-3.4.1.cjs

README.md

@@ -1,3 +1,16 @@
-# Random Tabber
+# <img src="public/icons/icon-32.png" width="45" align="left"> Random Tabber
 
 Jump to a random Chrome/Edge tab
+
+## Features
+
+- Jump to a random tab in current window or in current profile
+- Optionally close previous tab
+
+## Installation
+
+[Chrome/Edge extension](https://example.com)
+
+---
+
+<a href="https://www.flaticon.com/free-icons/refresh-button" title="refresh button icons">Refresh button icons created by Smashicons - Flaticon</a>. Thanks!

config/paths.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const path = require('path');
+
+const PATHS = {
+  src: path.resolve(__dirname, '../src'),
+  build: path.resolve(__dirname, '../build'),
+};
+
+module.exports = PATHS;

config/webpack.common.js

@@ -0,0 +1,68 @@
+'use strict';
+
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const PATHS = require('./paths');
+
+// used in the module rules and in the stats exlude list
+const IMAGE_TYPES = /\.(png|jpe?g|gif|svg)$/i;
+
+// To re-use webpack configuration across templates,
+// CLI maintains a common webpack configuration file - `webpack.common.js`.
+// Whenever user creates an extension, CLI adds `webpack.common.js` file
+// in template's `config` folder
+const common = {
+  output: {
+    // the build folder to output bundles and assets in.
+    path: PATHS.build,
+    // the filename template for entry chunks
+    filename: '[name].js',
+  },
+  stats: {
+    all: false,
+    errors: true,
+    builtAt: true,
+    assets: true,
+    excludeAssets: [IMAGE_TYPES],
+  },
+  module: {
+    rules: [
+      // Help webpack in understanding CSS files imported in .js files
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+      // Check for images imported in .js files and
+      {
+        test: IMAGE_TYPES,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              outputPath: 'images',
+              name: '[name].[ext]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    // Copy static assets from `public` folder to `build` folder
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: '**/*',
+          context: 'public',
+        },
+      ],
+    }),
+    // Extract CSS into separate files
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+  ],
+};
+
+module.exports = common;

config/webpack.config.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const { merge } = require('webpack-merge');
+
+const common = require('./webpack.common.js');
+const PATHS = require('./paths');
+
+// Merge webpack configuration files
+const config = (env, argv) =>
+  merge(common, {
+    entry: {
+      // popup: PATHS.src + '/popup.ts',
+      // contentScript: PATHS.src + '/contentScript.ts',
+      background: PATHS.src + '/background.ts',
+    },
+    devtool: argv.mode === 'production' ? false : 'source-map',
+  });
+
+module.exports = config;

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "random-tabber",
+  "version": "0.1.0",
+  "description": "My Chrome Extension",
+  "private": true,
+  "scripts": {
+    "watch": "webpack --mode=development --watch --config config/webpack.config.js",
+    "build": "webpack --mode=production --config config/webpack.config.js",
+    "format": "prettier --write --ignore-unknown \"{config,public,src}/**/*.{html,css,js,ts,json}\" \"README.md\""
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.0.219",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.7.3",
+    "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^2.7.2",
+    "prettier": "^2.8.4",
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-merge": "^5.8.0"
+  },
+  "packageManager": "[email protected]"
+}

public/manifest.json

@@ -0,0 +1,18 @@
+{
+  "manifest_version": 3,
+  "name": "Random Tabber",
+  "version": "0.1.0",
+  "description": "Jump to a random Chrome/Edge tab",
+  "icons": {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "128": "icons/icon-128.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_title": "Random Tabber"
+  },
+  "permissions": ["storage"]
+}

src/background.ts

@@ -0,0 +1,8 @@
+chrome.action.onClicked.addListener(async ({ windowId, id }) => {
+  const allTabs = await chrome.tabs.query({ windowId });
+  const allOtherTabs = allTabs.filter((tab) => tab.id !== id);
+  const randomTab =
+    allOtherTabs[Math.floor(Math.random() * allOtherTabs.length)];
+
+  await chrome.tabs.highlight({ tabs: randomTab.index });
+});

tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "module": "ES2022",
+    "target": "ESNext",
+    "sourceMap": true
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}