Greasy Fork is available in English.

Full Width Tweets for Twitter

Display Tweets in Full-Width

  1. // ==UserScript==
  2. // @name Full Width Tweets for Twitter
  3. // @namespace Violentmonkey Scripts
  4. // @match https://x.com/*
  5. // @grant none
  6. // @version 1.00
  7. // @author Yukiteru
  8. // @description Display Tweets in Full-Width
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. function applyLayoutStyles() {
  17. const sidebar = document.querySelector('[data-testid="sidebarColumn"]');
  18. const primaryColumn = document.querySelector('[data-testid="primaryColumn"]');
  19. const innerContainer = document.querySelector('main section[role="region"]')?.parentNode;
  20.  
  21. sidebar.style.display = 'none';
  22. primaryColumn.style.maxWidth = 'none';
  23.  
  24. if (innerContainer) {
  25. innerContainer.style.maxWidth = 'none';
  26. innerContainer.style.marginRight = '0';
  27. }
  28. }
  29.  
  30. let oldPostCount = 0;
  31. let postsChecked = false;
  32.  
  33. function getPostList() {
  34. const postList = document.querySelectorAll('main section article');
  35. return postList;
  36. }
  37.  
  38. function applyButtonStyles() {
  39. const postList = getPostList();
  40. postList.forEach(post => {
  41. const buttonGroup = post.querySelector('div[role="group"]');
  42. buttonGroup.style.minWidth = '100%';
  43. })
  44. }
  45.  
  46. function updatePosts() {
  47. const postCount = getPostList().length;
  48. if (postCount === oldPostCount) return;
  49. oldPostCount = postCount;
  50. applyButtonStyles();
  51. }
  52.  
  53. const observer = new MutationObserver((mutationsList, observer) => {
  54. const primaryColumn = document.querySelector('[data-testid="primaryColumn"]');
  55. if (primaryColumn) applyLayoutStyles()
  56. if (!postsChecked && document.querySelector('main section article')) {
  57. updatePosts();
  58. postsChecked = true;
  59. }
  60. });
  61.  
  62. document.addEventListener('scroll', () => updatePosts());
  63. observer.observe(document.body, { childList: true, subtree: true });
  64. })();