Initial plasmo setup

.editorconfig

@@ -1,7 +0,0 @@
-root = true
-
-[*]
-indent_size = 2
-indent_style = space
-end_of_line = lf
-insert_final_newline = true

.eslintrc.mjs

@@ -1,4 +1,7 @@
-module.exports = {
+/**
+ * @type {import('eslint').Linter.Config}
+ */
+export default {
   env: {
     browser: true,
   },

.github/workflows/submit.yml

@@ -0,0 +1,34 @@
+name: "Submit to Web Store"
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+      - uses: pnpm/action-setup@v2.2.4
+        with:
+          version: latest
+          run_install: true
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 16.x
+          cache: "pnpm"
+      - name: Build the extension
+        run: pnpm build
+      - name: Package the extension into a zip artifact
+        run: pnpm package
+      - name: Browser Platform Publish
+        uses: PlasmoHQ/bpp@v3
+        with:
+          keys: ${{ secrets.SUBMIT_KEYS }}
+          artifact: build/chrome-mv3-prod.zip

.gitignore

@@ -1,4 +1,39 @@
-node_modules/
+
-coverage
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-.env
+
-/dist
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

.npmrc

@@ -1,2 +0,0 @@
-registry=https://registry.npmjs.org/
-always-auth=true

.prettierrc

@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "trailingComma": "all",
-  "singleQuote": true
-}

.prettierrc.mjs

@@ -0,0 +1,20 @@
+/**
+ * @type {import('prettier').Options}
+ */
+export default {
+  printWidth: 120,
+  trailingComma: 'all',
+  singleQuote: true,
+  importOrder: [
+    '<BUILTIN_MODULES>', // Node.js built-in modules
+    '<THIRD_PARTY_MODULES>', // Imports not matched by other special words or groups.
+    '', // Empty line
+    '^@plasmo/(.*)$',
+    '',
+    '^@plasmohq/(.*)$',
+    '',
+    '^~(.*)$',
+    '',
+    '^[./]',
+  ],
+};

README.md

@@ -37,3 +37,35 @@ movie-web extension, allows providers to work without proxy
 - The popup will allow adding/removing the current tab domain to allowed domains list
 - The extension will not listen to any calls from disallowed domains
 - movie-web.app is default in the list of allowed domains
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+# or
+npm run dev
+```
+
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+
+## Making production build
+
+Run the following:
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+This should create a production bundle for your extension, ready to be zipped and published to the stores.
+
+## Submit to the webstores
+
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!

package.json

@@ -1,29 +1,31 @@
 {
-  "name": "extension",
+  "name": "@movie-web/extension",
-  "version": "1.0.0",
+  "displayName": "movie-web extension",
+  "version": "0.0.1",
   "description": "movie-web extension, allows providers to work without proxy",
-  "main": "index.js",
+  "author": "movie-web",
-  "type": "module",
   "scripts": {
-    "build": "vite build",
+    "dev": "plasmo dev",
-    "build:firefox": "vite build",
+    "build": "plasmo build",
-    "build:chrome": "vite build",
+    "package": "plasmo package",
-    "test": "vitest run",
     "lint": "eslint --ext .tsx,.ts src",
     "lint:fix": "eslint --fix --ext .tsx,.ts src",
     "lint:report": "eslint --ext .tsx,.ts --output-file eslint_report.json --format json src",
     "preinstall": "npx -y only-allow pnpm"
   },
-  "keywords": [],
-  "author": "movie-web",
-  "license": "MIT",
   "dependencies": {
-    "vite": "^5.0.10"
+    "@plasmohq/messaging": "^0.6.1",
+    "plasmo": "0.84.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.254",
+    "@types/chrome": "0.0.251",
-    "@types/lodash.merge": "^4.6.9",
+    "@types/node": "20.9.0",
-    "@types/node": "^20.10.5",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "prettier": "3.0.3",
+    "typescript": "5.2.2",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",
     "eslint": "^8.56.0",
@@ -31,8 +33,6 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.1",
+    "eslint-plugin-prettier": "^5.1.1"
-    "lodash.merge": "^4.6.2",
-    "vite-plugin-static-copy": "^1.0.0"
   }
 }

plugins/manifest.ts

@@ -1,46 +0,0 @@
-import { PluginOption, ResolvedConfig } from "vite";
-import path from "path";
-import fs from "fs";
-import merge from "lodash.merge";
-
-export type ManifestMergerOptions = {
-  output: string;
-  files: string[];
-}
-
-function mergeManifests(inputs: string[]): string {
-  const parsed = inputs.map(v => JSON.parse(v));
-  const output = {};
-  const merged = merge(output, ...parsed);
-  return JSON.stringify(merged, null, 2);
-}
-
-export const manifestMerge = (options: ManifestMergerOptions): PluginOption[] => {
-  const inputFiles = options.files.map(v=>fs.readFileSync(v, 'utf8'));
-  let config: ResolvedConfig | null = null;
-  let distPath: string | null = null;
-
-  return [
-    {
-      name: 'manifest-merger',
-      configResolved(resolvedConfig) {
-        config = resolvedConfig
-        distPath = path.resolve(config.build.outDir)
-      },
-      closeBundle() {
-        if (!config || !distPath) return
-        if (config.command === 'serve') {
-          return
-        }
-
-        fs.writeFileSync(
-          path.join(distPath ?? "", options.output),
-          mergeManifests(inputFiles),
-          {
-            encoding: 'utf8',
-          }
-        )
-      }
-    },
-  ]
-}

src/assets/manifest.chrome.json

@@ -1,5 +0,0 @@
-{
-  "background": {
-    "service_worker": "worker.js"
-  }
-}

src/assets/manifest.common.json

@@ -1,21 +0,0 @@
-{
-  "manifest_version": 3,
-  "name": "movie-web extension",
-  "version": "0.1",
-  "description": "Allows for sources to work without a proxy",
-  "icons": {
-    "16": "assets/icons/16.png"
-  },
-  "action": {
-    "default_title": "movie-web extension",
-    "default_popup": "popup.html"
-  },
-  "permissions": ["declarativeNetRequest"],
-  "host_permissions": ["<all_urls>"],
-  "web_accessible_resources": [
-    {
-      "resources": ["*.js.map"],
-      "matches": ["<all_urls>"]
-    }
-  ]
-}

src/assets/manifest.firefox.json

@@ -1,10 +0,0 @@
-{
-  "background": {
-    "scripts": ["worker.js"]
-  },
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "extension-firefox@movie-web.app"
-    }
-  }
-}

src/background/messages/proxy.ts

@@ -0,0 +1,24 @@
+import type { PlasmoMessaging } from '@plasmohq/messaging';
+
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  try {
+    const response = await fetch(req.body.url, {
+      headers: req.body.headers,
+    });
+    const body = await response.text();
+
+    res.send({
+      status: response.status,
+      statusText: response.statusText,
+      requestHeaders: req.body.headers,
+      responseHeaders: Object.fromEntries(response.headers.entries()),
+      body,
+    });
+  } catch (err) {
+    res.send({
+      error: err.message,
+    });
+  }
+};
+
+export default handler;

src/contents/movie-web.ts

@@ -0,0 +1,11 @@
+import type { PlasmoCSConfig } from 'plasmo';
+
+import { relayMessage } from '@plasmohq/messaging';
+
+export const config: PlasmoCSConfig = {
+  matches: ['https://movie-web.app/*', 'https://dev.movie-web.app/*', 'http://localhost:5173/*'],
+};
+
+relayMessage({
+  name: 'proxy',
+});

src/index.ts

@@ -1,36 +0,0 @@
-chrome.declarativeNetRequest.updateDynamicRules({
-  removeRuleIds: [666],
-  addRules: [
-    {
-      id: 666,
-      priority: 1,
-      condition: {
-        initiatorDomains: ['movie-web.app'],
-      },
-      action: {
-        type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
-        requestHeaders: [
-          {
-            header: 'X-Test',
-            operation: chrome.declarativeNetRequest.HeaderOperation.SET,
-            value: 'Hello world',
-          },
-        ],
-        responseHeaders: [
-          {
-            header: 'Access-Control-Allow-Origin',
-            operation: chrome.declarativeNetRequest.HeaderOperation.SET,
-            value: '*',
-          },
-          {
-            header: 'Access-Control-Allow-Methods',
-            operation: chrome.declarativeNetRequest.HeaderOperation.SET,
-            value: 'POST,GET,OPTIONS,PUT',
-          },
-        ],
-      },
-    },
-  ],
-});
-
-console.log('loaded extension');

src/popup.html

@@ -1,10 +0,0 @@
-<html>
-  <head>
-    <title>movie-web extension</title>
-    <link rel="stylesheet" href="./popup/styles.css" />
-  </head>
-  <body>
-    <script type="module" src="./popup/index.ts"></script>
-    <h1>This is the popup</h1>
-  </body>
-</html>

src/popup.tsx

@@ -0,0 +1,11 @@
+function IndexPopup() {
+  return (
+    <div style={{ width: 180 }}>
+      <p>
+        Extension running at version {chrome.runtime.getManifest().version}
+      </p>
+    </div>
+  )
+}
+
+export default IndexPopup

src/popup/index.ts

@@ -1 +0,0 @@
-console.log('popup js');

src/popup/styles.css

@@ -1,3 +0,0 @@
-.test {
-  color: blue
-}

tsconfig.json

@@ -1,23 +1,19 @@
 {
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    ".plasmo/index.d.ts",
+    "./**/*.ts",
+    "./**/*.tsx"
+  ],
   "compilerOptions": {
-    "target": "es2021",
-    "lib": ["es2021", "DOM"],
-    "module": "CommonJS",
-    "esModuleInterop": true,
-    "declaration": true,
-    "outDir": "./lib",
-    "strict": true,
-    "baseUrl": "src",
-    "experimentalDecorators": true,
-    "isolatedModules": false,
-    "skipLibCheck": true,
     "paths": {
-      "@/*": ["./*"]
+      "~*": [
-    }
+        "./src/*"
+      ]
     },
-  "include": ["src"],
+    "baseUrl": "."
-  "exclude": ["node_modules", "**/__tests__/*"],
-  "ts-node": {
-    "require": ["tsconfig-paths/register"]
   }
 }

vite.config.ts

@@ -1,49 +0,0 @@
-import { resolve, dirname } from 'path'
-import { defineConfig } from 'vite'
-import { manifestMerge } from './plugins/manifest';
-import { viteStaticCopy } from 'vite-plugin-static-copy'
-
-const staticAssets = [
-  'src/assets/icons/16.png',
-]
-
-export default defineConfig({
-  plugins: [
-    manifestMerge({
-      output: "manifest.json",
-      files: [
-        resolve(__dirname, 'src/assets/manifest.common.json'),
-        resolve(__dirname, 'src/assets/manifest.chrome.json')
-      ]
-    }),
-    viteStaticCopy({
-      targets: staticAssets.map(file => ({
-        src: resolve(__dirname, file),
-        dest: dirname(resolve(__dirname, file.replace(/^src/, 'dist'))),
-      }))
-    })
-  ],
-  root: "src",
-  build: {
-    emptyOutDir: true,
-    minify: false,
-    rollupOptions: {
-      output: [{
-        dir: "dist",
-        format: "es",
-        exports: "named",
-      }],
-      input: {
-        popup: resolve(__dirname, 'src/popup.html'),
-        worker: resolve(__dirname, 'src/index.ts'),
-      },
-    },
-    outDir: 'dist',
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'), // needed for it to work at all
-      fileName(format, entryName) {
-        return entryName + ".js";
-      },
-    },
-  },
-})