├── .gitignore
├── README.md
├── build.py
├── logo.jpg
├── page_aligner_animation.gif
├── screenshot_reddit.jpg
└── src
    ├── aligner.js
    ├── icon128.png
    ├── icon16.png
    ├── icon32.png
    ├── icon48.png
    ├── manifest.json
    ├── popup.html
    ├── popup.js
    └── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | INFO.fmw.md
3 | .idea/
4 | .vscode
5 | .history
6 | dist/
7 | design/
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Center-Pages Browser Extension
2 | 
3 | <img src="page_aligner_animation.gif" alt="animated gif" />
4 | 
5 | If you use a wide screen, you may have encountered websites with long endless lines across the whole width of your screen or websites which align to the very left side of your screen so close to the border that it hurts. For such websites you can use *Center Pages*. *Center-Pages* simply adds a margin to the sides, which you can increase/decrease via two buttons. Just have a look at the animated gif above.
6 | 
7 | You can get Center-Pages for Firefox at https://addons.mozilla.org and for Chrome at https://chrome.google.com/webstore/category/extensions.
8 | 


--------------------------------------------------------------------------------
/build.py:
--------------------------------------------------------------------------------
1 | import shutil
2 | 
3 | if __name__ == '__main__':
4 |     shutil.make_archive('dist/center-pages', 'zip', 'src')
5 | 


--------------------------------------------------------------------------------
/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feluxe/Center-Pages/a0de2eb258092e3cb980b0a3fd3b4ab0f5051e14/logo.jpg


--------------------------------------------------------------------------------
/page_aligner_animation.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feluxe/Center-Pages/a0de2eb258092e3cb980b0a3fd3b4ab0f5051e14/page_aligner_animation.gif


--------------------------------------------------------------------------------
/screenshot_reddit.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feluxe/Center-Pages/a0de2eb258092e3cb980b0a3fd3b4ab0f5051e14/screenshot_reddit.jpg


--------------------------------------------------------------------------------
/src/aligner.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function update(padding, align) {
 3 |   var newPadding =
 4 |     padding + parseInt(localStorage.getItem("centerPagesPadding") || 0);
 5 |   if (newPadding < 0) {
 6 |     newPadding = 0;
 7 |   }
 8 |   var newAlign = align || localStorage.getItem("centerPagesAlign") || "center";
 9 | 
10 |   var left = 0;
11 |   var right = 0;
12 |   if (newAlign === "left") {
13 |     right = newPadding * 2;
14 |   } else if (newAlign === "right") {
15 |     left = newPadding * 2;
16 |   } else {
17 |     left = newPadding;
18 |     right = newPadding;
19 |   }
20 |   var contentCont = document.documentElement;
21 |   contentCont.style.borderLeft = left.toFixed() + "px solid transparent";
22 |   contentCont.style.borderRight = right.toFixed() + "px solid transparent";
23 | 
24 |   // This is needed because of a bug with Chrome not re-rendering css immediately.
25 |   document.getElementsByTagName("body")[0].focus();
26 | 
27 |   localStorage.setItem("centerPagesPadding", newPadding);
28 |   localStorage.setItem("centerPagesAlign", newAlign);
29 | }
30 | 
31 | function query() {
32 |   return {
33 |     padding: localStorage.getItem("centerPagesPadding"),
34 |     align: localStorage.getItem("centerPagesAlign"),
35 |   };
36 | }
37 | 
38 | if (localStorage.getItem("centerPagesPadding")) {
39 |   update(0, "");
40 | }
41 | 
42 | chrome.runtime.onMessage.addListener(
43 |   /*
44 |     Listen to extension menu actions.
45 |    */
46 |   function (request, sender, sendResponse) {
47 |     if (request.query) {
48 |       sendResponse(query());
49 |     } else if (request.changePadding === "increase") {
50 |       update(+25, "");
51 |     } else if (request.changePadding === "decrease") {
52 |       update(-25, "");
53 |     } else if (request.changeAlign) {
54 |       update(0, request.changeAlign);
55 |     }
56 |   }
57 | );
58 | 


--------------------------------------------------------------------------------
/src/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feluxe/Center-Pages/a0de2eb258092e3cb980b0a3fd3b4ab0f5051e14/src/icon128.png


--------------------------------------------------------------------------------
/src/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feluxe/Center-Pages/a0de2eb258092e3cb980b0a3fd3b4ab0f5051e14/src/icon16.png


--------------------------------------------------------------------------------
/src/icon32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feluxe/Center-Pages/a0de2eb258092e3cb980b0a3fd3b4ab0f5051e14/src/icon32.png


