From 71602d759338f624f8c9c7d4ff64e927246a921e Mon Sep 17 00:00:00 2001 From: Joff Tiquez Date: Wed, 31 May 2023 12:27:38 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8C=90=20feat:=20initialize=20browser?= =?UTF-8?q?=20extension?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change builder from webpack to vite to accommodate Quasar's support for Bex Manifest V3 --- .eslintignore | 2 - .eslintrc.js => .eslintrc.cjs | 23 +- .firebase/hosting.ZGlzdC9zcGE.cache | 48 - .gitignore | 4 - babel.config.cjs | 14 - src/index.template.html => index.html | 56 +- package.json | 47 +- postcss.config.cjs | 22 +- quasar.config.js | 210 +- .../content-css.css => assets/content.css} | 0 .../{js/background-hooks.js => background.js} | 32 +- src-bex/{js/dom-hooks.js => dom.js} | 0 .../{icon-120x120.png => icon-128x128.png} | Bin src-bex/js/background.js | 10 - src-bex/js/content-hooks.js | 19 - src-bex/js/content-script.js | 2 - src-bex/manifest.json | 60 +- src-bex/my-content-script.js | 40 + src/pages/IndexPage.vue | 31 +- src/router/index.js | 2 +- src/router/routes.js | 1 - yarn.lock | 4429 +++-------------- 22 files changed, 1023 insertions(+), 4029 deletions(-) rename .eslintrc.js => .eslintrc.cjs (88%) delete mode 100644 .firebase/hosting.ZGlzdC9zcGE.cache delete mode 100644 babel.config.cjs rename src/index.template.html => index.html (60%) rename src-bex/{css/content-css.css => assets/content.css} (100%) rename src-bex/{js/background-hooks.js => background.js} (67%) rename src-bex/{js/dom-hooks.js => dom.js} (100%) rename src-bex/icons/{icon-120x120.png => icon-128x128.png} (100%) delete mode 100644 src-bex/js/background.js delete mode 100644 src-bex/js/content-hooks.js delete mode 100644 src-bex/js/content-script.js create mode 100644 src-bex/my-content-script.js diff --git a/.eslintignore b/.eslintignore index f5bb416..263e5eb 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,8 +1,6 @@ /dist -/src-bex/www /src-capacitor /src-cordova /.quasar /node_modules .eslintrc.js -babel.config.js diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 88% rename from .eslintrc.js rename to .eslintrc.cjs index d4711a7..12efecb 100644 --- a/.eslintrc.js +++ b/.eslintrc.cjs @@ -5,14 +5,13 @@ module.exports = { root: true, parserOptions: { - parser: '@babel/eslint-parser', - ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features - sourceType: 'module' // Allows for the use of imports + ecmaVersion: '2021', // Allows for the parsing of modern ECMAScript features }, env: { + node: true, browser: true, - 'vue/setup-compiler-macros': true + 'vue/setup-compiler-macros': true, }, // Rules order is important, please avoid shuffling them @@ -27,7 +26,7 @@ module.exports = { // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability) // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) - 'standard' + 'standard', ], @@ -48,16 +47,19 @@ module.exports = { __QUASAR_SSR_PWA__: 'readonly', process: 'readonly', Capacitor: 'readonly', - chrome: 'readonly' + chrome: 'readonly', }, // add your custom rules here rules: { + // allow async-await 'generator-star-spacing': 'off', // allow paren-less arrow functions 'arrow-parens': 'off', 'one-var': 'off', + 'no-void': 'off', + 'multiline-ternary': 'off', 'import/first': 'off', 'import/named': 'error', @@ -67,20 +69,21 @@ module.exports = { 'import/extensions': 'off', 'import/no-unresolved': 'off', 'import/no-extraneous-dependencies': 'off', + 'prefer-promise-reject-errors': 'off', // allow debugger during development only 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // custom - 'semi': [2, 'always'], + semi: [2, 'always'], 'space-before-function-paren': [2, 'always'], 'keyword-spacing': [2, { before: true, after: true }], 'space-before-blocks': [2, 'always'], 'comma-dangle': [2, 'always-multiline'], 'no-console': 'off', 'no-multi-str': 'off', - 'curly': 1, + curly: 1, 'vue/multi-word-component-names': 'off', - } -} + }, +}; diff --git a/.firebase/hosting.ZGlzdC9zcGE.cache b/.firebase/hosting.ZGlzdC9zcGE.cache deleted file mode 100644 index 17db94d..0000000 --- a/.firebase/hosting.ZGlzdC9zcGE.cache +++ /dev/null @@ -1,48 +0,0 @@ -css/app.31d6cfe0.css,1684431677843,f1b651238a58fe290baec6c5e32f3bdb1943dd2bd582f02569231f7a757c7837 -css/991.af8e8957.css,1684431677844,e956814706bf25c77606ce25ff759ed903f08fb74a51511f77771d553664f42e -index.html,1684431677843,fc02bec540c4ce30eaa54a9d83366db560da6c51ecd258c5354e1cdaa0c971bb -icons/android-icon-36x36.png,1684431677842,0c184daf3fb93b1c958f813feaa3d1710dada512883cac068898bb7adb190b7c -icons/android-icon-72x72.png,1684431677842,103b3a22a09ed6c07581c99b85989522a036ee9193a0643d7d1be3423bbc8902 -icons/android-icon-48x48.png,1684431677842,8bde756187e5843871cf16576079ac4941098ed04bd58eadbae52b8891e56a0e -icons/android-icon-96x96.png,1684431677842,497ea8baf9fcf81b3f8f1857b6577591173d33d43c4b8534e7f33810d5f565cb -icons/apple-icon-114x114.png,1684431677842,2ecda02fa20b13d3a71bd3a080e9bbf58d3de8f10972bf897f3815d05959429d -icons/apple-icon-120x120.png,1684431677842,c8c060d960f29a83d4e31f21a35dd96fd5848d3879a8ca28c3aba06f3231a887 -icons/apple-icon-60x60.png,1684431677842,047124e0cfa334c6aa9cfec661e1474018591d3f3a385fe0beef6e07d8d0c361 -icons/apple-icon-57x57.png,1684431677842,eedeb9209383dd80cdd5ccc21600a01a963d5600b5ec5f0e8cf3cd0677367ea8 -icons/apple-icon-72x72.png,1684431677842,103b3a22a09ed6c07581c99b85989522a036ee9193a0643d7d1be3423bbc8902 -icons/browserconfig.xml,1684431677843,fae788f528ba8978ceb8d2d072992f9e7d7ca74aa2e021891e5322d822e2efe2 -icons/apple-icon-76x76.png,1684431677842,b10ccfb7468c51709823f0db15c2186688f03a9ad9e4dd3239dd43f422c76dd4 -icons/favicon-16x16.png,1684431677843,dd39b8aa3e6350841b402760890e32705568dcf8f4e98a51cbf2ab9b58639982 -icons/favicon-32x32.png,1684431677843,72ba72ab7374ced3177f4b4bca57de355b583f17fcdcbb75db869c9d1f08e9cf -icons/manifest.json,1684431677843,97c392941aa3243bfab325077167766abe6c073e3ff5e61a4e1b884309e6599b -icons/favicon.ico,1684431677843,b8d8d309d985b0cc9fe4bfa4bf0923042292eae48008d330f7585ba5541f1e92 -icons/favicon-96x96.png,1684431677843,497ea8baf9fcf81b3f8f1857b6577591173d33d43c4b8534e7f33810d5f565cb -js/257.c7bb8a46.js,1684431677841,3c98001d7ed64cbaa0e264b28468d2deea5c66b04664c7b43f2a245e25ade664 -icons/ms-icon-70x70.png,1684431677843,d4184208ced8c380d83a85274cfb12759e90b1820e84b43165a915f247ff6781 -js/533.0a313bab.js,1684431677841,04f0bc0329892453e28a11d893371befd51907bd8f7079ac8cf772d96f5d5e46 -js/501.5e10d333.js,1684431677841,4b09ff8575000e4f4df5eadce98f87a7569df79e50efcd7ad27f4b4123e5f4ed -js/991.e7a7c4f9.js,1684431677841,bc16c75eb0e1e37498dc06fb6ace0d294ec9477d03194a033dafdde5e2b91da3 -js/871.736d8c77.js,1684431677841,352f4af906d98a154a5464b099ced2fe98e247af60e130639e259874cf0b4fbe -js/app.18c0ea70.js,1684431677844,24bc31fd9a19f7d2102185328534359a988f1c28c4baae926b1690840de3cd44 -fonts/KFOkCnqEu92Fr1MmgVxIIzQ.68bb21d0.woff,1684431677841,91ea15d28cbc37cd71b227769fb47e1756445a9e3a2006cffacf70ad9316f499 -fonts/KFOlCnqEu92Fr1MmEU9fBBc-.48af7707.woff,1684431677841,a7996219d201ef409b538409ffa7a260d4a3ea9b23d54ffa52af32395ac75943 -fonts/KFOlCnqEu92Fr1MmSU5fBBc-.c2f7ab22.woff,1684431677841,ab7f0202929700f8ef0460551a21eedb6ef97413b39f7f47d7739f611ead1e95 -fonts/KFOlCnqEu92Fr1MmWUlfBBc-.77ecb942.woff,1684431677841,a5745f735d5edc5ed1a3f8fe6555e68c1db63dcc5a78bf70171445b2bda59406 -icons/android-icon-144x144.png,1684431677842,b49f72fdcdede267016e0c9c70d59a9cd62337fe1db168ba3e4c195fc6004fd3 -fonts/KFOlCnqEu92Fr1MmYUtfBBc-.f5677eb2.woff,1684431677841,7e6ff321435fa63fe2d29e8a108ac0f0a4fbad70717666a83aa9b14aa42d5d28 -fonts/KFOmCnqEu92Fr1Mu4mxM.f1e2a767.woff,1684431677841,c87266e360da436f6ee30de1fc2f13a9f1ef5d0487de4a501091e447982e616d -icons/android-icon-192x192.png,1684431677842,6c72543910c665471e197ff04f508b9f08e5626948f1112c8a2359aba1698d97 -icons/apple-icon-144x144.png,1684431677842,b49f72fdcdede267016e0c9c70d59a9cd62337fe1db168ba3e4c195fc6004fd3 -icons/apple-icon-152x152.png,1684431677842,822f826fa17e46aa7c732e985ea3cf06a6ab50780a35937ebe53bdd275877950 -icons/apple-icon-180x180.png,1684431677842,ea1944bbf48ba9b119002e139ce42e9d5242c2cea793959e6e96966c8c76025d -icons/apple-icon-precomposed.png,1684431677843,3a88f7b70dfcdc7a224a97862f6def06c7731d74a84c7822ef05a8bc80f30b9a -icons/apple-icon.png,1684431677843,3a88f7b70dfcdc7a224a97862f6def06c7731d74a84c7822ef05a8bc80f30b9a -icons/ms-icon-144x144.png,1684431677843,b49f72fdcdede267016e0c9c70d59a9cd62337fe1db168ba3e4c195fc6004fd3 -icons/ms-icon-150x150.png,1684431677843,678e3838a1ee58615dd0577268c44b179270203bd5fa867c64a2caf1c1d389d3 -favicon.ico,1684431677841,22fa779f7807c0149a7c0c161b00655977767c2f7d5c3f6ea4a418c6ccea453c -icons/ms-icon-310x310.png,1684431677843,58d774f4bbddea94e2e314a237b8fdf3eb17c64e8af0e7fa57458f4e0968a9e5 -fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.c5371cfb.woff2,1684431677841,415319a65ebbae03794f677a46ceba9420002ec35b0f196f225c94d3b9298d1e -css/vendor.f0a19ecc.css,1684431677844,81df4c3abeaa868b119abbd79baeab55079d79f920c32aac0d410f964bd8e391 -fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.4d73cb90.woff,1684431677841,f1274ddc3e217e312a25e9fd30e95bd7b448cde3d26f74b9313efa47826cf5c4 -img/faker-js-ui-logo.01d9169f.png,1684431677841,505fffc14e9ba5024c2b4a6a4b35555fe2f710ccc7070b01bc21424f8023864c -js/vendor.1771ddc2.js,1684431677844,089e13c138db66d071fee629a1351345c421fd52e68bfaac4dfefb982fa8b5d0 diff --git a/.gitignore b/.gitignore index 553e134..06ff1aa 100644 --- a/.gitignore +++ b/.gitignore @@ -16,10 +16,6 @@ node_modules /src-capacitor/www /src-capacitor/node_modules -# BEX related directories and files -/src-bex/www -/src-bex/js/core - # Log files npm-debug.log* yarn-debug.log* diff --git a/babel.config.cjs b/babel.config.cjs deleted file mode 100644 index 063ef53..0000000 --- a/babel.config.cjs +++ /dev/null @@ -1,14 +0,0 @@ -/* eslint-disable */ - -module.exports = api => { - return { - presets: [ - [ - '@quasar/babel-preset-app', - api.caller(caller => caller && caller.target === 'node') - ? { targets: { node: 'current' } } - : {} - ] - ] - } -} diff --git a/src/index.template.html b/index.html similarity index 60% rename from src/index.template.html rename to index.html index b9a8ac5..db91833 100644 --- a/src/index.template.html +++ b/index.html @@ -6,44 +6,46 @@ <%= productName %> - - - - + + + + + content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>" /> - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - -
+ \ No newline at end of file diff --git a/package.json b/package.json index 11d54e0..543580b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "faker-js-ui", "version": "0.3.1", - "description": "Use Faker.js UI to easiliy generate fake (but realistic) data for testing and development using Faker.js", + "description": "Simple and intuitive UI for Faker.js", "productName": "Faker.js UI", "author": "Joff Tiquez ", "private": true, @@ -14,10 +14,10 @@ "build:bex": "quasar build -m bex" }, "dependencies": { - "@faker-js/faker": "^8.0.1", + "@faker-js/faker": "^8.0.2", "@quasar/extras": "^1.0.0", "axios": "^1.2.1", - "core-js": "^3.6.5", + "events": "^3.3.0", "lodash": "^4.17.21", "pinia": "^2.0.11", "quasar": "^2.6.0", @@ -26,30 +26,37 @@ "vue-router": "^4.0.0" }, "devDependencies": { - "@babel/eslint-parser": "^7.13.14", - "@quasar/app-webpack": "^3.0.0", + "@intlify/vite-plugin-vue-i18n": "^3.3.1", + "@quasar/app-vite": "^1.0.0", + "autoprefixer": "^10.4.2", "eslint": "^8.10.0", "eslint-config-standard": "^17.0.0", "eslint-plugin-import": "^2.19.1", "eslint-plugin-n": "^15.0.0", "eslint-plugin-promise": "^6.0.0", "eslint-plugin-vue": "^9.0.0", - "eslint-webpack-plugin": "^3.1.1" + "postcss": "^8.4.14" }, - "browserslist": [ - "last 10 Chrome versions", - "last 10 Firefox versions", - "last 4 Edge versions", - "last 7 Safari versions", - "last 8 Android versions", - "last 8 ChromeAndroid versions", - "last 8 FirefoxAndroid versions", - "last 10 iOS versions", - "last 5 Opera versions" - ], "engines": { - "node": ">= 12.22.1", + "node": "^18 || ^16 || ^14.19", "npm": ">= 6.13.4", "yarn": ">= 1.21.1" - } -} + }, + "main": "quasar.config.js", + "repository": { + "type": "git", + "url": "git+https://github.com/jofftiquez/faker-js-ui.git" + }, + "keywords": [ + "faker", + "fakerjs", + "fakerjsui", + "javascript", + "browser-extension" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/jofftiquez/faker-js-ui/issues" + }, + "homepage": "https://github.com/jofftiquez/faker-js-ui#readme" +} \ No newline at end of file diff --git a/postcss.config.cjs b/postcss.config.cjs index 0ee0d8c..94b7b1c 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -3,7 +3,25 @@ module.exports = { plugins: [ - // to edit target browsers: use "browserslist" field in package.json - require('autoprefixer') + // https://github.com/postcss/autoprefixer + require('autoprefixer')({ + overrideBrowserslist: [ + 'last 4 Chrome versions', + 'last 4 Firefox versions', + 'last 4 Edge versions', + 'last 4 Safari versions', + 'last 4 Android versions', + 'last 4 ChromeAndroid versions', + 'last 4 FirefoxAndroid versions', + 'last 4 iOS versions' + ] + }) + + // https://github.com/elchininet/postcss-rtlcss + // If you want to support RTL css, then + // 1. yarn/npm install postcss-rtlcss + // 2. optionally set quasar.config.js > framework > lang to an RTL language + // 3. uncomment the following line: + // require('postcss-rtlcss') ] } diff --git a/quasar.config.js b/quasar.config.js index 85cae5c..1a29daf 100644 --- a/quasar.config.js +++ b/quasar.config.js @@ -6,29 +6,34 @@ */ // Configuration for your app -// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js - -const ESLintPlugin = require('eslint-webpack-plugin'); +// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js const { configure } = require('quasar/wrappers'); +const path = require('path'); -module.exports = configure(function (ctx) { +module.exports = configure(function (/* ctx */) { return { - // https://v2.quasar.dev/quasar-cli-webpack/supporting-ts - supportTS: false, + eslint: { + // fix: true, + // include: [], + // exclude: [], + // rawOptions: {}, + warnings: true, + errors: true, + }, - // https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature + // https://v2.quasar.dev/quasar-cli/prefetch-feature // preFetch: true, // app boot file (/src/boot) // --> boot files are part of "main.js" - // https://v2.quasar.dev/quasar-cli-webpack/boot-files + // https://v2.quasar.dev/quasar-cli/boot-files boot: [ 'i18n', 'axios', ], - // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css + // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css css: [ 'app.scss', ], @@ -47,47 +52,54 @@ module.exports = configure(function (ctx) { 'material-icons', // optional, you are not bound to it ], - // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build + // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build build: { - vueRouterMode: 'hash', // available values: 'hash', 'history' + target: { + browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'], + node: 'node16', + }, - // transpile: false, - // publicPath: '/', + vueRouterMode: 'hash', // available values: 'hash', 'history' + // vueRouterBase, + // vueDevtools, + // vueOptionsAPI: false, - // Add dependencies for transpiling with Babel (Array of string/regex) - // (from node_modules, which are by default not transpiled). - // Applies only if "transpile" is set to true. - // transpileDependencies: [], + // rebuildCache: true, // rebuilds Vite/linter/etc cache on startup - // rtl: true, // https://quasar.dev/options/rtl-support - // preloadChunks: true, - // showProgress: false, - // gzip: true, + // publicPath: '/', // analyze: true, - - // Options below are automatically set depending on the env, set them if you want to override - // extractCSS: false, - - // https://v2.quasar.dev/quasar-cli-webpack/handling-webpack - // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain - - chainWebpack (chain) { - chain.plugin('eslint-webpack-plugin') - .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]); - }, - + // env: {}, + // rawDefine: {} + // ignorePublicFolder: true, + // minify: false, + // polyfillModulePreload: true, + // distDir + + // extendViteConf (viteConf) {}, + // viteVuePluginOptions: {}, + + vitePlugins: [ + ['@intlify/vite-plugin-vue-i18n', { + // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false` + // compositionOnly: false, + + // if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}', + // you need to set `runtimeOnly: false` + // runtimeOnly: false, + + // you need to set i18n resource including paths ! + include: path.resolve(__dirname, './src/i18n/**'), + }], + ], }, - // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer + // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer devServer: { - server: { - type: 'http', - }, - port: 8080, + // https: true open: true, // opens browser window automatically }, - // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework + // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework framework: { config: {}, @@ -109,11 +121,29 @@ module.exports = configure(function (ctx) { }, // animations: 'all', // --- includes all animations - // https://quasar.dev/options/animations + // https://v2.quasar.dev/options/animations animations: [], - // https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr + // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#property-sourcefiles + // sourceFiles: { + // rootComponent: 'src/App.vue', + // router: 'src/router/index', + // store: 'src/store/index', + // registerServiceWorker: 'src-pwa/register-service-worker', + // serviceWorker: 'src-pwa/custom-service-worker', + // pwaManifestFile: 'src-pwa/manifest.json', + // electronMain: 'src-electron/electron-main', + // electronPreload: 'src-electron/electron-preload' + // }, + + // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr ssr: { + // ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name! + // will mess up SSR + + // extendSSRWebserverConf (esbuildConf) {}, + // extendPackageJson (json) {}, + pwa: false, // manualStoreHydration: true, @@ -122,83 +152,42 @@ module.exports = configure(function (ctx) { prodPort: 3000, // The default port that the production server should use // (gets superseded if process.env.PORT is specified at runtime) - maxAge: 1000 * 60 * 60 * 24 * 30, - // Tell browser when a file from the server should expire from cache (in ms) - - chainWebpackWebserver (chain) { - chain.plugin('eslint-webpack-plugin') - .use(ESLintPlugin, [{ extensions: ['js'] }]); - }, - middlewares: [ - ctx.prod ? 'compression' : '', 'render', // keep this as last one ], }, - // https://v2.quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa + // https://v2.quasar.dev/quasar-cli/developing-pwa/configuring-pwa pwa: { - workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest' - workboxOptions: {}, // only for GenerateSW - - // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts]) - // if using workbox in InjectManifest mode - - chainWebpackCustomSW (chain) { - chain.plugin('eslint-webpack-plugin') - .use(ESLintPlugin, [{ extensions: ['js'] }]); - }, - - manifest: { - name: 'Faker.js UI', - short_name: 'Faker.js UI', - description: 'Generate and fill up forms using faker.js', - display: 'standalone', - orientation: 'portrait', - background_color: '#ffffff', - theme_color: '#027be3', - icons: [ - { - src: 'icons/icon-128x128.png', - sizes: '128x128', - type: 'image/png', - }, - { - src: 'icons/icon-192x192.png', - sizes: '192x192', - type: 'image/png', - }, - { - src: 'icons/icon-256x256.png', - sizes: '256x256', - type: 'image/png', - }, - { - src: 'icons/icon-384x384.png', - sizes: '384x384', - type: 'image/png', - }, - { - src: 'icons/icon-512x512.png', - sizes: '512x512', - type: 'image/png', - }, - ], - }, + workboxMode: 'generateSW', // or 'injectManifest' + injectPwaMetaTags: true, + swFilename: 'sw.js', + manifestFilename: 'manifest.json', + useCredentialsForManifestTag: false, + // useFilenameHashes: true, + // extendGenerateSWOptions (cfg) {} + // extendInjectManifestOptions (cfg) {}, + // extendManifestJson (json) {} + // extendPWACustomSWConf (esbuildConf) {} }, - // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova + // Full list of options: https://v2.quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova cordova: { // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing }, - // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor + // Full list of options: https://v2.quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor capacitor: { hideSplashscreen: true, }, - // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron + // Full list of options: https://v2.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron electron: { + // extendElectronMainConf (esbuildConf) + // extendElectronPreloadConf (esbuildConf) + + inspectPort: 5858, + bundler: 'packager', // 'packager' or 'builder' packager: { @@ -219,19 +208,16 @@ module.exports = configure(function (ctx) { appId: 'faker-js-ui', }, + }, - // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain - - chainWebpackMain (chain) { - chain.plugin('eslint-webpack-plugin') - .use(ESLintPlugin, [{ extensions: ['js'] }]); - }, - - chainWebpackPreload (chain) { - chain.plugin('eslint-webpack-plugin') - .use(ESLintPlugin, [{ extensions: ['js'] }]); - }, + // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex + bex: { + contentScripts: [ + 'my-content-script', + ], + // extendBexScriptsConf (esbuildConf) {} + // extendBexManifestJson (json) {} }, }; }); diff --git a/src-bex/css/content-css.css b/src-bex/assets/content.css similarity index 100% rename from src-bex/css/content-css.css rename to src-bex/assets/content.css diff --git a/src-bex/js/background-hooks.js b/src-bex/background.js similarity index 67% rename from src-bex/js/background-hooks.js rename to src-bex/background.js index 684eb27..c1dc8a6 100644 --- a/src-bex/js/background-hooks.js +++ b/src-bex/background.js @@ -1,19 +1,37 @@ -// Hooks added here have a bridge allowing communication between the BEX Background Script and the BEX Content Script. -// Note: Events sent from this background script using `bridge.send` can be `listen`'d for by all client BEX bridges for this BEX - -// More info: https://quasar.dev/quasar-cli/developing-browser-extensions/background-hooks import { bexBackground } from 'quasar/wrappers'; +chrome.runtime.onInstalled.addListener(() => { + chrome.action.onClicked.addListener((/* tab */) => { + // Opens our extension in a new browser window. + // Only if a popup isn't defined in the manifest. + chrome.tabs.create({ + url: chrome.runtime.getURL('www/index.html'), + }, (/* newTab */) => { + // Tab opened. + }); + }); +}); + export default bexBackground((bridge /* , allActiveConnections */) => { + bridge.on('log', ({ data, respond }) => { + console.log(`[BEX] ${data.message}`, ...(data.data || [])); + respond(); + }); + + bridge.on('getTime', ({ respond }) => { + respond(Date.now()); + }); + bridge.on('storage.get', ({ data, respond }) => { - if (data.key === null) { + const { key } = data; + if (key === null) { chrome.storage.local.get(null, items => { // Group the values up into an array to take advantage of the bridge's chunk splitting. respond(Object.values(items)); }); } else { - chrome.storage.local.get([data.key], items => { - respond(items[data.key]); + chrome.storage.local.get([key], items => { + respond(items[key]); }); } }); diff --git a/src-bex/js/dom-hooks.js b/src-bex/dom.js similarity index 100% rename from src-bex/js/dom-hooks.js rename to src-bex/dom.js diff --git a/src-bex/icons/icon-120x120.png b/src-bex/icons/icon-128x128.png similarity index 100% rename from src-bex/icons/icon-120x120.png rename to src-bex/icons/icon-128x128.png diff --git a/src-bex/js/background.js b/src-bex/js/background.js deleted file mode 100644 index 91f0c8d..0000000 --- a/src-bex/js/background.js +++ /dev/null @@ -1,10 +0,0 @@ -// Background code goes here -chrome.browserAction.onClicked.addListener((/* tab */) => { - // Opens our extension in a new browser window. - // Only if a popup isn't defined in the manifest. - chrome.tabs.create({ - url: chrome.extension.getURL('www/index.html'), - }, (/* newTab */) => { - // Tab opened. - }); -}); diff --git a/src-bex/js/content-hooks.js b/src-bex/js/content-hooks.js deleted file mode 100644 index cfe397f..0000000 --- a/src-bex/js/content-hooks.js +++ /dev/null @@ -1,19 +0,0 @@ -// Hooks added here have a bridge allowing communication between the BEX Content Script and the Quasar Application. -// More info: https://quasar.dev/quasar-cli/developing-browser-extensions/content-hooks -import { bexContent } from 'quasar/wrappers'; - -export default bexContent((/* bridge */) => { - // Hook into the bridge to listen for events sent from the client BEX. - /* - bridge.on('some.event', event => { - if (event.data.yourProp) { - // Access a DOM element from here. - // Document in this instance is the underlying website the contentScript runs on - const el = document.getElementById('some-id') - if (el) { - el.value = 'Quasar Rocks!' - } - } - }) - */ -}); diff --git a/src-bex/js/content-script.js b/src-bex/js/content-script.js deleted file mode 100644 index 1c43d9d..0000000 --- a/src-bex/js/content-script.js +++ /dev/null @@ -1,2 +0,0 @@ -// Content script content goes here or in activatedContentHooks (use activatedContentHooks if you need a variable -// accessible to both the content script and inside a hook diff --git a/src-bex/manifest.json b/src-bex/manifest.json index e53ee4c..ecdc421 100644 --- a/src-bex/manifest.json +++ b/src-bex/manifest.json @@ -1,59 +1,51 @@ { "name": "Faker.js UI", - "description": "Use Faker.js UI to easiliy generate fake (but realistic) data for testing and development using Faker.js", - "version": "0.1.0", + "version": "0.3.1", + "description": "Simple and intuitive UI for Faker.js", "manifest_version": 3, "icons": { "16": "icons/icon-16x16.png", "48": "icons/icon-48x48.png", - "128": "icons/icon-120x120.png" + "128": "icons/icon-128x128.png" + }, + "permissions": [ + "storage", + "activeTab" + ], + "host_permissions": [ + "*://*/*" + ], + "action": { + "default_title": "Faker.js UI", + "default_popup": "www/index.html" }, - "author": "Joff Tiquez", "background": { - "persistent": true, - "service_worker": "service_worker.js", - "scripts": [ - "www/bex-background.js", - "js/background.js" - ] + "service_worker": "background.js" }, "content_scripts": [ { "matches": [ - "" - ], - "js": [ - "www/bex-content-script.js", - "js/content-script.js" + "*://*/*" ], "css": [ - "css/content-css.css" + "assets/content.css" + ], + "js": [ + "my-content-script.js" ] } ], - "permissions": [ - "", - "storage", - "activeTab" - ], + "content_security_policy": { + "content_security_policy": "script-src 'self' safe-inline' https://www.googletagmanager.com; object-src 'self' https://www.googletagmanager.com" + }, "web_accessible_resources": [ { "resources": [ - "www/*", - "js/*", - "css/*", - "" + "*" ], "matches": [ - "" + "*://*/*" ] } - ], - "content_security_policy": { - "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self';" - }, - "action": { - "default_title": "Faker.js UI", - "default_popup": "www/index.html" - } + ] } \ No newline at end of file diff --git a/src-bex/my-content-script.js b/src-bex/my-content-script.js new file mode 100644 index 0000000..3fa1f81 --- /dev/null +++ b/src-bex/my-content-script.js @@ -0,0 +1,40 @@ +// Hooks added here have a bridge allowing communication between the BEX Content Script and the Quasar Application. +// More info: https://quasar.dev/quasar-cli/developing-browser-extensions/content-hooks + +import { bexContent } from 'quasar/wrappers'; + +export default bexContent((bridge) => { + const forms = document.forms; + + const fields = []; + + // Step 3: Iterate over each form + for (let i = 0; i < forms.length; i++) { + const form = forms[i]; + + // Step 4: Iterate over each form control + for (let j = 0; j < form.elements.length; j++) { + const field = form.elements[j]; + + // Step 4: Extract relevant information + const fieldName = field.name; + const fieldType = field.type; + const fieldValue = field.value; + + fields.push({ + field, + name: fieldName, + type: fieldType, + value: fieldValue, + }); + } + } + + bridge.send('dom.fields', fields); + + console.warn('fields form my-content', fields); + + bridge.on('test', (data) => { + console.warn('test from my-content', data); + }); +}); diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue index 5a9adf8..a14a17b 100644 --- a/src/pages/IndexPage.vue +++ b/src/pages/IndexPage.vue @@ -40,9 +40,9 @@ - - - + + @@ -128,6 +128,19 @@ +
+
+ +
+
+
+ + diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue index 132f6cb..7922e6a 100644 --- a/src/pages/IndexPage.vue +++ b/src/pages/IndexPage.vue @@ -111,7 +111,8 @@