├── background.js
├── manifest.json
├── README.md
└── content.js


/background.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 3,
 3 |   "name": "Image Modal Viewer",
 4 |   "version": "1.0",
 5 |   "description": "Open images in a modal instead of following links",
 6 |   "background": {
 7 |     "service_worker": "background.js"
 8 |   },
 9 |   "permissions": ["activeTab"],
10 |   "host_permissions": [
11 |     "http://www.1point3acres.com/*",
12 |     "https://www.1point3acres.com/*"
13 |   ],
14 |   "content_scripts": [
15 |     {
16 |       "matches": ["http://www.1point3acres.com/*", "https://www.1point3acres.com/*"],
17 |       "js": ["content.js"]
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Image Modal Viewer Chrome Extension
 2 | 
 3 | This Chrome extension allows users to view images in a modal on the target website, instead of following the image's link. This README will guide you on how to install and use this extension.
 4 | 
 5 | ## Installation
 6 | 
 7 | 1. **Clone the Project**:
 8 | 
 9 | 2. **Open Chrome**: Navigate to `chrome://extensions/`.
10 | 
11 | 3. **Enable Developer Mode**: There should be a toggle/switch in the top-right corner of the `chrome://extensions/` page. Make sure it's turned on.
12 | 
13 | 4. **Load Unpacked Extension**: Click on the `Load unpacked` button, which should now be visible after enabling Developer Mode.
14 | 
15 | 5. **Choose the Repo**: Navigate to the directory where you cloned the repo and select it.
16 | 
17 | ## Usage
18 | 
19 | 1. **Go to the Target Website**: Navigate to the website where you want to use the extension.
20 | 
21 | 2. **Pin the Extension**: In Chrome's toolbar, you might see the extension icon. If not, click on the extensions icon (usually a puzzle piece) in the toolbar to reveal a dropdown with all your extensions. Find "Image Modal Viewer" and click the pin icon to pin it to your toolbar for easy access.
22 | 
23 | 3. **Enjoy**: Now, every time you click on an image link on the target website, instead of following the link, you'll see the image in a modal.
24 | 
25 | ---
26 | 
27 | Enjoy the extension and viewing images seamlessly!
28 | 
29 | ---
30 | 


--------------------------------------------------------------------------------
/content.js:
--------------------------------------------------------------------------------
 1 | const spinnerStyles = `
 2 | @keyframes spin {
 3 |   0% { transform: rotate(0deg); }
 4 |   100% { transform: rotate(360deg); }
 5 | }
 6 | 
 7 | .spinner {
 8 |   border: 16px solid #f3f3f3;
 9 |   border-top: 16px solid #3498db;
10 |   border-radius: 50%;
11 |   width: 50px;
12 |   height: 50px;
13 |   animation: spin 2s linear infinite;
14 | }
15 | `;
16 | 
17 | const styleSheet = document.createElement("style");
18 | styleSheet.type = "text/css";
19 | styleSheet.innerText = spinnerStyles;
20 | document.head.appendChild(styleSheet);
21 | 
22 | const anchors = document.querySelectorAll("a > img");
23 | 
24 | anchors.forEach((img) => {
25 |   img.parentElement.addEventListener("click", function (e) {
26 |     e.preventDefault();
27 | 
28 |     const modal = document.createElement("div");
29 |     modal.style.position = "fixed";
30 |     modal.style.top = "0";
31 |     modal.style.left = "0";
32 |     modal.style.width = "100%";
33 |     modal.style.height = "100%";
34 |     modal.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
35 |     modal.style.display = "flex";
36 |     modal.style.justifyContent = "center";
37 |     modal.style.alignItems = "center";
38 |     modal.style.zIndex = "9999";
39 | 
40 |     const spinner = document.createElement("div");
41 |     spinner.className = "spinner";
42 |     modal.appendChild(spinner);
43 | 
44 |     const largeImage = new Image();
45 | 
46 |     largeImage.onload = function () {
47 |       // Hide spinner when image loads
48 |       spinner.style.display = "none";
49 |     };
50 | 
51 |     let imgUrl = img.src;
52 |     if (imgUrl.endsWith("!s")) {
53 |       imgUrl = imgUrl.substring(0, imgUrl.length - 2);
54 |     }
55 | 
56 |     largeImage.src = imgUrl;
57 |     largeImage.style.maxWidth = "90%";
58 |     largeImage.style.maxHeight = "90%";
59 |     modal.appendChild(largeImage);
60 | 
61 |     modal.addEventListener("click", function () {
62 |       document.body.removeChild(modal);
63 |     });
64 | 
65 |     document.body.appendChild(modal);
66 |   });
67 | });
68 | 


--------------------------------------------------------------------------------