diff --git a/src/contentScript/contentScript.ts b/src/contentScript/contentScript.ts index c4069f2fa2..0dde116106 100644 --- a/src/contentScript/contentScript.ts +++ b/src/contentScript/contentScript.ts @@ -16,6 +16,7 @@ */ import "./contentScript.scss"; +import "@/development/visualInjection"; import { uuidv4 } from "@/types/helpers"; import { isInstalledInThisSession, diff --git a/src/development/visualInjection.ts b/src/development/visualInjection.ts new file mode 100644 index 0000000000..514db4685b --- /dev/null +++ b/src/development/visualInjection.ts @@ -0,0 +1,40 @@ +/* + * Copyright (C) 2023 PixieBrix, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import { MAX_Z_INDEX } from "@/common"; + +if (process.env.ENVIRONMENT === "development") { + const indicator = document.createElement("div"); + + // Hide on hover + indicator.addEventListener("mouseenter", indicator.remove); + + Object.assign(indicator.style, { + position: "fixed", + top: 0, + height: "1px", + zIndex: MAX_Z_INDEX, + + // Vary position to see multiple injections + left: `${Math.random() * 100}px`, + + // Add contrast so it's visible no matter the background + borderLeft: "solid 5px white", + borderRight: "solid 5px black", + }); + document.body.prepend(indicator); +}