From a30b28d40e5bacdbbbcad3c9de8f1fe3e083119c Mon Sep 17 00:00:00 2001 From: Arpit Chakladar <54011232+arpitchakladar@users.noreply.github.com> Date: Tue, 14 Feb 2023 09:46:34 +0530 Subject: Added ability to load static assets from extension's assets. --- .../create-manifest-webpack-plugin/index.js | 19 ++++++++++- package.json | 1 + src/scripts/optimize/home-page.ts | 35 +++---------------- src/scripts/optimize/index.ts | 37 ++++----------------- src/utils/observe-dom.ts | 2 +- src/utils/replace-attributes.ts | 34 +++++++++++++++++++ static/assets/banner.jpg | Bin 0 -> 502493 bytes yarn.lock | 25 ++++++++++++++ 8 files changed, 90 insertions(+), 63 deletions(-) create mode 100644 src/utils/replace-attributes.ts create mode 100644 static/assets/banner.jpg diff --git a/config/webpack/plugins/create-manifest-webpack-plugin/index.js b/config/webpack/plugins/create-manifest-webpack-plugin/index.js index 3a16770..a1a21a8 100644 --- a/config/webpack/plugins/create-manifest-webpack-plugin/index.js +++ b/config/webpack/plugins/create-manifest-webpack-plugin/index.js @@ -14,7 +14,7 @@ class CreateManifestPlugin { stage: compiler.webpack.Compilation.PROCESS_ASSETS_ADDITIONAL, additionalAssets: true }, - () => { + assets => { const scripts = formatScripts(require(path.resolve(SOURCE_DIR, "scripts.json"))); const manifest = webpackRequire("plugins/create-manifest-webpack-plugin/manifest-template.json"); manifest.version = require(path.resolve(ROOT_DIR, "package.json")).version; @@ -30,6 +30,23 @@ class CreateManifestPlugin { } } + const resources = []; + + for (const assetName in assets) { + if (/^assets\/.*\.(jpg|png|gif)$/.test(assetName)) { + resources.push(assetName); + } + } + + if (resources.length > 0) { + manifest.web_accessible_resources = [ + { + resources, + matches: [ "" ] + } + ]; + } + compilation.emitAsset( "manifest.json", new sources.RawSource(JSON.stringify(manifest)) diff --git a/package.json b/package.json index 2085ef6..a40aa42 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "build:dev": "webpack build --config config/webpack.config.js --mode development" }, "devDependencies": { + "@types/chrome": "^0.0.213", "@types/jquery": "^3.5.16", "copy-webpack-plugin": "^11.0.0", "terser": "^5.16.3", diff --git a/src/scripts/optimize/home-page.ts b/src/scripts/optimize/home-page.ts index 2affea7..4c1f21f 100644 --- a/src/scripts/optimize/home-page.ts +++ b/src/scripts/optimize/home-page.ts @@ -1,32 +1,7 @@ -import observeDOM from "@/utils/observe-dom"; +import { replaceAttributes } from "@/utils/replace-attributes"; -const replace: (any[] | undefined)[] = [ - ["#slider > img", { src: "" }], - ["#slider > img.nivo-main-image", { src: "" }] -]; -let count = 0; +const bannerImageUrl = chrome.runtime.getURL("assets/banner.jpg"); -observeDOM(() => { - for (let i = 0; i < replace.length; i++) { - if (replace[i]) { - const element = document.querySelector(replace[i]![0]) as HTMLElement | null; - if (element) { - const attributes = replace[i]![1]; - if (attributes.innerHTML) { - element.innerHTML = attributes.innerHTML; - } - delete attributes.innerHTML; - for (const attribute in attributes) { - element.setAttribute(attribute, attributes[attribute]); - } - replace[i] = undefined; - count++; - if (count >= replace.length) { - return true; - } - } - } - } - - return false; -}); +replaceAttributes([ + ["#form_MainMenuPage > div > div:nth-child(13)", { innerHTML: `` }] +]); diff --git a/src/scripts/optimize/index.ts b/src/scripts/optimize/index.ts index 37ae12e..70cbac3 100644 --- a/src/scripts/optimize/index.ts +++ b/src/scripts/optimize/index.ts @@ -1,32 +1,7 @@ -import observeDOM from "@/utils/observe-dom"; +import { replaceAttributes } from "@/utils/replace-attributes"; -const replace: (any[] | undefined)[] = [ - ["head > script:nth-child(34)", { src: "" }], - ["head > script:nth-child(43)", { src: "" }] -]; -let count = 0; - -observeDOM(() => { - for (let i = 0; i < replace.length; i++) { - if (replace[i]) { - const element = document.querySelector(replace[i]![0]) as HTMLElement | null; - if (element) { - const attributes = replace[i]![1]; - if (attributes.innerHTML) { - element.innerHTML = attributes.innerHTML; - } - delete attributes.innerHTML; - for (const attribute in attributes) { - element.setAttribute(attribute, attributes[attribute]); - } - replace[i] = undefined; - count++; - if (count >= replace.length) { - return true; - } - } - } - } - - return false; -}); +replaceAttributes([ + ["head > script:nth-child(34)", { src: null }], + ["head > script:nth-child(36)", { src: null, innerHTML: "$.prototype.nivoSlider = () => {};" }], + ["head > script:nth-child(43)", { src: null }] +]); diff --git a/src/utils/observe-dom.ts b/src/utils/observe-dom.ts index e375326..30a07b4 100644 --- a/src/utils/observe-dom.ts +++ b/src/utils/observe-dom.ts @@ -1,4 +1,4 @@ -export default (callback: () => boolean) => { +export const observeDOM = (callback: () => boolean) => { const observer = new MutationObserver(() => { if (callback()) { observer.disconnect(); diff --git a/src/utils/replace-attributes.ts b/src/utils/replace-attributes.ts new file mode 100644 index 0000000..443c1d0 --- /dev/null +++ b/src/utils/replace-attributes.ts @@ -0,0 +1,34 @@ +import { observeDOM } from "@/utils/observe-dom"; + +export const replaceAttributes = (elements: any[]) => { + let count = 0; + + observeDOM(() => { + for (let i = 0; i < elements.length; i++) { + if (elements[i]) { + const element = document.querySelector(elements[i]![0]) as HTMLElement | null; + if (element) { + const attributes = elements[i]![1]; + if (attributes.innerHTML) { + element.innerHTML = attributes.innerHTML; + } + delete attributes.innerHTML; + for (const attribute in attributes) { + if (attributes[attribute] === null) { + element.removeAttribute(attribute); + } else { + element.setAttribute(attribute, attributes[attribute]); + } + } + elements[i] = undefined; + count++; + if (count >= elements.length) { + return true; + } + } + } + } + + return false; + }); +}; diff --git a/static/assets/banner.jpg b/static/assets/banner.jpg new file mode 100644 index 0000000..79d3b8f Binary files /dev/null and b/static/assets/banner.jpg differ diff --git a/yarn.lock b/yarn.lock index 6179dc9..f63da3b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -68,6 +68,14 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@types/chrome@^0.0.213": + version "0.0.213" + resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.213.tgz#f1e421f76ce7986d2886bafc6c359575e599471e" + integrity sha512-oDF+AGr2gcHzxX5xq8TjmLtnMnV3nL1ci4Y6CjhDqIKI8Ar36JOWnmQx6eGVBBYEX824OIN0NQwDo2cevEBbQQ== + dependencies: + "@types/filesystem" "*" + "@types/har-format" "*" + "@types/eslint-scope@^3.7.3": version "3.7.4" resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16" @@ -94,6 +102,23 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40" integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ== +"@types/filesystem@*": + version "0.0.32" + resolved "https://registry.yarnpkg.com/@types/filesystem/-/filesystem-0.0.32.tgz#307df7cc084a2293c3c1a31151b178063e0a8edf" + integrity sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ== + dependencies: + "@types/filewriter" "*" + +"@types/filewriter@*": + version "0.0.29" + resolved "https://registry.yarnpkg.com/@types/filewriter/-/filewriter-0.0.29.tgz#a48795ecadf957f6c0d10e0c34af86c098fa5bee" + integrity sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ== + +"@types/har-format@*": + version "1.2.10" + resolved "https://registry.yarnpkg.com/@types/har-format/-/har-format-1.2.10.tgz#7b4e1e0ada4d17684ac3b05d601a4871cfab11fc" + integrity sha512-o0J30wqycjF5miWDKYKKzzOU1ZTLuA42HZ4HE7/zqTOc/jTLdQ5NhYWvsRQo45Nfi1KHoRdNhteSI4BAxTF1Pg== + "@types/jquery@^3.5.16": version "3.5.16" resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.16.tgz#632131baf30951915b0317d48c98e9890bdf051d" -- cgit v1.2.3