Change file structure

.eslintignore

@@ -1,8 +1,7 @@
 .DS_Store
 node_modules
-/build
-/.svelte-kit
-/package
+build
+.svelte-kit
 .env
 .env.*
 !.env.example

.eslintrc.cjs

@@ -1,11 +1,6 @@
 module.exports = {
 	root: true,
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
-		'prettier'
-	],
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 	parser: '@typescript-eslint/parser',
 	plugins: ['@typescript-eslint', 'simple-import-sort'],
 	parserOptions: {
@@ -19,15 +14,6 @@ module.exports = {
 		node: true,
 		webextensions: true
 	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	],
 	rules: {
 		'@typescript-eslint/ban-ts-comment': 0,
 		'simple-import-sort/imports': 'error',

.github/workflows/test.yaml

@@ -27,7 +27,7 @@ jobs:
             const puppeteer = require('puppeteer');
             const fetchVersionInfo = async () => {
               try {
-                const data = await fs.readFile('./static/manifest.json', 'utf8');
+                const data = await fs.readFile('./holo-key-manager-extension/static/manifest.json', 'utf8');
                 const manifest = JSON.parse(data);
                 const currentVersion = manifest.version;
                 const browser = await puppeteer.launch();
@@ -56,7 +56,7 @@ jobs:
         run: pnpm install --frozen-lockfile=false
 
       - name: Build extension
-        run: pnpm build
+        run: cd holo-key-manager-extension && pnpm build
 
       - name: Zip the build
         run: |

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
-/build
-/.svelte-kit
+build
+.svelte-kit
 /package
 .env
 .env.*

.prettierignore

@@ -1,11 +1,11 @@
 .DS_Store
 node_modules
-/build
-/.svelte-kit
-/package
+build
+.svelte-kit
 .env
 .env.*
 !.env.example
+package.json
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

.prettierrc

@@ -2,14 +2,5 @@
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-	"overrides": [
-		{
-			"files": "*.svelte",
-			"options": { "parser": "svelte" }
-		}
-	],
-	"tailwindAttributes": ["extraProps", "containerClasses"],
-	"tailwindFunctions": ["clsx"]
+	"printWidth": 100
 }

holo-key-manager-extension/.eslintrc.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:svelte/recommended",
+    "prettier",
+  ],
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 2020,
+    extraFileExtensions: [".svelte"],
+  },
+  overrides: [
+    {
+      files: ["*.svelte"],
+      parser: "svelte-eslint-parser",
+      parserOptions: {
+        parser: "@typescript-eslint/parser",
+      },
+    },
+  ],
+};

holo-key-manager-extension/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": { "parser": "svelte" }
+    }
+  ],
+  "tailwindAttributes": ["extraProps", "containerClasses"],
+  "tailwindFunctions": ["clsx"]
+}

holo-key-manager-extension/build-scripts/devFirefox.cjs

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+const archiver = require('archiver');
+
+const buildDir = path.resolve(__dirname, '../build');
+const firefoxDir = path.join(buildDir, 'firefox');
+
+// Copy build directory to firefox directory
+function copyDir(src, dest) {
+	execSync(`cp -r ${src} ${dest}`);
+}
+
+// Update manifest for Firefox
+function updateManifestForFirefox(directory) {
+	const manifestPath = path.join(directory, 'manifest.json');
+	const data = fs.readFileSync(manifestPath, 'utf8');
+	const manifest = JSON.parse(data);
+	const updatedManifest = {
+		...manifest,
+		background: {
+			scripts: ['scripts/background.js'],
+			type: 'module'
+		}
+	};
+	fs.writeFileSync(manifestPath, JSON.stringify(updatedManifest, null, 2), 'utf8');
+}
+
+// Archive directory
+function archiveDirectory(sourceDir, outPath) {
+	const archive = archiver('zip', { zlib: { level: 9 } });
+	const stream = fs.createWriteStream(outPath);
+
+	return new Promise((resolve, reject) => {
+		archive
+			.directory(sourceDir, false)
+			.on('error', (err) => reject(err))
+			.pipe(stream);
+
+		stream.on('close', () => resolve());
+		archive.finalize();
+	});
+}
+
+async function buildForFirefox() {
+	// Ensure firefox directory does not exist
+	if (fs.existsSync(firefoxDir)) {
+		execSync(`rm -rf ${firefoxDir}`);
+	}
+
+	// Copy build directory to firefox directory
+	copyDir(buildDir, firefoxDir);
+
+	updateManifestForFirefox(firefoxDir);
+
+	// Archive firefox directory
+	await archiveDirectory(firefoxDir, path.join(buildDir, 'firefox.zip'));
+
+	// Remove firefox directory
+	execSync(`rm -rf ${firefoxDir}`);
+
+	console.log('Firefox build is ready and archived.');
+}
+
+buildForFirefox();

