82 | 
*/}
123 |
124 | );
125 | };
126 |
127 | export default View;
128 |
--------------------------------------------------------------------------------
/src/assets/animeskyline.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbzhu/browserdiffusion/5dd439a16d6c0608e79a8adeddbd3792e41cdb66/src/assets/animeskyline.jpeg
--------------------------------------------------------------------------------
/src/assets/realskyline.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbzhu/browserdiffusion/5dd439a16d6c0608e79a8adeddbd3792e41cdb66/src/assets/realskyline.jpeg
--------------------------------------------------------------------------------
/src/contentScript.ts:
--------------------------------------------------------------------------------
1 | // ---------- GLOBALS ----------
2 | let isReplacingImages = false;
3 | var imagesStore = {} as any;
4 | var imageStartTimes = {} as any;
5 | const timeBeforeRetry = 3000; //min time in ms to wait before retrying generation for a given image
6 |
7 | // ---------- UTILS ----------
8 |
9 | function findKeyByValue(obj: any, value: any) {
10 | return Object.keys(obj).find((key) => obj[key] === value);
11 | }
12 |
13 | /**
14 | * Extracts URLs from the given text.
15 | * @param {string} text - The text to search for URLs.
16 | * @returns {string[]|null} - An array of URLs found in the text, or null if no URLs are found.
17 | */
18 | function extractUrls(text: string) {
19 | const urlPattern = /https?:\/\/[^\s]+/g;
20 | const urls = text.match(urlPattern);
21 | return urls ? urls : null;
22 | }
23 |
24 | /**
25 | * Sends image URLs to the background script
26 | * @param {Array} filteredImages - List of image URLs to be sent
27 | */
28 | async function sendImageUrlsToApp(filteredImages: string[]) {
29 | try {
30 | // Convert image URLs to base64 and create image objects
31 | const imageObjects = await Promise.all(
32 | filteredImages.map(async (imageUrl) => {
33 | return { imageUrl, croppedb64Image: imageUrl };
34 | })
35 | );
36 | // Send image objects to the background script
37 | chrome.runtime.sendMessage({
38 | action: "processImages",
39 | images: imageObjects,
40 | });
41 | } catch (error) {
42 | console.error("Error processing images:", error);
43 | }
44 | }
45 |
46 | /**
47 | * Check if the image should be processed based on various conditions.
48 | *
49 | * @param {HTMLImageElement} img - the image to be processed
50 | * @return {boolean} whether the image should be processed or not
51 | */
52 | function shouldProcess(img: HTMLImageElement) {
53 | if (
54 | (!imageStartTimes.hasOwnProperty(img.src) ||
55 | imageStartTimes[img.src] + timeBeforeRetry < Date.now()) &&
56 | !img.src.startsWith("data:image") &&
57 | !img.alt.toLowerCase().includes("profile") &&
58 | !img.src.toLowerCase().includes("video_thumb") &&
59 | !img.src.toLowerCase().includes("icon") &&
60 | !img.src.toLowerCase().includes("static-asset") &&
61 | !(img.offsetWidth < 125 && img.offsetHeight < 125)
62 | ) {
63 | return true;
64 | }
65 | return false;
66 | }
67 |
68 | // ---------- LIFECYCLE ----------
69 |
70 | /**
71 | * Scans the document for images and sends the URLs of new images to the background process for processing.
72 | */
73 | const scanImages = () => {
74 | if (!isReplacingImages) {
75 | return;
76 | }
77 |
78 | const images = [...document.getElementsByTagName("img")];
79 | let filteredImages = [];
80 |
81 | for (let img of images) {
82 | // Check if the image URL is not already stored and should be processed
83 | if (!imagesStore.hasOwnProperty(img.src) && shouldProcess(img)) {
84 | filteredImages.push(img.src);
85 | imageStartTimes[img.src] = Date.now();
86 | }
87 | }
88 |
89 | if (filteredImages.length > 0) {
90 | sendImageUrlsToApp(filteredImages);
91 | }
92 | };
93 |
94 | /**
95 | * Updates the images on the page based on the current state of the imagesStore.
96 | */
97 | function updatePageImages() {
98 | // Update general images
99 | const images = [...document.getElementsByTagName("img")];
100 | for (let img of images) {
101 | let currentUrl = img.src;
102 | if (!isReplacingImages) {
103 | // If replacing is toggled off, switch altered images back, while keeping generations in imagesStore
104 | let originalImage = findKeyByValue(imagesStore, currentUrl);
105 | img.src = originalImage === undefined ? currentUrl : originalImage;
106 | } else if (
107 | imagesStore.hasOwnProperty(currentUrl) &&
108 | img.src !== imagesStore[currentUrl]
109 | ) {
110 | img.src = imagesStore[currentUrl];
111 | }
112 | }
113 |
114 | // In some sites like the nytimes, the source of truth is in the source tag, not the img tag
115 | const sources = [...document.getElementsByTagName("source")];
116 | for (let source of sources) {
117 | if (!isReplacingImages) {
118 | let originalImage = findKeyByValue(imagesStore, source.srcset);
119 | source.srcset =
120 | originalImage === undefined ? source.srcset : originalImage;
121 | } else {
122 | let currentUrls = extractUrls(source.srcset) || source.srcset;
123 | if (currentUrls === null) continue;
124 | for (let currentUrl of currentUrls) {
125 | if (
126 | imagesStore.hasOwnProperty(currentUrl) &&
127 | source.srcset !== imagesStore[currentUrl]
128 | ) {
129 | source.srcset = imagesStore[currentUrl];
130 | }
131 | }
132 | }
133 | }
134 | }
135 |
136 | /**
137 | * Function to observe DOM changes and replace images if new ones are added
138 | */
139 | const observeDOM = () => {
140 | const observer = new MutationObserver((mutations) => {
141 | const hasAdditions = mutations.some(
142 | (mutation) => mutation.addedNodes.length > 0
143 | );
144 |
145 | // If new nodes are added and the flag for replacing images is true, then scan for and update images
146 | if (hasAdditions && isReplacingImages) {
147 | scanImages();
148 | updatePageImages();
149 | }
150 | });
151 |
152 | // Start observing changes to the entire body and its subtree
153 | observer.observe(document.body, {
154 | childList: true,
155 | subtree: true,
156 | });
157 | };
158 |
159 | // ---------- MAIN ----------
160 |
161 | /**
162 | * Listens for messages from App.js and background.js and performs actions based on the message content.
163 | * - If the message action is "updateSingleImage", it updates a single image's URL in the imagesStore and triggers an update of page images.
164 | * - If the message contains "replaceImages", it toggles the state of image replacement, connects to the runtime for further instructions, scans for new images, updates page images, and sends a success response.
165 | */
166 | chrome.runtime.onMessage.addListener((request: any) => {
167 | if (
168 | request.hasOwnProperty("action") &&
169 | request.action === "updateSingleImage"
170 | ) {
171 | imagesStore[request.originalUrl] = request.newImageUrl;
172 | updatePageImages();
173 | } else if (request.hasOwnProperty("replaceImages")) {
174 | isReplacingImages = request.replaceImages;
175 | scanImages();
176 | updatePageImages();
177 | }
178 | return false; // return false since not responding to sender here
179 | });
180 |
181 | observeDOM();
182 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | display: flex;
4 | place-items: center;
5 | min-width: 250px;
6 | min-height: 250px;
7 | }
8 |
9 | #root {
10 | width: 100%;
11 | height: 100%;
12 | }
13 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App.tsx";
4 | import "./index.css";
5 |
6 | ReactDOM.createRoot(document.getElementById("root")!).render(
7 |
86 | setPrompt(e.target.value)}
90 | className="bg-transparent h-10 px-4 w-[200px] text-sm focus:outline-none placeholder:text-slate-600"
91 | placeholder="Custom prompt"
92 | />
93 |
94 |
116 |
117 | {isReplacing ? "AI" : "Reality"}
118 |
119 | {/*