feat(scripts): improve content script performance

This commit is contained in:
wanhose 2021-10-28 13:26:33 +02:00
parent 339a90fee6
commit cb18b51039

View File

@ -64,7 +64,6 @@ const fix = () => {
}; };
/** /**
* @function removeElements
* @description Removes matched elements from a selectors array * @description Removes matched elements from a selectors array
* @param {string[]} selectors * @param {string[]} selectors
* @param {boolean} updateCache * @param {boolean} updateCache
@ -79,7 +78,7 @@ const removeElements = (selectors, updateCache) => {
const tagName = element.tagName.toUpperCase(); const tagName = element.tagName.toUpperCase();
if (!["BODY", "HTML"].includes(tagName)) { if (!["BODY", "HTML"].includes(tagName)) {
element.remove(); element.outerHTML = "";
if (updateCache) { if (updateCache) {
selectorsFromCache = [...selectorsFromCache, selector]; selectorsFromCache = [...selectorsFromCache, selector];
@ -95,11 +94,11 @@ const removeElements = (selectors, updateCache) => {
}; };
/** /**
* @function runTasks * @async
* @description Starts running tasks * @description Runs tasks
*/ */
const runTasks = async () => { const run = async () => {
if (attempts <= 20) { if (attempts <= 20) {
fix(); fix();
removeElements(selectorsFromCache); removeElements(selectorsFromCache);
@ -110,13 +109,13 @@ const runTasks = async () => {
if (attempts <= 5) await Promise.all(selectors.map((fn) => fn())); if (attempts <= 5) await Promise.all(selectors.map((fn) => fn()));
if (document.readyState === "complete") attempts += 1; if (document.readyState === "complete") attempts += 1;
} }
requestAnimationFrame(run);
} }
}; };
/** /**
* @function search
* @description Retrieves HTML element if selector exists * @description Retrieves HTML element if selector exists
*
* @param {string} selector * @param {string} selector
* @returns {HTMLElement | null} An HTML element or null * @returns {HTMLElement | null} An HTML element or null
*/ */
@ -139,27 +138,29 @@ const search = (selector) => {
/** /**
* @description Setups classes selectors * @description Setups classes selectors
* @type {Promise<boolean>} * @returns {Promise<boolean>}
*/ */
const setupClasses = new Promise((resolve) => { const setupClasses = () =>
new Promise((resolve) => {
dispatch({ type: "GET_CLASSES" }, null, ({ classes }) => { dispatch({ type: "GET_CLASSES" }, null, ({ classes }) => {
classesFromNetwork = classes; classesFromNetwork = classes;
resolve(true); resolve(true);
}); });
}); });
/** /**
* @description Setups elements selectors * @description Setups elements selectors
* @type {Promise<boolean>} * @returns {Promise<boolean>}
*/ */
const setupSelectors = new Promise((resolve) => { const setupSelectors = () =>
new Promise((resolve) => {
dispatch({ type: "GET_SELECTORS" }, null, ({ selectors }) => { dispatch({ type: "GET_SELECTORS" }, null, ({ selectors }) => {
selectorsFromNetwork = chunkerize(selectors); selectorsFromNetwork = chunkerize(selectors);
resolve(true); resolve(true);
}); });
}); });
dispatch( dispatch(
{ hostname: document.location.hostname, type: "GET_CACHE" }, { hostname: document.location.hostname, type: "GET_CACHE" },
@ -170,9 +171,8 @@ dispatch(
if (enabled) { if (enabled) {
selectorsFromCache = matches; selectorsFromCache = matches;
dispatch({ type: "ENABLE_ICON" }); dispatch({ type: "ENABLE_ICON" });
await Promise.all([setupClasses, setupSelectors]); await Promise.all([setupClasses(), setupSelectors()]);
await runTasks(); await run();
setInterval(runTasks, 500);
} }
} }
); );