Merge pull request #5 from monokaijs/webpack

🔨 implement webpack dev server as #4

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-react"
+  ],
+  "plugins": [
+  ]
+}

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .idea/
 .vscode/
+build/

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "requirePragma": false,
+  "arrowParens": "always"
+}

build-utils/build.js

@@ -0,0 +1,27 @@
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+process.env.ASSET_PATH = '/';
+
+var webpack = require('webpack'),
+  path = require('path'),
+  fs = require('fs'),
+  config = require('../webpack.config'),
+  ZipPlugin = require('zip-webpack-plugin');
+
+delete config.chromeExtensionBoilerplate;
+
+config.mode = 'production';
+
+var packageInfo = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
+
+config.plugins = (config.plugins || []).concat(
+  new ZipPlugin({
+    filename: `${packageInfo.name}-${packageInfo.version}.zip`,
+    path: path.join(__dirname, '../', 'zip'),
+  })
+);
+
+webpack(config, function (err) {
+  if (err) throw err;
+});

build-utils/env.js

@@ -0,0 +1,5 @@
+// tiny wrapper with default env vars
+module.exports = {
+  NODE_ENV: process.env.NODE_ENV || 'development',
+  PORT: process.env.PORT || 3000,
+};

build-utils/webserver.js

@@ -0,0 +1,56 @@
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+process.env.ASSET_PATH = '/';
+
+var WebpackDevServer = require('webpack-dev-server'),
+  webpack = require('webpack'),
+  config = require('../webpack.config'),
+  env = require('./env'),
+  path = require('path');
+
+var options = config.chromeExtensionBoilerplate || {};
+var excludeEntriesToHotReload = options.notHotReload || [];
+
+for (var entryName in config.entry) {
+  if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
+    config.entry[entryName] = [
+      'webpack/hot/dev-server',
+      `webpack-dev-server/client?hot=true&hostname=localhost&port=${env.PORT}`,
+    ].concat(config.entry[entryName]);
+  }
+}
+
+delete config.chromeExtensionBoilerplate;
+
+var compiler = webpack(config);
+
+var server = new WebpackDevServer(
+  {
+    https: false,
+    hot: true,
+    liveReload: false,
+    client: {
+      webSocketTransport: 'sockjs',
+    },
+    webSocketServer: 'sockjs',
+    host: 'localhost',
+    port: env.PORT,
+    static: {
+      directory: path.join(__dirname, '../build'),
+    },
+    devMiddleware: {
+      publicPath: `http://localhost:${env.PORT}/`,
+      writeToDisk: true,
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    allowedHosts: 'all',
+  },
+  compiler
+);
+
+(async () => {
+  await server.start();
+})();

package.json

@@ -1,9 +1,53 @@
 {
   "name": "mensaver",
   "author": "[email protected]",
+  "scripts": {
+    "build": "node build-utils/build.js",
+    "start": "node build-utils/webserver.js",
+    "prettier": "prettier --write '**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
+  },
   "dependencies": {},
   "devDependencies": {
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@types/chrome": "^0.0.209",
-    "react": "^18.2.0"
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "fs-extra": "^11.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "react": "^18.2.0",
+    "react-refresh-typescript": "^2.0.7",
+    "terser-webpack-plugin": "^5.3.6",
+    "webpack": "^5.75.0",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^9.1.2",
+    "babel-preset-react-app": "^10.0.1",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.31.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.27.4",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "file-loader": "^6.2.0",
+    "html-loader": "^4.2.0",
+    "prettier": "^2.8.3",
+    "react-refresh": "^0.14.0",
+    "sass": "^1.57.1",
+    "sass-loader": "^13.2.0",
+    "source-map-loader": "^3.0.1",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.4.2",
+    "type-fest": "^3.5.2",
+    "typescript": "^4.9.4",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "zip-webpack-plugin": "^4.0.1"
   }
 }

scripts/content.js → src/extraScripts/content.js

@@ -2,7 +2,7 @@ const insertScript = (path) => {
   const script = window.document.createElement('script');
   script.type = 'module';
   script.src = chrome.runtime.getURL(path);
-  const doc = window.document.body || window.document.head || window.document.documentElement;
+  const doc = window.document.head || window.document.body || window.document.documentElement;
   doc.prepend(script);
 }
 const insertStyle = (path) => {
@@ -12,6 +12,6 @@ const insertStyle = (path) => {
   const doc = window.document.body || window.document.head || window.document.documentElement;
   doc.prepend(link);
 }
-insertScript('/scripts/injected_script.js');
-insertStyle('/scripts/injected_styles.css');
+insertScript('/extraScripts/injected_script.js');
+insertStyle('/extraScripts/injected_styles.css');
 

scripts/injected_script.js → src/extraScripts/injected_script.js

@@ -26,6 +26,8 @@ Object.defineProperty(window, "__d", {
           const react = window.require('react');
           const originalComponent = orgFunc.bind(that)(...args);
           const props = args[0];
+          const user = props.user;
+          getUserMetaInfo(user.id).then(console.log);
           return SmartCover("comet", originalComponent);
         });
         patch('FriendingCometPYMKCard.react', this, arguments, function (orgFunc, that, args) {
@@ -70,16 +72,17 @@ const SmartCover = (message, children) => {
   })
 }
 
-const getUserMetaInfo = (uid) => {
-  return graphQl('6090218654334102', {
+const getUserMetaInfo = async (uid) => {
+  const response = await graphQl('6090218654334102', {
     "actionBarRenderLocation": "WWW_COMET_HOVERCARD",
     "context": "DEFAULT",
-    "entityID": "100089470155547",
+    "entityID": uid,
     "includeTdaInfo": false,
     "scale": 1,
     "__relay_internal__pv__GlobalPanelEnabledrelayprovider": false,
     "__relay_internal__pv__CometGlobalPanelEMCopresencerelayprovider": false
-  })
+  }).then(r => r.json());
+  return response.data;
 }
 
 const getMutualFriends = (uid) => {

manifest.json → src/manifest.json

@@ -3,9 +3,9 @@
   "version": "1.2.3",
   "name": "MenSaver",
   "description": "Just a stupid extension for smart gentlemen",
-  "options_page": "pages/options.html",
+  "options_page": "options.html",
   "background": {
-    "service_worker": "scripts/background.js"
+    "service_worker": "background.bundle.js"
   },
   "action": {
     "default_title": "MenSaver"
@@ -17,7 +17,7 @@
         "https://*.facebook.com/*"
       ],
       "js": [
-        "scripts/content.js"
+        "contentScript.bundle.js"
       ]
     }
   ],

src/pages/options/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Settings</title>
+</head>
+
+<body>
+<div id="app-container"></div>
+</body>
+</html>

src/pages/options/index.tsx

@@ -0,0 +1 @@
+console.log('loaded nicely!!');

tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noEmit": false,
+    "jsx": "react"
+  },
+  "include": ["src"],
+  "exclude": ["build", "node_modules"]
+}