Feedly Full Screen Article View

1// ==UserScript==
2// @name		Feedly Full Screen Article View
3// @description		Makes article views take up the full screen instead of sliding out from the right
4// @version		1.1.2
5// @match		https://*.feedly.com/*
6// @icon		https://feedly.com/favicon.ico
7// ==/UserScript==
8(function() {
9    'use strict';
10
11    console.log('Feedly Full Screen Article View extension loaded');
12
13    // Add CSS to make article view full screen
14    const style = document.createElement('style');
15    style.textContent = `
16        /* Make the article slide container full screen */
17        .sidePeekContainer.Slide--current {
18            position: fixed !important;
19            top: 0 !important;
20            left: 0 !important;
21            right: 0 !important;
22            bottom: 0 !important;
23            width: 100% !important;
24            max-width: 100% !important;
25            height: 100vh !important;
26            z-index: 9999 !important;
27            transform: none !important;
28        }
29
30        /* Ensure the content wrapper takes full width */
31        .sidePeekContainer.Slide--current .Slide__content-wrapper {
32            width: 100% !important;
33            max-width: 100% !important;
34            margin: 0 auto !important;
35            padding: 0 20px !important;
36        }
37
38        /* Center the article content with reasonable max-width for readability */
39        .sidePeekContainer.Slide--current .SlideMainContent {
40            max-width: 900px !important;
41            margin: 0 auto !important;
42            width: 100% !important;
43        }
44
45        /* Hide the feed list when article is open */
46        body:has(.sidePeekContainer.Slide--current) #feedlyFrame {
47            display: none !important;
48        }
49
50        /* Ensure proper background */
51        .sidePeekContainer.Slide--current {
52            background: white !important;
53        }
54
55        /* Make sure close button is visible */
56        .sidePeekContainer.Slide--current button[aria-label*="Close" i],
57        .sidePeekContainer.Slide--current button[title*="Close" i] {
58            display: block !important;
59            visibility: visible !important;
60            opacity: 1 !important;
61        }
62
63        /* Dark mode support */
64        @media (prefers-color-scheme: dark) {
65            .sidePeekContainer.Slide--current {
66                background: #1a1a1a !important;
67            }
68        }
69    `;
70    document.head.appendChild(style);
71    console.log('Full screen article view styles applied');
72
73    // Function to intercept article clicks and open in Feedly view
74    function interceptArticleClicks() {
75        // Find all article title links
76        const articleLinks = document.querySelectorAll('a.EntryTitleLink');
77        
78        articleLinks.forEach(link => {
79            // Check if we already added the listener
80            if (link.dataset.feedlyIntercepted) return;
81            
82            link.addEventListener('click', function(e) {
83                console.log('Article link clicked, preventing default navigation');
84                e.preventDefault();
85                e.stopPropagation();
86                
87                // Find the parent article element
88                const articleElement = link.closest('article.entry');
89                if (articleElement) {
90                    // Click on the article preview/summary area to open Feedly's article view
91                    const previewArea = articleElement.querySelector('.aRpq1uFgOK5S67Q9FvlE, .SelectedEntryScroller');
92                    if (previewArea) {
93                        console.log('Opening article in Feedly view via preview area');
94                        previewArea.click();
95                    } else {
96                        console.log('Opening article in Feedly view via article card');
97                        articleElement.click();
98                    }
99                }
100            }, true);
101            
102            link.dataset.feedlyIntercepted = 'true';
103        });
104    }
105
106    // Run on page load
107    setTimeout(interceptArticleClicks, 1000);
108
109    // Watch for new articles being added to the page
110    const observer = new MutationObserver(function() {
111        interceptArticleClicks();
112    });
113
114    // Start observing the document for changes
115    observer.observe(document.body, {
116        childList: true,
117        subtree: true
118    });
119
120    console.log('Article click interception enabled');
121
122})();