Add static ffmpeg files

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Wilfison Batista
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,4 +1,4 @@
-# Screen Recorder
+# ScreenRecorder
 
 ## A Simple Screen Recorder for Busy People
 
@@ -9,3 +9,18 @@
 - [x] Record your microphone
 - [ ] Record your system audio
 - [X] Export to MP4
+
+### How to Install
+
+1. Download the [last package](https://github.com/wilfison/screen-recorder/releases).
+2. Go to the Extensions page by entering `chrome://extensions` in a new tab. Or, click the Extensions menu puzzle button and select Manage Extensions at the bottom of the menu.
+3. Enable `Developer Mode` by clicking the toggle switch next to Developer mode.
+4. Click the `Load unpacked` button and select the extension directory.
+
+### How to Contribute
+
+1. Fork this repository
+2. Create a new branch (`git checkout -b feature`)
+3. Commit your changes (`git commit -am 'Add a new feature'`)
+4. Push to the branch (`git push origin feature`)
+5. Create a new Pull Request

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && mv dist/index.html dist/popup.html",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -27,4 +27,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }
-}
+}

public/background.js

@@ -3,6 +3,6 @@ chrome.action.onClicked.addListener(() => {
     url: chrome.runtime.getURL("popup.html"),
     type: "popup",
     width: 600,
-    height: 600,
+    height: 700,
   });
 });

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
-  "name": "Screen Recorder",
-  "description": "Grava a tela, captura o áudio e o microfone",
+  "name": "ScreenRecorder",
+  "description": "A Simple Screen Recorder for Busy People",
   "version": "1.0",
   "permissions": [
     "desktopCapture",
@@ -23,5 +23,8 @@
     "16": "icon.png",
     "48": "icon.png",
     "128": "icon.png"
+  },
+  "content_security_policy": {
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
   }
 }

src/converter.ts

@@ -1,22 +1,15 @@
 import { FFmpeg } from '@ffmpeg/ffmpeg';
-import { fetchFile, toBlobURL } from '@ffmpeg/util';
+import { fetchFile } from '@ffmpeg/util';
 
 export async function convertToMp4(blob: Blob, onProgress: (progress: number) => void) {
-  const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/esm";
   const ffmpeg = new FFmpeg();
 
   ffmpeg.on('progress', ({ progress }) => onProgress(progress * 100));
 
   await ffmpeg.load({
-    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
-    wasmURL: await toBlobURL(
-      `${baseURL}/ffmpeg-core.wasm`,
-      "application/wasm"
-    ),
-    workerURL: await toBlobURL(
-      `${baseURL}/ffmpeg-core.worker.js`,
-      "text/javascript"
-    ),
+    coreURL: '/ffmpeg-core.js',
+    wasmURL: '/ffmpeg-core.wasm',
+    workerURL: '/ffmpeg-core.worker.js',
   });
 
   await ffmpeg.writeFile('recording.webm', await fetchFile(blob));

src/index.css

@@ -11,7 +11,7 @@
   -moz-osx-font-smoothing: grayscale;
 
   --bg-color: #f0f0f0;
-  --fg-color: #ffffff;
+  --fg-color: #333;
 
   --primary-color: #03a9f4;
   --warning-color: #ff7043;
@@ -29,6 +29,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --bg-color: #333;
+    --fg-color: #ffffff;
 
     --primary-disabled-color: #222;
     --primary-disabled-fg-color: #555;
@@ -119,6 +120,8 @@ video {
 }
 
 .btn {
+  --fg-color: #ffffff;
+
   flex: 1;
   display: flex;
   justify-content: center;