├── index.html
├── manifest.json
├── styles.css
├── LICENSE
├── README.md
└── content.js


/index.html:
--------------------------------------------------------------------------------
1 | <input type="checkbox" id="preview-toggle" checked>
2 | <label for="preview-toggle">Preview for headings only</label>


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "manifest_version": 3,
 3 |     "name": "My Preview Extension",
 4 |     "version": "1.0",
 5 |     "content_scripts": [
 6 |         {
 7 |             "matches": [
 8 |                 "<all_urls>"
 9 |             ],
10 |             "js": [
11 |                 "content.js"
12 |             ],
13 |             "css": [
14 |                 "styles.css"
15 |             ]
16 |         }
17 |     ],
18 |     "permissions": [
19 |         "activeTab"
20 |     ]
21 | }


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | /* This is injected after a web page loads */
 2 | .description {
 3 |   display: none;
 4 |   top: 0;
 5 |   left: 0;
 6 |   z-index: 33;
 7 |   border-radius: 10px; /* rounded edges */
 8 |   box-shadow: 5px 5px 10px #aaa;
 9 |   position: absolute;
10 |   border: 1px solid #000;
11 |   width: 500px;
12 |   height: 500px;
13 |   background: #aaa;
14 | }
15 | 
16 | .loading {
17 |   display: flex;
18 |   justify-content: center;
19 | }
20 | 
21 | .loading-bar {
22 |   width: 4px;
23 |   height: 18px;
24 |   margin: 0 8px;
25 |   border-radius: 4px;
26 |   animation: loading 1s ease-in-out infinite;
27 | }
28 | 
29 | @keyframes loading {
30 |   0% {
31 |     transform: scale(1);
32 |   }
33 |   20% {
34 |     transform: scale(1, 2.5);
35 |   }
36 |   40% {
37 |     transform: scale(1);
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Priyam Srivastava
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # My Preview Extension
 2 | ##### Do drop a star ⭐️ keeps me motivated
 3 | 
 4 | https://user-images.githubusercontent.com/79325116/212641977-25a8976b-e24f-4c0d-8c49-1e0f17ff5205.mp4
 5 | 
 6 | This is an extension for Google Chrome that allows you to preview links on a website without having to leave the page. It uses an iframe to load the preview and a CORS proxy to bypass the CORS policy.
 7 | 
 8 | ## Installation
 9 | 
10 | 1. Download the extension from the [releases](https://github.com/ipriyam26/preview/releases) page. & unzip it
11 | 2. Extension Icon > Manage Extensions > Turn Developer Mode on > click Load Unpacked > select the downloaded folder
12 | 3. Click on "Add Extension" to install it.
13 | 
14 | ## Usage
15 | 
16 | 1. Navigate to a website that contains links.
17 | 2. Hover over a link to view a preview of the linked page in an iframe.
18 | 3. Move your cursor away from the link to hide the preview.
19 | 
20 | ## Features
21 | 
22 | - Preview links without leaving the page.
23 | - Customizable styles with CSS
24 | - CORS proxy for cross-origin issues
25 | 
26 | 
27 | ## Create own Proxy Server from here
28 | 
29 | https://app.tango.us/app/workflow/Workflow-with-Google-and-Render-be09ed8cf4594916adf9e146e9b52d12
30 | 
31 | ## Limitations
32 | 
33 | - Due to security reasons, some websites may block the extension from displaying content.
34 | - Some websites may also refuse to connect to the iframe.
35 | 
36 | ## Todo
37 | 
38 | | Tasks                    | State |
39 | | ------------------------ | ----- |
40 | | Firefox Support          |       |
41 | | Meta + hover for preview |       |
42 | | Working on all links     |       |
43 | 
44 | ## Contributing
45 | 
46 | We welcome contributions from the community. If you would like to contribute, please open an issue or submit a pull request with your proposed changes.
47 | 
48 | ## License
49 | 
50 | This extension is licensed under the [MIT License](LICENSE).
51 | 


--------------------------------------------------------------------------------
/content.js:
--------------------------------------------------------------------------------
 1 | let collection = document.getElementsByTagName('a');
 2 | 
 3 | // let isCommandPressed = false;
 4 | // document.addEventListener("keydown", function (event) {
 5 | //     if (event.metaKey) {
 6 | //         commandKey = true;
 7 | //     }
 8 | //     console.log("key up");
 9 | // });
10 | 
11 | // document.addEventListener("keyup", function (event) {
12 | //     if (!event.metaKey) {
13 | //         commandKey = false;
14 | //     }
15 | //     console.log("key up");
16 | // });
17 | let frame = document.createElement('iframe');
18 | frame.classList.add('description');
19 | frame.setAttribute("sandbox", "allow-same-origin");
20 | document.body.appendChild(frame);
21 | let loading = document.createElement("div");
22 | loading.classList.add("loading");
23 | 
24 | for (let i = 0; i < 4; i++) {
25 |     let loadingBar = document.createElement("div");
26 |     loadingBar.classList.add("loading-bar");
27 |     loading.appendChild(loadingBar);
28 | }
29 | frame.appendChild(loading);
30 | 
31 | 
32 | 
33 | for (let i = 0; i < collection.length; i += 1) {
34 |     let item = collection[i];
35 |     // if (!isCommandPressed) {
36 |     //     continue;
37 |     // }
38 |     let head = item.getElementsByTagName('h3')[0];
39 |     if (!head) {
40 |         continue;
41 |     }
42 | 
43 |     item.addEventListener("mouseover", function (e) {
44 |         frame.style.display = 'flex';
45 |         frame.src = 'https://proxyserver-c64q.onrender.com?url=' + item.href;
46 |         frame.style.left = e.clientX + "px";
47 |         frame.style.top = e.clientY + "px";
48 |         frame.style.display = "block";
49 |         frame.addEventListener("load", function () {
50 |             loading.style.display = "none";
51 |         });
52 |     });
53 |     frame.addEventListener("mouseover", function () {
54 |         frame.style.display = "block";
55 |     });
56 |     frame.addEventListener("mouseout", function () {
57 |         frame.src = ""
58 |         frame.style.display = "none";
59 |     });
60 | 
61 | 
62 | }


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