[Feat] Refactor repo with build tools

.devcontainer/devcontainer.json

@@ -0,0 +1,24 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+  "name": "Node.js & TypeScript",
+  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
+
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  "features": {
+    "ghcr.io/devcontainers/features/common-utils:2": {}
+  }
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  // "postCreateCommand": "yarn install",
+
+  // Configure tool-specific properties.
+  // "customizations": {},
+
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root"
+}

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    }
+  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.nx
+dist

.prettierignore

@@ -0,0 +1,5 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+
+/.nx/cache

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 0x48piraj
+
+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

@@ -12,7 +12,6 @@
 
 <h1 align="center">FadBlock: Friendly Adblock for Youtube™</h1>
 
-
 This was posted over reddit a few months ago, [Apparently Ad Blockers are not allowed on Youtube. Is this a new thing they've implemented?](https://www.reddit.com/r/youtube/comments/13cfdbi/apparently_ad_blockers_are_not_allowed_on_youtube/?rdt=64832) and judging by all the recent comments and posts all over [r/youtube](https://www.reddit.com/r/youtube/), this change was just rolled out on a **larger scale**.
 
 This blocker is designed to monitor advertisements, automatically seek the ads and skip them. It's important to note that this doesn't classify as traditional ad blocking, as the ad content is technically "loaded".
@@ -33,7 +32,7 @@ This extension effectively eliminates all categories of YouTube advertisements:
 
 **Category 4:** Skippable 5-second-must-be-watched video ads, which may be positioned at the video's start, midway, or at the end.
 
-**Category 5:** Ads similar  to Category 4, but with two consecutive video ads instead of one.
+**Category 5:** Ads similar to Category 4, but with two consecutive video ads instead of one.
 
 **Category 6:** Inescapable 10-second video ads, which must be watched.
 
@@ -59,7 +58,6 @@ Unfortunately there’s no app or anything. You cannot install Chrome extensions
 
 > Note: You will have to leave YouTube app and watch over a browser (not very elegant, sorry)
 
-
 ## Install Fadblock to Opera, Edge, and Brave
 
 This section explains on how to install the extension utilizing the _developer mode_ as well as Chromium-based browsers,
@@ -74,12 +72,21 @@ This section explains on how to install the extension utilizing the _developer m
 
 **Brave Browser:** You can visit Chrome Web Store and download the extension (https://chrome.google.com/webstore/detail/fadblock/mdadjjfmjhfcibgfhfjbaiiljpllkbfc).
 
+## Building extensions
 
-## Show your support
+To build extensions:
 
-* Follow me on GitHub [@0x48piraj](https://github.com/0x48piraj) for updates.
-* I do not ask for donations, all I ask is that you star (⭐) this repository.
+1. Install required dependencies using `npm install`
+2. Build extension you want
+   - for Chrome `npx nx build chrome`
+   - for Firefox `npx nx build firefox`
+   - for Opera `npx nx build opera`
+3. Build artifacts will be stored in `dist/apps` folder under specific browser name
+
+## Show your support
 
+- Follow me on GitHub [@0x48piraj](https://github.com/0x48piraj) for updates.
+- I do not ask for donations, all I ask is that you star (⭐) this repository.
 
 ## Disclaimer
 
@@ -90,4 +97,4 @@ 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.
+software.

apps/chrome/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@nx/js/babel"]
+}

apps/chrome/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/chrome/manifest.json

@@ -0,0 +1,26 @@
+{
+  "manifest_version": 3,
+  "name": "FadBlock: Friendly Adblock for Youtube™",
+  "version": "1.3",
+  "description": "A fast, lightweight, and undetectable YouTube Ads Blocker for Chrome.",
+  "icons": {
+    "16": "shared-assets/icons/icon-16x16.png",
+    "48": "shared-assets/icons/icon-48x48.png",
+    "128": "shared-assets/icons/icon-120x120.png"
+  },
+  "action": {
+    "default_icon": "shared-assets/logo.png",
+    "default_popup": "popup/index.html"
+  },
+  "permissions": ["scripting", "tabs"],
+  "host_permissions": ["https://www.youtube.com/*"],
+  "background": {
+    "service_worker": "service-worker.js"
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://www.youtube.com/*"],
+      "js": ["main.js"]
+    }
+  ]
+}

apps/chrome/popup/app/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <fad-navigation></fad-navigation>
+    <fad-tabs></fad-tabs>
+    <fad-content></fad-content>
+  </body>
+</html>

apps/chrome/popup/app/jquery.ts

@@ -0,0 +1,3 @@
+import { initJQuery } from '@fadblock/popup';
+
+initJQuery();

apps/chrome/popup/app/main.ts

@@ -0,0 +1,19 @@
+import './jquery';
+import 'jquery-nice-select';
+import 'jquery-ui';
+import {
+  ContentElement,
+  ExtensionApiProvider,
+  NavigationElement,
+  TabsElement,
+} from '@fadblock/popup';
+
+import './styles.scss';
+
+if (window.chrome) {
+  ExtensionApiProvider.provide(chrome);
+}
+
+NavigationElement.define();
+TabsElement.define();
+ContentElement.define();

apps/chrome/popup/app/styles.scss

@@ -0,0 +1,27 @@
+@import 'jquery-ui/dist/themes/base/jquery-ui.css';
+@import 'jquery-nice-select/css/nice-select.css';
+
+body,
+html {
+  overflow: hidden;
+  margin: 0px;
+  width: 314px;
+  height: 510px;
+  background-color: #fff;
+}
+
+a:link {
+  color: #cc181e;
+  background-color: transparent;
+  text-decoration: none;
+}
+a:visited {
+  color: #da585c;
+  background-color: transparent;
+  text-decoration: none;
+}
+a:hover {
+  color: #d6464a;
+  background-color: transparent;
+  text-decoration: underline;
+}

apps/chrome/popup/rspack.config.js

@@ -0,0 +1,6 @@
+const { composePlugins, withNx, withWeb } = require('@nx/rspack');
+const { withUI } = require('../../../tools/rspack/ui-config');
+
+module.exports = composePlugins(withNx(), withWeb(), withUI(), (config) => {
+  return config;
+});

apps/chrome/popup/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node", "chrome"]
+  },
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
+  "include": ["app/**/*.ts"]
+}