--------------------------------------------------------------------------------
/src/icon48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feluxe/Center-Pages/a0de2eb258092e3cb980b0a3fd3b4ab0f5051e14/src/icon48.png


--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 2,
 3 |   "name": "Center Pages",
 4 |   "short_name": "center pages",
 5 |   "description": "Align pages to the center of your screen.",
 6 |   "version": "1.2.1",
 7 |   "author": "Felix Meyer-Wolters",
 8 |   "browser_action": {
 9 |     "default_icon": {
10 |       "16": "icon16.png",
11 |       "32": "icon32.png",
12 |       "48": "icon48.png",
13 |       "128": "icon128.png"
14 |     },
15 |     "default_popup": "popup.html"
16 |   },
17 |   "icons": {
18 |     "16": "icon16.png",
19 |     "32": "icon32.png",
20 |     "48": "icon48.png",
21 |     "128": "icon128.png"
22 |   },
23 |   "content_scripts": [
24 |     {
25 |       "matches": ["<all_urls>"],
26 |       "css": ["style.css"],
27 |       "js": ["aligner.js"],
28 |       "run_at": "document_end"
29 |     }
30 |   ],
31 |   "permissions": ["activeTab"]
32 | }
33 | 


--------------------------------------------------------------------------------
/src/popup.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <title>Page Aligner</title>
  6 |     <script src="popup.js"></script>
  7 |     <style>
  8 |       html {
  9 |         background-color: #fbfbfb;
 10 |         padding: 0;
 11 |         margin: 0;
 12 |       }
 13 | 
 14 |       body {
 15 |         border: 0;
 16 |         text-align: center;
 17 |         width: 130px;
 18 |         height: 100px;
 19 |         margin: 0;
 20 |         padding: 10px 0;
 21 |         overflow: hidden;
 22 |       }
 23 | 
 24 |       hr {
 25 |         width: 80%;
 26 |         border: 0;
 27 |         border-top: 1px solid #ccc;
 28 |       }
 29 | 
 30 |       button {
 31 |         border: 0;
 32 |         background: none;
 33 |         box-shadow: none;
 34 |         border-radius: 5px;
 35 |         padding: 0;
 36 |         display: inline-block;
 37 |         width: 40px;
 38 |         height: 40px;
 39 |         cursor: pointer;
 40 |       }
 41 | 
 42 |       button:hover {
 43 |         box-shadow: inset 0px 0px 5px 0px gray;
 44 |         border: 0;
 45 |       }
 46 | 
 47 |       *,
 48 |       *:focus,
 49 |       *:hover {
 50 |         outline: none;
 51 |       }
 52 | 
 53 |       input[type="radio"] {
 54 |         display: none;
 55 |       }
 56 | 
 57 |       input[type="radio"]:checked + label,
 58 |       input[type="radio"]:hover + label {
 59 |         box-shadow: inset 0px 0px 5px 0px gray;
 60 |       }
 61 | 
 62 |       input[type="radio"] + label {
 63 |         display: inline-block;
 64 |         cursor: pointer;
 65 |         border-radius: 5px;
 66 |       }
 67 | 
 68 |       label svg {
 69 |         width: 30px;
 70 |         height: 36px;
 71 |       }
 72 | 
 73 |       .align-container,
 74 |       label {
 75 |         height: 36px;
 76 |       }
 77 |     </style>
 78 |   </head>
 79 |   <body>
 80 |     <div>
 81 |       <button id="centerPagesIncrease" title="Increase spacing">
 82 |         <svg
 83 |           version="1.1"
 84 |           xmlns="http://www.w3.org/2000/svg"
 85 |           viewBox="0 0 100 100"
 86 |         >
 87 |           <rect x="20" y="42.5" width="60" height="15" fill="grey" />
 88 |           <rect x="42.5" y="20" width="15" height="60" fill="grey" />
 89 |         </svg>
 90 |       </button>
 91 |       <button id="centerPagesDecrease" title="Decrease spacing">
 92 |         <svg
 93 |           version="1.1"
 94 |           xmlns="http://www.w3.org/2000/svg"
 95 |           viewBox="0 0 100 100"
 96 |         >
 97 |           <rect x="20" y="40" width="60" height="15" fill="grey" />
 98 |         </svg>
 99 |       </button>
