updated

.eslintrc.js

@@ -4,29 +4,35 @@ module.exports = {
     es2021: true,
     webextensions: true,
   },
-  // settings: {
-  //   'import/resolver': {
-  //     typescript: {},
-  //   },
-  // },
-  extends: ['plugin:react/recommended', 'airbnb'],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+  ],
+  plugins: ['react'],
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx'],
+        moduleDirectory: ['node_modules', 'src/'],
+      },
     },
-    ecmaVersion: 12,
-    sourceType: 'module',
   },
-  plugins: ['react', '@typescript-eslint'],
   rules: {
     'no-plusplus': 'off',
     'comma-dangle': 'off',
     'operator-linebreak': 'off',
     'no-use-before-define': 'off',
     'linebreak-style': 'off',
-    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.ts'] }],
+    'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.js'] }],
     'jsx-a11y/label-has-associated-control': 'off',
-    'prefer-destructuring': 'off'
+    'prefer-destructuring': 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+      },
+    ],
   },
 };

README.md

@@ -1,29 +0,0 @@
-# Chrome Extension boilerplate created with React Typescript
-
-## Getting started
-
-Create a project based on this boilerplate.
-
-```
-$ npx degit https://github.com/sivertschou/react-typescript-chrome-extension-boilerplate.git <project-name>
-```
-
-Navigate to the project directory and install the dependencies.
-
-```
-$ npm install
-```
-
-To build the extension, and rebuild it when the files are changed, run
-
-```
-$ npm start
-```
-
-After the project has been built, a directory named `dist` has been created. You have to add this directory to your Chrome browser:
-
-1. Open Chrome.
-2. Navigate to `chrome://extensions`.
-3. Enable _Developer mode_.
-4. Click _Load unpacked_.
-5. Select the `dist` directory.

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "reddit-toolkit",
+  "name": "vytal",
   "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "reddit-toolkit",
+  "name": "vytal",
   "version": "1.0.0",
   "description": "",
   "scripts": {

public/manifest.json

@@ -1,9 +1,9 @@
 {
-  "name": "Reddit Toolkit",
-  "description": "Reddit Toolkit",
+  "name": "Vytal",
+  "description": "Vytal",
   "manifest_version": 3,
   "version": "1.0.0",
-  "permissions": ["storage", "declarativeNetRequest"],
+  "permissions": [],
   "icons": {
     "16": "icon_16.png",
     "32": "icon_32.png",
@@ -21,21 +21,5 @@
   },
   "background": {
     "service_worker": "background.js"
-  },
-  "declarative_net_request": {
-    "rule_resources": [
-      {
-        "id": "ruleset_1",
-        "enabled": false,
-        "path": "rules.json"
   }
-    ]
-  },
-  "host_permissions": [
-    "*://reddit.com/*",
-    "*://www.reddit.com/*",
-    "*://np.reddit.com/*",
-    "*://amp.reddit.com/*",
-    "*://i.reddit.com/*"
-  ]
 }

public/rules.json

@@ -1,16 +0,0 @@
-[
-  {
-    "id": 1,
-    "priority": 1,
-    "action": {
-      "type": "redirect",
-      "redirect": {
-        "transform": { "scheme": "https", "host": "old.reddit.com" }
-      }
-    },
-    "condition": {
-      "urlFilter": "||reddit.com",
-      "resourceTypes": ["main_frame"]
-    }
-  }
-]

src/App.css

@@ -1,6 +1,5 @@
-.optionWrap {
-  display: flex;
-  align-items: center;
+.title {
+  font-weight: 600;
 }
 
 input {

src/App.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useEffect } from 'react';
+import './App.css';
+
+const App = () => {
+  useEffect(() => {
+    document.getElementById(
+      'screenSize'
+    ).innerHTML += `Screen resolution: ${window.screen.width}x${window.screen.height}`;
+  }, []);
+
+  return (
+    <div className="App">
+      <div className="title">Hardware</div>
+      <div className="item" id="screenSize" />
+    </div>
+  );
+};
+
+export default App;

src/App.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-import './App.css';
-
-const handleChange = (el: React.ChangeEvent<HTMLInputElement>) => {
-  chrome.storage.sync.set({ [el.target.id]: el.target.checked });
-  console.log(el.target.id);
-};
-
-// function getChecked(elID: string): boolean {
-//   // console.log(elID);
-//   chrome.storage.sync.get('oldRedirect', (res) => {
-//     console.log(res.oldRedirect + '123');
-//   });
-//   console.log('?');
-//   return true;
-// }
-
-const App = () => {
-  useEffect(() => {
-    chrome.storage.sync.get(null, (res) => {
-      const allKeys = Object.entries(res);
-      console.log(allKeys);
-      allKeys.forEach((item) => {
-        console.log(item);
-        const test: any = document.getElementById(item[0]);
-        test.checked = item[1];
-      });
-    });
-  }, []);
-
-  return (
-    <div className="App">
-      <label>
-        <div className="optionWrap">
-          <input
-            type="checkbox"
-            id="oldRedirect"
-            onChange={handleChange}
-          />
-          Redirect to old Reddit
-        </div>
-      </label>
-    </div>
-  );
-};
-
-export default App;

src/background.ts

@@ -1,16 +0,0 @@
-// Initialize storage values
-chrome.storage.sync.set({ oldRedirect: false });
-
-chrome.storage.onChanged.addListener((changes) => {
-  if ('oldRedirect' in changes) {
-    if (changes.oldRedirect.newValue) {
-      (chrome as any).declarativeNetRequest.updateEnabledRulesets({
-        enableRulesetIds: ['ruleset_1'],
-      });
-    } else {
-      (chrome as any).declarativeNetRequest.updateEnabledRulesets({
-        disableRulesetIds: ['ruleset_1'],
-      });
-    }
-  }
-});

src/custom.d.ts

@@ -1,4 +0,0 @@
-declare module "*.svg" {
-    const content: any;
-    export default content;
-  }

tsconfig.json

@@ -1,18 +0,0 @@
-{
-    "compilerOptions": {
-        "outDir": "./dist/",
-        "sourceMap": true,
-        "strict": true,
-        "noImplicitReturns": true,
-        "noImplicitAny": true,
-        "module": "es6",
-        "moduleResolution": "node",
-        "target": "es5",
-        "allowJs": true,
-        "jsx": "react",
-    },
-    "include": [
-        "./src/**/*",
-        "src/custom.d.ts"
-    ]
-}

webpack.config.js

@@ -4,9 +4,9 @@ const CopyPlugin = require("copy-webpack-plugin");
 
 const config = {
   entry: {
-    popup: path.join(__dirname, "src/popup.tsx"),
-    content: path.join(__dirname, "src/content.ts"),
-    background: path.join(__dirname, "src/background.ts"),
+    popup: path.join(__dirname, "src/popup.jsx"),
+    content: path.join(__dirname, "src/content.js"),
+    background: path.join(__dirname, "src/background.js"),
   },
   output: { path: path.join(__dirname, "dist"), filename: "[name].js" },
   module: {