Merge pull request #31 from omar-shahid/plasmo

Switch to plasmo + react

.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

@@ -0,0 +1,33 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+out/
+build/
+dist/
+
+# plasmo
+.plasmo
+
+# typescript
+.tsbuildinfo

.prettierrc.mjs

@@ -0,0 +1,26 @@
+/**
+ * @type {import('prettier').Options}
+ */
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+  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

@@ -3,15 +3,11 @@
 More about this project in this doc: https://docs.google.com/document/d/1Xpya6dcpieb21EmNE0-Mah7I8RzS6q4HO6ayqpE3PU4/
 
 ---
-
-# Hello World Chrome Extension
-
 ## Description
 
-This is a simple "Hello World" Chrome extension demonstrating basic functionality such as opening a popup, capturing screenshots, and interacting with the user.
+OpenStream is an open-source project for creating a free tool that records screen and webcam footage simultaneously. It's designed for content creators and developed collaboratively through our community on Discord.
 
 ## Features
-
 - **Popup Interface**: Click on the extension icon to open a popup window.
 - **Capture Screenshot**: Ability to capture a screenshot of the current tab.
 - **User Interaction**: A minimal user interface to interact with the extension.
@@ -20,23 +16,22 @@ This is a simple "Hello World" Chrome extension demonstrating basic functionalit
 
 To install this extension in your Chrome browser, follow these steps:
 
-1. **Download or Clone the Repository**: Download this repository to your local machine or use `git clone`.
-2. **Open Chrome Extensions**: Go to `chrome://extensions/` in your Chrome browser.
-3. **Enable Developer Mode**: Toggle on the "Developer mode" at the top right of the extensions page.
-4. **Load the Extension**: Click on "Load unpacked" and select the directory where you cloned or extracted this repository.
+1. **Download or Clone the Repository:**: Download this repository to your local machine or use `git clone`.
+2. **Install Dependencies:** Run `pnpm i`
+3. **Start Dev Server:** Run `pnpm dev`
+4. **Open Chrome Extensions**: Go to `chrome://extensions/` in your Chrome browser.
+5. **Enable Developer Mode**: Toggle on the "Developer mode" at the top right of the extensions page.
+6. **Load the Extension**: Click on "Load unpacked" and select the `build/chrome-mv3-dev` directory.
 
 ## Usage
 
 After installation, click on the extension icon in the Chrome toolbar to open the popup window. From there, you can interact with the features provided.
 
 ## Development
 
-This extension is developed using basic HTML, CSS, and JavaScript. The source code is structured as follows:
-
-- `manifest.json`: The manifest file for the Chrome extension.
-- `popup.html`: The HTML file for the popup interface.
-- `popup.js`: The JavaScript file handling the extension's logic.
-- `popup.css`: The CSS file for styling the popup.
+- This extension uses [**Plasmo Framework**](https://docs.plasmo.com/framework) with **React** and **Typescript**.
+- The entry point is `popup.tsx` (Think of this like main entry point in normal React App).
+- All of the manifest config lives in `"manifest"` field in `package.json`.
 
 ## Contributing
 

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "OpenStream",
+  "displayName": "Open stream",
+  "version": "0.0.1",
+  "description": "OpenStream is an open-source project for creating a free tool that records screen and webcam footage simultaneously. It's designed for content creators and developed collaboratively through our community on Discord.",
+  "author": "Plasmo Corp. <foss@plasmo.com>",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build",
+    "package": "plasmo package"
+  },
+  "dependencies": {
+    "plasmo": "0.84.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "4.1.1",
+    "@types/chrome": "0.0.258",
+    "@types/node": "20.11.5",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "prettier": "3.2.4",
+    "typescript": "5.3.3"
+  },
+  "manifest": {
+    "permissions": [
+      "activeTab"
+    ]
+  }
+}