recently i worked with a freelancer to build me a chrome extension to scrap reviews from listings and export them to a csv file. This is the only function about the whole extension.
When he provided me with the source code it was the most complex unclear javascript code i’ve seen in my whole life. Exactly 15050 line of code for that basic and simple extension, and he made it all in less than 2 days.
I built a whole order tracking system before finally for way less than that amount of lines.
My question, is there any tool to build chrome extensions easier that i don’t know about? Or what might be the explanation of that messy long code?
Obviously the freelancer didn’t tell me I don’t know why but I believe its my right to get a clear vision about my extensions development process
The code is too long but i will include a part of it so i can better show the matter
Also all of the file names was(popup.*) idk if that rings any bells
) => {
var e,
t = {
702: (e, t, n) => {
"use strict";
var r = {};
n.r(r),
n.d(r, {
BaseTransition: () => Or,
BaseTransitionPropsValidators: () => Rr,
Comment: () => Di,
DeprecationTypes: () => Js,
EffectScope: () => me,
ErrorCodes: () => fn,
ErrorTypeStrings: () => Hs,
Fragment: () => Mi,
KeepAlive: () => qr,
ReactiveEffect: () => _e,
Static: () => Ui,
Suspense: () => sr,
Teleport: () => Li,
Text: () => Bi,
TrackOpTypes: () => cn,
Transition: () => ra,
TransitionGroup: () => Ga,
TriggerOpTypes: () => ln,
VueElement: () => Va,
assertNumber: () => un,
callWithAsyncErrorHandling: () => pn,
callWithErrorHandling: () => dn,
camelize: () => L,
capitalize: () => B,
cloneVNode: () => ss,
compatUtils: () => Gs,
computed: () => Bs,
createApp: () => Ac,
createBlock: () => Gi,
createCommentVNode: () => ls,
createElementBlock: () => Yi,
createElementVNode: () => ns,
createHydrationRenderer: () => Si,
createPropsRestProxy: () => Lo,
createRenderer: () => wi,
createSSRApp: () => Tc,
createSlots: () => uo,
createStaticVNode: () => cs,
createTextVNode: () => as,
createVNode: () => rs,
customRef: () => tn,
defineAsyncComponent: () => Ur,
defineComponent: () => Br,
defineCustomElement: () => Ua,
defineEmits: () => wo,
defineExpose: () => So,
defineModel: () => Co,
defineOptions: () => Eo,
defineProps: () => _o,
defineSSRCustomElement: () => ja,
defineSlots: () => xo,
devtools: () => zs,
effect: () => Ce,
effectScope: () => ge,
getCurrentInstance: () => bs,
getCurrentScope: () => ve,
getTransitionRawChildren: () => Mr,
guardReactiveProps: () => is,
h: () => Ds,
handleError: () => mn,
hasInjectionContext: () => ei,
hydrate: () => Cc,
initCustomFormatter: () => Us,
initDirectivesForSSR: () => Nc,
inject: () => Zo,
isMemoSame: () => $s,
isProxy: () => Ft,
isReactive: () => It,
isReadonly: () => Pt,
isRef: () => Ht,
isRuntimeOnly: () => Ns,
isShallow: () => Lt,
isVNode: () => Ji,
markRaw: () => Bt,
mergeDefaults: () => Io,
mergeModels: () => Po,
mergeProps: () => ds,
nextTick: () => Cn,
normalizeClass: () => Z,
normalizeProps: () => ee,
normalizeStyle: () => Y,
onActivated: () => zr,
onBeforeMount: () => Zr,
onBeforeUnmount: () => ro,
onBeforeUpdate: () => to,
onDeactivated: () => Wr,
onErrorCaptured: () => co,
onMounted: () => eo,
onRenderTracked: () => ao,
onRenderTriggered: () => so,
onScopeDispose: () => be,
onServerPrefetch: () => io,
onUnmounted: () => oo,
onUpdated: () => no,
openBlock: () => Vi,
popScopeId: () => $n,
provide: () => Xo,
proxyRefs: () => Zt,
pushScopeId: () => jn,
queuePostFlushCb: () => kn,
reactive: () => Tt,
readonly: () => Rt,
ref: () => zt,
registerRuntimeCompiler: () => Os,
render: () => xc,
renderList: () => lo,
renderSlot: () => fo,
resolveComponent: () => Xn,
resolveDirective: () => tr,
resolveDynamicComponent: () => er,
resolveFilter: () => Ys,
resolveTransitionHooks: () => Ir,
setBlockTracking: () => Wi,
setDevtoolsHook: () => Ws,
setTransitionHooks: () => Fr,
shallowReactive: () => kt,
shallowReadonly: () => Ot,
shallowRef: () => Wt,
ssrContextKey: () => hr,
ssrUtils: () => Ks,
stop: () => Ae,
toDisplayString: () => ue,
toHandlerKey: () => D,
toHandlers: () => po,
toRaw: () => Mt,
toRef: () => sn,
toRefs: () => nn,
toValue: () => Qt,
transformVNodeArgs: () => Xi,
triggerRef: () => Gt,
unref: () => Jt,
useAttrs: () => ko,
useCssModule: () => qa,
useCssVars: () => Ea,
useModel: () => Ro,
useSSRContext: () => dr,
useSlots: () => To,
useTransitionState: () => Tr,
vModelCheckbox: () => oc,
vModelDynamic: () => fc,
vModelRadio: () => sc,
vModelSelect: () => ac,
vModelText: () => rc,
vShow: () => _a,
version: () => Vs,
warn: () => qs,
watch: () => vr,
watchEffect: () => pr,
watchPostEffect: () => mr,
watchSyncEffect: () => gr,
withAsyncContext: () => Fo,
withCtx: () => qn,
withDefaults: () => Ao,
withDirectives: () => Er,
withKeys: () => vc,
withMemo: () => js,
withModifiers: () => gc,
withScopeId: () => Vn,
});
var o = {};
function i(e, t) {
const n = new Set(e.split(","));
return t ? (e) => n.has(e.toLowerCase()) : (e) => n.has(e);
}
n.r(o),
n.d(o, {
hasBrowserEnv: () => Cd,
hasStandardBrowserEnv: () => Ad,
hasStandardBrowserWebWorkerEnv: () => kd,
});
const s = {},
a = [],
c = () => {},
l = () => !1,
u = (e) =>
111 === e.charCodeAt(0) &&
110 === e.charCodeAt(1) &&
(e.charCodeAt(2) > 122 || e.charCodeAt(2) < 97),
f = (e) => e.startsWith("onUpdate:"),
h = Object.assign,
d = (e, t) => {
const n = e.indexOf(t);
n > -1 && e.splice(n, 1);
},
p = Object.prototype.hasOwnProperty,
m = (e, t) => p.call(e, t),
g = Array.isArray,
y = (e) => "[object Map]" === A(e),
v = (e) => "[object Set]" === A(e),
b = (e) => "[object Date]" === A(e),
_ = (e) => "function" == typeof e,
w = (e) => "string" == typeof e,
S = (e) => "symbol" == typeof e,
E = (e) => null !== e && "object" == typeof e,
x = (e) => (E(e) || _(e)) && _(e.then) && _(e.catch),
C = Object.prototype.toString,
A = (e) => C.call(e),
T = (e) => A(e).slice(8, -1),
k = (e) => "[object Object]" === A(e),
R = (e) =>
w(e) && "NaN" !== e && "-" !== e[0] && "" + parseInt(e, 10) === e,
O = i(
",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"
),
N = i(
"bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo"
),
I = (e) => {
const t = Object.create(null);
return (n) => t[n] || (t[n] = e(n));
},
P = /-(w)/g,
L = I((e) => e.replace(P, (e, t) => (t ? t.toUpperCase() : ""))),
F = /B([A-Z])/g,
M = I((e) => e.replace(F, "-$1").toLowerCase()),
B = I((e) => e.charAt(0).toUpperCase() + e.slice(1)),
D = I((e) => (e ? `on${B(e)}` : "")),
U = (e, t) => !Object.is(e, t),
j = (e, t) => {
for (let n = 0; n < e.length; n++) e[n](t);
},
$ = (e, t, n) => {
Object.defineProperty(e, t, {
configurable: !0,
enumerable: !1,
value: n,
});
},
V = (e) => {
const t = parseFloat(e);
return isNaN(t) ? e : t;
},
q = (e) => {
const t = w(e) ? Number(e) : NaN;
return isNaN(t) ? e : t;
};
let H;
const z = () =>
H ||
(H =
"undefined" != typeof globalThis
? globalThis
: "undefined" != typeof self
? self
: "undefined" != typeof window
? window
: void 0 !== n.g
? n.g
: {});
const W = {
1: "TEXT",
2: "CLASS",
4: "STYLE",
8: "PROPS",
16: "FULL_PROPS",
32: "NEED_HYDRATION",
64: "STABLE_FRAGMENT",
128: "KEYED_FRAGMENT",
256: "UNKEYED_FRAGMENT",
512: "NEED_PATCH",
1024: "DYNAMIC_SLOTS",
2048: "DEV_ROOT_FRAGMENT",
[-1]: "HOISTED",
[-2]: "BAIL",
},
K = i(
"Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error"
);
function Y(e) {
if (g(e)) {
const t = {};
for (let n = 0; n < e.length; n++) {
const r = e[n],
o = w(r) ? X(r) : Y(r);
if (o) for (const e in o) t[e] = o[e];
}
return t;