apps/chrome/project.json

@@ -0,0 +1,89 @@
+{
+  "name": "chrome",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/chrome",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          { "command": "nx run chrome:build-extension" },
+          { "command": "nx run chrome:build-popup" }
+        ],
+        "parallel": false
+      }
+    },
+    "build-extension": {
+      "executor": "@nx/rspack:rspack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "target": "web",
+        "outputPath": "dist/apps/chrome",
+        "main": "apps/chrome/src/main.ts",
+        "tsConfig": "apps/chrome/tsconfig.app.json",
+        "rspackConfig": "apps/chrome/rspack.config.js",
+        "assets": [
+          "apps/chrome/shared-assets",
+          "apps/chrome/assets",
+          "apps/chrome/manifest.json"
+        ]
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production",
+          "optimization": true,
+          "sourceMap": false
+        }
+      }
+    },
+    "build-popup": {
+      "executor": "@nx/rspack:rspack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "target": "web",
+        "outputPath": "dist/apps/chrome/popup",
+        "main": "apps/chrome/popup/app/main.ts",
+        "indexHtml": "apps/chrome/popup/app/index.html",
+        "tsConfig": "apps/chrome/popup/tsconfig.app.json",
+        "rspackConfig": "apps/chrome/popup/rspack.config.js",
+        "assets": ["apps/chrome/shared-assets", "apps/chrome/assets"]
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production",
+          "optimization": true,
+          "sourceMap": false
+        }
+      }
+    },
+    "serve-popup": {
+      "executor": "@nx/rspack:dev-server",
+      "options": {
+        "buildTarget": "chrome:build-popup:development"
+      },
+      "configurations": {
+        "development": {},
+        "production": {
+          "buildTarget": "chrome:build-popup:production"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/chrome/**/*.ts"]
+      }
+    }
+  }
+}

apps/chrome/rspack.config.js

@@ -0,0 +1,11 @@
+const { composePlugins, withNx, withWeb } = require('@nx/rspack');
+const { withExtension } = require('../../tools/rspack/extention-config');
+
+module.exports = composePlugins(
+  withNx(),
+  withWeb(),
+  withExtension('chrome'),
+  (config) => {
+    return config;
+  },
+);

apps/chrome/shared-assets

@@ -0,0 +1 @@
+../../assets

apps/chrome/src/index.html

@@ -0,0 +1 @@
+<!doctype html>