|
|
First off, thanks to all the experts in this forum who generously share high-quality scripts you've created!
---
While browsing, I've always disliked opening new tabs and sought an elegant way for previewing links (which is why I'm an Arc Browser user). While there are many desktop extensions available for this purpose, mobile options are scarce (at least on iOS and iPadOS).
On Discourse forums, clicking a post typically changes the current page's URL, which can lead to unexpected refreshes when navigating back (based on my personal experience).
One day, I stumbled upon [a link-preview script on Greasy Fork](https://greasyfork.org/scripts/493438). It worked well even on mobile. After using it for a while, I found that the boundaries between the preview window and the main page were unclear, so I started tweaking it. The result is still a bit buggy, but here's what I've done:
I've made minor adjustments to the code:
1. Added support for `linux.do` and `meta.appinn.net` (Appinn).
2. Aesthetically, I've modified the iframe styles to resemble those of Arc Browser.
Here's the modified script:
```javascript
// ==UserScript==
// @name [Discourse] Link Preview - Arc Style
// @author KlNon + Contributors
// @version 1.1 Updated
// @description Click any link to preview content without navigation, displayed in an Arc-like modal window.
// @match https://linux.do/*
// @match https://meta.appinn.net/*
// @grant none
// @icon https://www.svgrepo.com/show/330308/discourse.svg
// ==/UserScript==
(function() {
'use strict';
console.log("Initializing script...");
// Add custom styles
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.iframe-container {
width: 90%;
height: 90%;
}
iframe {
width: calc(100% - 16px);
height: calc(100% - 16px);
border: 8px solid #e0e0e0;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
`;
document.head.appendChild(style);
// Create the modal and iframe container
const modal = document.createElement('div');
modal.className = 'modal';
const iframeContainer = document.createElement('div');
iframeContainer.className = 'iframe-container';
const iframe = document.createElement('iframe');
iframeContainer.appendChild(iframe);
modal.appendChild(iframeContainer);
document.body.appendChild(modal);
// Function to open the modal
function openModal(url) {
iframe.src = url;
modal.style.display = 'flex';
}
// Close modal by clicking outside
modal.addEventListener('click', function(event) {
if (event.target === modal) {
modal.style.display = 'none';
iframe.src = '';
}
});
// Listen for click events
document.addEventListener('click', function(e) {
if (e.target.matches('.raw-link')) {
e.preventDefault();
openModal(e.target.href);
}
}, true);
})();
```
**Testing Results:**
| Browser | Works? | Nesting? |
|---------|--------|----------|
| Desktop | ☐ | ☐ |
| Chrome + Violentmonkey | ✓ | ✓ |
| Orion + Violentmonkey | ✓ | ... |
| Safari + Stay | ✓ | ✓ |
| Mobile | ☐ | ☐ |
| Orion + Violentmonkey | ✓ | ✗ |
| Safari + Stay | ✓ | ✓ |
| More to come... | ... | ... | |
|
发表于 2024-8-1 06:06:39