100 |     </div>
101 |     <hr />
102 |     <div class="align-container">
103 |       <input type="radio" id="alignLeft" name="centerPagesAlign" value="left" />
104 |       <label for="alignLeft" title="Left align">
105 |         <svg
106 |           version="1.1"
107 |           xmlns="http://www.w3.org/2000/svg"
108 |           viewBox="0 0 100 120"
109 |         >
110 |           <rect x="20" y="20" width="60" height="5" fill="black" />
111 |           <rect x="20" y="35" width="40" height="5" fill="black" />
112 |           <rect x="20" y="50" width="60" height="5" fill="black" />
113 |           <rect x="20" y="65" width="40" height="5" fill="black" />
114 |           <rect x="20" y="80" width="60" height="5" fill="black" />
115 |           <rect x="20" y="95" width="40" height="5" fill="black" />
116 |         </svg>
117 |       </label>
118 |       <input
119 |         type="radio"
120 |         id="alignCenter"
121 |         name="centerPagesAlign"
122 |         value="Left"
123 |       />
124 |       <label for="alignCenter" title="Center align">
125 |         <svg
126 |           version="1.1"
127 |           xmlns="http://www.w3.org/2000/svg"
128 |           viewBox="0 0 100 120"
129 |         >
130 |           <rect x="20" y="20" width="60" height="5" fill="black" />
131 |           <rect x="30" y="35" width="40" height="5" fill="black" />
132 |           <rect x="20" y="50" width="60" height="5" fill="black" />
133 |           <rect x="30" y="65" width="40" height="5" fill="black" />
134 |           <rect x="20" y="80" width="60" height="5" fill="black" />
135 |           <rect x="30" y="95" width="40" height="5" fill="black" />
136 |         </svg>
137 |       </label>
138 |       <input
139 |         type="radio"
140 |         id="alignRight"
141 |         name="centerPagesAlign"
142 |         value="right"
143 |       />
144 |       <label for="alignRight" title="Right align">
145 |         <svg
146 |           version="1.1"
147 |           xmlns="http://www.w3.org/2000/svg"
148 |           viewBox="0 0 100 120"
149 |         >
150 |           <rect x="20" y="20" width="60" height="5" fill="black" />
151 |           <rect x="40" y="35" width="40" height="5" fill="black" />
152 |           <rect x="20" y="50" width="60" height="5" fill="black" />
153 |           <rect x="40" y="65" width="40" height="5" fill="black" />
154 |           <rect x="20" y="80" width="60" height="5" fill="black" />
155 |           <rect x="40" y="95" width="40" height="5" fill="black" />
156 |         </svg>
157 |       </label>
158 |     </div>
159 |   </body>
160 | </html>
161 | 


--------------------------------------------------------------------------------
/src/popup.js:
--------------------------------------------------------------------------------
 1 | //
 2 | //
 3 | document.addEventListener('DOMContentLoaded', function () {
 4 |   var increaseButton = document.getElementById('centerPagesIncrease');
 5 |   var decreaseButton = document.getElementById('centerPagesDecrease');
 6 | 
 7 |   increaseButton.addEventListener('click', function () {
 8 |     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
 9 |       chrome.tabs.sendMessage(tabs[0].id, { changePadding: "increase" }, function () {
10 |         if (chrome.runtime.lastError) {   // This check will suppress the "Unchecked lastError value ..." msg.
11 |           return
12 |         }
13 |       });
14 |     });
15 |   }, false);
16 | 
17 |   decreaseButton.addEventListener('click', function () {
18 |     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
19 |       chrome.tabs.sendMessage(tabs[0].id, { changePadding: "decrease" }, function () {
20 |         if (chrome.runtime.lastError) {   // This check will suppress the "Unchecked lastError value ..." msg.
21 |           return
22 |         }
23 |       });
24 |     });
25 |   }, false);
26 | 
27 |   // check radio box
28 |   var radioBoxes = document.querySelectorAll("input[name='centerPagesAlign']");
29 |   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
30 |     if (tabs.length === 0) {
31 |       return;
32 |     }
33 |     chrome.tabs.sendMessage(tabs[0].id, { query: true }, function (response) {
34 |       if (chrome.runtime.lastError) {   // This check will suppress the "Unchecked lastError value ..." msg.
35 |         return
36 |       }
37 |       for (var i = 0; i < radioBoxes.length; ++i) {
38 |         if (radioBoxes[i].value === response.align) {
39 |           radioBoxes[i].checked = true;
40 |           break;
41 |         }
42 |       }
43 |     });
44 |   });
45 | 
46 |   // radio box click event
47 |   for (var i = 0; i < radioBoxes.length; ++i) {
48 |     radioBoxes[i].addEventListener('change', function (event) {
49 |       chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
50 |         chrome.tabs.sendMessage(tabs[0].id, { changeAlign: event.target.value }, function () {
51 |           if (chrome.runtime.lastError) {   // This check will suppress the "Unchecked lastError value ..." msg.
52 |             return
53 |           }
54 |         });
55 |       });
56 |     }, false);
57 |   }
58 | 
59 | }, false);
60 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | 
2 | 


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