Initial commit

pages/content-runtime/README.md

@@ -0,0 +1,15 @@
+# Content Runtime Script
+
+This tool allows users to inject scripts (Console and UI) during runtime into all pages specified by you.
+
+### Add New Script
+
+1. Copy `matches/example` folder and paste it with other name and edit content.
+2. Define somewhere(e.g in `popup`(You have declared it as default)):
+
+```ts
+await chrome.scripting.executeScript({
+  ...,
+  files: ['/content-runtime/{matches_folder_name}.iife.js'],
+})
+```

pages/content-runtime/build.mts

@@ -0,0 +1,49 @@
+import { resolve } from 'node:path';
+import { makeEntryPointPlugin } from '@extension/hmr';
+import { getContentScriptEntries, withPageConfig } from '@extension/vite-config';
+import { IS_DEV } from '@extension/env';
+import { build } from 'vite';
+import { build as buildTW } from 'tailwindcss/lib/cli/build';
+
+const rootDir = resolve(import.meta.dirname);
+const srcDir = resolve(rootDir, 'src');
+const matchesDir = resolve(srcDir, 'matches');
+
+const configs = Object.entries(getContentScriptEntries(matchesDir)).map(([name, entry]) => ({
+  name,
+  config: withPageConfig({
+    mode: IS_DEV ? 'development' : undefined,
+    resolve: {
+      alias: {
+        '@src': srcDir,
+      },
+    },
+    publicDir: resolve(rootDir, 'public'),
+    plugins: [IS_DEV && makeEntryPointPlugin()],
+    build: {
+      lib: {
+        name: name,
+        formats: ['iife'],
+        entry,
+        fileName: name,
+      },
+      outDir: resolve(rootDir, '..', '..', 'dist', 'content-runtime'),
+    },
+  }),
+}));
+
+const builds = configs.map(async ({ name, config }) => {
+  const folder = resolve(matchesDir, name);
+  const args = {
+    ['--input']: resolve(folder, 'index.css'),
+    ['--output']: resolve(rootDir, 'dist', name, 'index.css'),
+    ['--config']: resolve(rootDir, 'tailwind.config.ts'),
+    ['--watch']: IS_DEV,
+  };
+  await buildTW(args);
+  //@ts-expect-error This is hidden property into vite's resolveConfig()
+  config.configFile = false;
+  await build(config);
+});
+
+await Promise.all(builds);

pages/content-runtime/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@extension/content-runtime-script",
+  "version": "0.5.0",
+  "description": "chrome extension - content runtime script",
+  "type": "module",
+  "private": true,
+  "sideEffects": true,
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "clean:node_modules": "pnpx rimraf node_modules",
+    "clean:turbo": "rimraf .turbo",
+    "clean": "pnpm clean:turbo && pnpm clean:node_modules",
+    "build": "tsx build.mts",
+    "dev": "tsx build.mts",
+    "lint": "eslint .",
+    "lint:fix": "pnpm lint --fix",
+    "format": "prettier . --write --ignore-path ../../.prettierignore",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@extension/env": "workspace:*",
+    "@extension/ui": "workspace:*"
+  },
+  "devDependencies": {
+    "@extension/tsconfig": "workspace:*",
+    "@extension/vite-config": "workspace:*",
+    "@extension/hmr": "workspace:*",
+    "@extension/shared": "workspace:*"
+  }
+}

pages/content-runtime/src/matches/all/App.tsx

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+export default function App() {
+  useEffect(() => {
+    console.log('[CEB] All runtime content view loaded');
+  }, []);
+
+  return <div className="ceb-all-runtime-content-view-text">All runtime content view</div>;
+}

pages/content-runtime/src/matches/all/index.css

@@ -0,0 +1,5 @@
+@import '@extension/ui/global.css';
+
+.ceb-all-runtime-content-view-text {
+  font-size: 20px;
+}

pages/content-runtime/src/matches/all/index.tsx

@@ -0,0 +1,5 @@
+import inlineCss from '../../../dist/all/index.css?inline';
+import { initAppWithShadow } from '@extension/shared';
+import App from '@src/matches/all/App';
+
+initAppWithShadow({ id: 'CEB-extension-runtime-all', app: <App />, inlineCss });

pages/content-runtime/src/matches/example/App.tsx

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+export default function App() {
+  useEffect(() => {
+    console.log('[CEB] Example runtime content view loaded');
+  }, []);
+
+  return <div className="ceb-example-runtime-content-view-text">Example runtime content view</div>;
+}

pages/content-runtime/src/matches/example/index.css

@@ -0,0 +1,5 @@
+@import '@extension/ui/global.css';
+
+.ceb-example-runtime-content-view-text {
+  font-size: 20px;
+}

pages/content-runtime/src/matches/example/index.tsx

@@ -0,0 +1,5 @@
+import inlineCss from '../../../dist/example/index.css?inline';
+import { initAppWithShadow } from '@extension/shared';
+import App from '@src/matches/example/App';
+
+initAppWithShadow({ id: 'CEB-extension-runtime-example', app: <App />, inlineCss });

pages/content-runtime/tailwind.config.ts

@@ -0,0 +1,5 @@
+import { withUI } from '@extension/ui';
+
+export default withUI({
+  content: ['src/**/*.tsx'],
+});

pages/content-runtime/tailwind.d.ts

@@ -0,0 +1,5 @@
+declare module 'tailwindcss/lib/cli/build';
+declare module '*?inline' {
+  const src: string;
+  export default src;
+}

pages/content-runtime/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@extension/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@src/*": ["src/*"]
+    },
+    "types": ["chrome", "node", "./tailwind.d.ts"],
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src", "build.mts", "tailwind.config.ts"]
+}