holo-key-manager-extension/build-scripts/removeExportFromScript.cjs

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const fs = require('fs');
+
+const removeExportStatement = (directory, fileName) => {
+	console.log(`Removing "export {};" from ${fileName}`);
+	const filePath = path.join(directory, fileName);
+	const fileContent = fs.readFileSync(filePath, 'utf8').replace('export {};', '');
+
+	fs.writeFileSync(filePath, fileContent);
+	console.log(`"export {};" removed from: ${filePath}`);
+};
+
+['background.js', 'content.js'].forEach((file) =>
+	removeExportStatement(
+		path.resolve(__dirname, '../build/holo-key-manager-extension/scripts'),
+		file
+	)
+);

build-scripts/replaceForFirefox.cjs → holo-key-manager-extension/build-scripts/replaceForFirefox.cjs

@@ -23,7 +23,7 @@ fs.readFile(manifestPath, 'utf8', (err, data) => {
 	const updatedManifest = {
 		...manifest,
 		background: {
-			scripts: ['scripts/background.js'],
+			scripts: ['holo-key-manager-extension/scripts/background.js'],
 			type: 'module'
 		},
 		browser_specific_settings: {

holo-key-manager-extension/package.json

@@ -0,0 +1,60 @@
+{
+	"name": "holo-key-manager",
+	"version": "0.0.3",
+	"private": true,
+	"scripts": {
+		"build": "pnpm build:vite && pnpm build:script && pnpm build:removeExport && pnpm build:removeInline",
+		"buildDev": "pnpm build:vite && pnpm build:script && pnpm build:removeExport && pnpm build:removeInline && pnpm build:buildForFirefoxDev",
+		"build:vite": "vite build",
+		"build:script": "tsc --p scripts/tsconfig.json",
+		"build:removeExport": "node build-scripts/removeExportFromScript.cjs",
+		"build:removeInline": "node build-scripts/removeInlineScript.cjs",
+		"build:replaceForFirefox": "node build-scripts/replaceForFirefox.cjs",
+		"build:buildForFirefoxDev": "node build-scripts/devFirefox.cjs",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check 'src/**/*.{js,ts,svelte,json}' && eslint --fix 'src/**/*.{js,ts,svelte}'",
+		"format": "prettier --write 'src/**/*.{js,ts,svelte,json}'",
+		"prepare": "cd .. && husky install"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/kit": "2.0.2",
+		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"@tsconfig/node-lts": "^20.1.1",
+		"@types/chrome": "^0.0.254",
+		"@types/file-saver": "^2.0.7",
+		"@typescript-eslint/eslint-plugin": "^6.21.0",
+		"@typescript-eslint/parser": "^6.21.0",
+		"archiver": "^7.0.1",
+		"autoprefixer": "^10.4.18",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-simple-import-sort": "^10.0.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"husky": "^8.0.3",
+		"lint-staged": "^15.2.2",
+		"postcss": "^8.4.35",
+		"prettier": "^3.2.5",
+		"prettier-plugin-svelte": "^3.2.2",
+		"prettier-plugin-tailwindcss": "^0.5.11",
+		"svelte-check": "^3.6.6",
+		"svelte-file-dropzone": "^2.0.4",
+		"tslib": "^2.6.2",
+		"typescript": "^5.3.3",
+		"vite": "^5.1.4"
+	},
+	"type": "module",
+	"dependencies": {
+		"@tanstack/svelte-query": "^5.24.8",
+		"clsx": "^2.1.0",
+		"file-saver": "^2.0.5",
+		"hcSeedBundle": "github:mrruby/hcSeedBundle",
+		"jszip": "^3.10.1",
+		"svelte": "^4.2.12",
+		"tailwindcss": "^3.4.1",
+		"tiny-glob": "^0.2.9",
+		"zod": "^3.22.4"
+	}
+}

scripts/background.ts → holo-key-manager-extension/scripts/background.ts

@@ -1,4 +1,4 @@
-import type { Message } from '../common/types/message';
+import type { Message } from '@sharedTypes';
 
 let windowId: number | undefined;
 
@@ -58,7 +58,7 @@ const signInHandler = async (sendResponse: (response?: Message) => void) => {
 	}
 };
 
-chrome.runtime.onMessageExternal.addListener(
+chrome.runtime.onMessage.addListener(
 	(message: Message, sender, sendResponse: (response?: Message) => void) => {
 		if (message.action === 'SignIn') signInHandler(sendResponse);
 	}

holo-key-manager-extension/scripts/content.ts

@@ -0,0 +1,13 @@
+import type { Message } from '@sharedTypes';
+
+console.log('Content script loaded');
+const isMessageFromSelf = (event: MessageEvent) => event.source === window;
+const isSignInAction = (data: Message) => data.action === 'SignIn';
+
+window.addEventListener('message', async (event: MessageEvent) => {
+	if (!isMessageFromSelf(event)) return;
+	if (isSignInAction(event.data)) {
+		const response = await chrome.runtime.sendMessage(event.data);
+		window.postMessage({ ...response, id: event.data.id }, '*');
+	}
+});

holo-key-manager-extension/scripts/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"outDir": "../build",
+		"paths": {
+			"@sharedTypes": ["../../shared/types"],
+			"@sharedTypes/*": ["../../shared/types/*"]
+		}
+	},
+	"include": ["background.ts", "content.ts"]
+}