├── .eslintrc.json ├── .gitignore ├── LICENSE ├── README.md ├── images ├── add_feeds.png ├── empty_popup.png ├── full_popup.png └── settings.png ├── package.json ├── src ├── _utils.scss ├── assets │ ├── check.svg │ ├── delete.svg │ ├── logo_color.svg │ ├── logo_dark.svg │ ├── logo_light.svg │ └── settings.svg ├── background │ ├── background.ts │ └── parser.ts ├── find │ ├── find.pug │ ├── find.scss │ └── find.ts ├── manage │ ├── export.ts │ ├── import.ts │ ├── manage.html │ ├── manage.scss │ ├── manage.ts │ ├── populate.ts │ └── sync.ts ├── manifest.json ├── popup │ ├── populate.ts │ ├── popup.html │ ├── popup.scss │ └── popup.ts └── typings.d.ts ├── tsconfig.json ├── webpack.config.js └── yarn.lock /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "ignorePatterns": ["dist"], 3 | "env": { 4 | "browser": true, 5 | "es2020": true, 6 | "webextensions": true 7 | }, 8 | "extends": [ 9 | "eslint:recommended", 10 | "plugin:@typescript-eslint/recommended" 11 | ], 12 | "parser": "@typescript-eslint/parser", 13 | "parserOptions": { 14 | "ecmaVersion": 11, 15 | "sourceType": "module" 16 | }, 17 | "plugins": [ 18 | "@typescript-eslint" 19 | ], 20 | "rules": { 21 | "@typescript-eslint/no-non-null-assertion": 0, 22 | "indent": [ 23 | "error", 24 | "tab" 25 | ], 26 | "linebreak-style": [ 27 | "error", 28 | "unix" 29 | ], 30 | "quotes": [ 31 | "error", 32 | "double" 33 | ], 34 | "semi": [ 35 | "error", 36 | "always" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | dist 61 | web-ext-artifacts 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Mozilla Public License Version 2.0 2 | ================================== 3 | 4 | 1. Definitions 5 | -------------- 6 | 7 | 1.1. "Contributor" 8 | means each individual or legal entity that creates, contributes to 9 | the creation of, or owns Covered Software. 10 | 11 | 1.2. "Contributor Version" 12 | means the combination of the Contributions of others (if any) used 13 | by a Contributor and that particular Contributor's Contribution. 14 | 15 | 1.3. "Contribution" 16 | means Covered Software of a particular Contributor. 17 | 18 | 1.4. "Covered Software" 19 | means Source Code Form to which the initial Contributor has attached 20 | the notice in Exhibit A, the Executable Form of such Source Code 21 | Form, and Modifications of such Source Code Form, in each case 22 | including portions thereof. 23 | 24 | 1.5. "Incompatible With Secondary Licenses" 25 | means 26 | 27 | (a) that the initial Contributor has attached the notice described 28 | in Exhibit B to the Covered Software; or 29 | 30 | (b) that the Covered Software was made available under the terms of 31 | version 1.1 or earlier of the License, but not also under the 32 | terms of a Secondary License. 33 | 34 | 1.6. "Executable Form" 35 | means any form of the work other than Source Code Form. 36 | 37 | 1.7. "Larger Work" 38 | means a work that combines Covered Software with other material, in 39 | a separate file or files, that is not Covered Software. 40 | 41 | 1.8. "License" 42 | means this document. 43 | 44 | 1.9. "Licensable" 45 | means having the right to grant, to the maximum extent possible, 46 | whether at the time of the initial grant or subsequently, any and 47 | all of the rights conveyed by this License. 48 | 49 | 1.10. "Modifications" 50 | means any of the following: 51 | 52 | (a) any file in Source Code Form that results from an addition to, 53 | deletion from, or modification of the contents of Covered 54 | Software; or 55 | 56 | (b) any new file in Source Code Form that contains any Covered 57 | Software. 58 | 59 | 1.11. "Patent Claims" of a Contributor 60 | means any patent claim(s), including without limitation, method, 61 | process, and apparatus claims, in any patent Licensable by such 62 | Contributor that would be infringed, but for the grant of the 63 | License, by the making, using, selling, offering for sale, having 64 | made, import, or transfer of either its Contributions or its 65 | Contributor Version. 66 | 67 | 1.12. "Secondary License" 68 | means either the GNU General Public License, Version 2.0, the GNU 69 | Lesser General Public License, Version 2.1, the GNU Affero General 70 | Public License, Version 3.0, or any later versions of those 71 | licenses. 72 | 73 | 1.13. "Source Code Form" 74 | means the form of the work preferred for making modifications. 75 | 76 | 1.14. "You" (or "Your") 77 | means an individual or a legal entity exercising rights under this 78 | License. For legal entities, "You" includes any entity that 79 | controls, is controlled by, or is under common control with You. For 80 | purposes of this definition, "control" means (a) the power, direct 81 | or indirect, to cause the direction or management of such entity, 82 | whether by contract or otherwise, or (b) ownership of more than 83 | fifty percent (50%) of the outstanding shares or beneficial 84 | ownership of such entity. 85 | 86 | 2. License Grants and Conditions 87 | -------------------------------- 88 | 89 | 2.1. Grants 90 | 91 | Each Contributor hereby grants You a world-wide, royalty-free, 92 | non-exclusive license: 93 | 94 | (a) under intellectual property rights (other than patent or trademark) 95 | Licensable by such Contributor to use, reproduce, make available, 96 | modify, display, perform, distribute, and otherwise exploit its 97 | Contributions, either on an unmodified basis, with Modifications, or 98 | as part of a Larger Work; and 99 | 100 | (b) under Patent Claims of such Contributor to make, use, sell, offer 101 | for sale, have made, import, and otherwise transfer either its 102 | Contributions or its Contributor Version. 103 | 104 | 2.2. Effective Date 105 | 106 | The licenses granted in Section 2.1 with respect to any Contribution 107 | become effective for each Contribution on the date the Contributor first 108 | distributes such Contribution. 109 | 110 | 2.3. Limitations on Grant Scope 111 | 112 | The licenses granted in this Section 2 are the only rights granted under 113 | this License. No additional rights or licenses will be implied from the 114 | distribution or licensing of Covered Software under this License. 115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a 116 | Contributor: 117 | 118 | (a) for any code that a Contributor has removed from Covered Software; 119 | or 120 | 121 | (b) for infringements caused by: (i) Your and any other third party's 122 | modifications of Covered Software, or (ii) the combination of its 123 | Contributions with other software (except as part of its Contributor 124 | Version); or 125 | 126 | (c) under Patent Claims infringed by Covered Software in the absence of 127 | its Contributions. 128 | 129 | This License does not grant any rights in the trademarks, service marks, 130 | or logos of any Contributor (except as may be necessary to comply with 131 | the notice requirements in Section 3.4). 132 | 133 | 2.4. Subsequent Licenses 134 | 135 | No Contributor makes additional grants as a result of Your choice to 136 | distribute the Covered Software under a subsequent version of this 137 | License (see Section 10.2) or under the terms of a Secondary License (if 138 | permitted under the terms of Section 3.3). 139 | 140 | 2.5. Representation 141 | 142 | Each Contributor represents that the Contributor believes its 143 | Contributions are its original creation(s) or it has sufficient rights 144 | to grant the rights to its Contributions conveyed by this License. 145 | 146 | 2.6. Fair Use 147 | 148 | This License is not intended to limit any rights You have under 149 | applicable copyright doctrines of fair use, fair dealing, or other 150 | equivalents. 151 | 152 | 2.7. Conditions 153 | 154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted 155 | in Section 2.1. 156 | 157 | 3. Responsibilities 158 | ------------------- 159 | 160 | 3.1. Distribution of Source Form 161 | 162 | All distribution of Covered Software in Source Code Form, including any 163 | Modifications that You create or to which You contribute, must be under 164 | the terms of this License. You must inform recipients that the Source 165 | Code Form of the Covered Software is governed by the terms of this 166 | License, and how they can obtain a copy of this License. You may not 167 | attempt to alter or restrict the recipients' rights in the Source Code 168 | Form. 169 | 170 | 3.2. Distribution of Executable Form 171 | 172 | If You distribute Covered Software in Executable Form then: 173 | 174 | (a) such Covered Software must also be made available in Source Code 175 | Form, as described in Section 3.1, and You must inform recipients of 176 | the Executable Form how they can obtain a copy of such Source Code 177 | Form by reasonable means in a timely manner, at a charge no more 178 | than the cost of distribution to the recipient; and 179 | 180 | (b) You may distribute such Executable Form under the terms of this 181 | License, or sublicense it under different terms, provided that the 182 | license for the Executable Form does not attempt to limit or alter 183 | the recipients' rights in the Source Code Form under this License. 184 | 185 | 3.3. Distribution of a Larger Work 186 | 187 | You may create and distribute a Larger Work under terms of Your choice, 188 | provided that You also comply with the requirements of this License for 189 | the Covered Software. If the Larger Work is a combination of Covered 190 | Software with a work governed by one or more Secondary Licenses, and the 191 | Covered Software is not Incompatible With Secondary Licenses, this 192 | License permits You to additionally distribute such Covered Software 193 | under the terms of such Secondary License(s), so that the recipient of 194 | the Larger Work may, at their option, further distribute the Covered 195 | Software under the terms of either this License or such Secondary 196 | License(s). 197 | 198 | 3.4. Notices 199 | 200 | You may not remove or alter the substance of any license notices 201 | (including copyright notices, patent notices, disclaimers of warranty, 202 | or limitations of liability) contained within the Source Code Form of 203 | the Covered Software, except that You may alter any license notices to 204 | the extent required to remedy known factual inaccuracies. 205 | 206 | 3.5. Application of Additional Terms 207 | 208 | You may choose to offer, and to charge a fee for, warranty, support, 209 | indemnity or liability obligations to one or more recipients of Covered 210 | Software. However, You may do so only on Your own behalf, and not on 211 | behalf of any Contributor. You must make it absolutely clear that any 212 | such warranty, support, indemnity, or liability obligation is offered by 213 | You alone, and You hereby agree to indemnify every Contributor for any 214 | liability incurred by such Contributor as a result of warranty, support, 215 | indemnity or liability terms You offer. You may include additional 216 | disclaimers of warranty and limitations of liability specific to any 217 | jurisdiction. 218 | 219 | 4. Inability to Comply Due to Statute or Regulation 220 | --------------------------------------------------- 221 | 222 | If it is impossible for You to comply with any of the terms of this 223 | License with respect to some or all of the Covered Software due to 224 | statute, judicial order, or regulation then You must: (a) comply with 225 | the terms of this License to the maximum extent possible; and (b) 226 | describe the limitations and the code they affect. Such description must 227 | be placed in a text file included with all distributions of the Covered 228 | Software under this License. Except to the extent prohibited by statute 229 | or regulation, such description must be sufficiently detailed for a 230 | recipient of ordinary skill to be able to understand it. 231 | 232 | 5. Termination 233 | -------------- 234 | 235 | 5.1. The rights granted under this License will terminate automatically 236 | if You fail to comply with any of its terms. However, if You become 237 | compliant, then the rights granted under this License from a particular 238 | Contributor are reinstated (a) provisionally, unless and until such 239 | Contributor explicitly and finally terminates Your grants, and (b) on an 240 | ongoing basis, if such Contributor fails to notify You of the 241 | non-compliance by some reasonable means prior to 60 days after You have 242 | come back into compliance. Moreover, Your grants from a particular 243 | Contributor are reinstated on an ongoing basis if such Contributor 244 | notifies You of the non-compliance by some reasonable means, this is the 245 | first time You have received notice of non-compliance with this License 246 | from such Contributor, and You become compliant prior to 30 days after 247 | Your receipt of the notice. 248 | 249 | 5.2. If You initiate litigation against any entity by asserting a patent 250 | infringement claim (excluding declaratory judgment actions, 251 | counter-claims, and cross-claims) alleging that a Contributor Version 252 | directly or indirectly infringes any patent, then the rights granted to 253 | You by any and all Contributors for the Covered Software under Section 254 | 2.1 of this License shall terminate. 255 | 256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all 257 | end user license agreements (excluding distributors and resellers) which 258 | have been validly granted by You or Your distributors under this License 259 | prior to termination shall survive termination. 260 | 261 | ************************************************************************ 262 | * * 263 | * 6. Disclaimer of Warranty * 264 | * ------------------------- * 265 | * * 266 | * Covered Software is provided under this License on an "as is" * 267 | * basis, without warranty of any kind, either expressed, implied, or * 268 | * statutory, including, without limitation, warranties that the * 269 | * Covered Software is free of defects, merchantable, fit for a * 270 | * particular purpose or non-infringing. The entire risk as to the * 271 | * quality and performance of the Covered Software is with You. * 272 | * Should any Covered Software prove defective in any respect, You * 273 | * (not any Contributor) assume the cost of any necessary servicing, * 274 | * repair, or correction. This disclaimer of warranty constitutes an * 275 | * essential part of this License. No use of any Covered Software is * 276 | * authorized under this License except under this disclaimer. * 277 | * * 278 | ************************************************************************ 279 | 280 | ************************************************************************ 281 | * * 282 | * 7. Limitation of Liability * 283 | * -------------------------- * 284 | * * 285 | * Under no circumstances and under no legal theory, whether tort * 286 | * (including negligence), contract, or otherwise, shall any * 287 | * Contributor, or anyone who distributes Covered Software as * 288 | * permitted above, be liable to You for any direct, indirect, * 289 | * special, incidental, or consequential damages of any character * 290 | * including, without limitation, damages for lost profits, loss of * 291 | * goodwill, work stoppage, computer failure or malfunction, or any * 292 | * and all other commercial damages or losses, even if such party * 293 | * shall have been informed of the possibility of such damages. This * 294 | * limitation of liability shall not apply to liability for death or * 295 | * personal injury resulting from such party's negligence to the * 296 | * extent applicable law prohibits such limitation. Some * 297 | * jurisdictions do not allow the exclusion or limitation of * 298 | * incidental or consequential damages, so this exclusion and * 299 | * limitation may not apply to You. * 300 | * * 301 | ************************************************************************ 302 | 303 | 8. Litigation 304 | ------------- 305 | 306 | Any litigation relating to this License may be brought only in the 307 | courts of a jurisdiction where the defendant maintains its principal 308 | place of business and such litigation shall be governed by laws of that 309 | jurisdiction, without reference to its conflict-of-law provisions. 310 | Nothing in this Section shall prevent a party's ability to bring 311 | cross-claims or counter-claims. 312 | 313 | 9. Miscellaneous 314 | ---------------- 315 | 316 | This License represents the complete agreement concerning the subject 317 | matter hereof. If any provision of this License is held to be 318 | unenforceable, such provision shall be reformed only to the extent 319 | necessary to make it enforceable. Any law or regulation which provides 320 | that the language of a contract shall be construed against the drafter 321 | shall not be used to construe this License against a Contributor. 322 | 323 | 10. Versions of the License 324 | --------------------------- 325 | 326 | 10.1. New Versions 327 | 328 | Mozilla Foundation is the license steward. Except as provided in Section 329 | 10.3, no one other than the license steward has the right to modify or 330 | publish new versions of this License. Each version will be given a 331 | distinguishing version number. 332 | 333 | 10.2. Effect of New Versions 334 | 335 | You may distribute the Covered Software under the terms of the version 336 | of the License under which You originally received the Covered Software, 337 | or under the terms of any subsequent version published by the license 338 | steward. 339 | 340 | 10.3. Modified Versions 341 | 342 | If you create software not governed by this License, and you want to 343 | create a new license for such software, you may create and use a 344 | modified version of this License if you rename the license and remove 345 | any references to the name of the license steward (except to note that 346 | such modified license differs from this License). 347 | 348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary 349 | Licenses 350 | 351 | If You choose to distribute Source Code Form that is Incompatible With 352 | Secondary Licenses under the terms of this version of the License, the 353 | notice described in Exhibit B of this License must be attached. 354 | 355 | Exhibit A - Source Code Form License Notice 356 | ------------------------------------------- 357 | 358 | This Source Code Form is subject to the terms of the Mozilla Public 359 | License, v. 2.0. If a copy of the MPL was not distributed with this 360 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 361 | 362 | If it is not possible or desirable to put the notice in a particular 363 | file, then You may include the notice in a location (such as a LICENSE 364 | file in a relevant directory) where a recipient would be likely to look 365 | for such a notice. 366 | 367 | You may add additional accurate notices of copyright ownership. 368 | 369 | Exhibit B - "Incompatible With Secondary Licenses" Notice 370 | --------------------------------------------------------- 371 | 372 | This Source Code Form is "Incompatible With Secondary Licenses", as 373 | defined by the Mozilla Public License, v. 2.0. 374 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Easy RSS 2 | 3 | Are you an avid consumer of internet media? Are you frustrated by the lack of a 4 | consistent way of getting notifications for the content that you love? If you 5 | answer yes to any of these questions, then RSS feeds are the solution for you! 6 | 7 | There is _one_ problem i didn't mention... 8 | 9 | RSS feeds are an old technology straight from the 90s, and because of that most 10 | RSS readers and managers look like they are from the same era. 11 | 12 | That's why i made Easy RSS! The RSS manager for the common internet denizen! 13 | This stylish and modern RSS manager takes all the simplicity of the RSS format, 14 | and incorporates it into a modern and stylish design to create an easy to use 15 | but still powerful piece of software. 16 | 17 | Easy RSS includes features such as: 18 | 19 | - Synchronizing your YouTube subscriptions, so you no longer have to worry 20 | about a spooky algorithm controlling what you see. 21 | - Importing and exporting your feeds to and from other RSS readers, so you can 22 | easily adopt Easy RSS, or leave for another RSS reader if you feel like it 23 | (altough I shouldn't tell you that if I want a higher usercount). 24 | - A simple and easy to understand modern UI that makes sure you are never lost 25 | in settings pages and Windows XP-esque dialogs 26 | 27 | ## Building 28 | 29 | 1. Make sure you have yarn installed 30 | 2. Run `yarn install` 31 | 3. Run `yarn dist` 32 | 4. Enjoy the compiled code in the `dist` folder and the extension .zip file in `web-ext-artifacts`! 33 | 5. ... 34 | 6. Profit! 35 | 36 | ## Screenshots 37 | 38 | ![Add Feeds](images/add_feeds.png "Add Feeds") 39 | 40 | ![Empty Popup](images/empty_popup.png "Empty Popup") 41 | 42 | ![Full Popup](images/full_popup.png "Full Popup") 43 | 44 | ![Settings](images/settings.png "Settings") 45 | -------------------------------------------------------------------------------- /images/add_feeds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arguablykomodo/easy-rss/f02b8ec1f0d812536374e229fd47d09718528b5d/images/add_feeds.png -------------------------------------------------------------------------------- /images/empty_popup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arguablykomodo/easy-rss/f02b8ec1f0d812536374e229fd47d09718528b5d/images/empty_popup.png -------------------------------------------------------------------------------- /images/full_popup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arguablykomodo/easy-rss/f02b8ec1f0d812536374e229fd47d09718528b5d/images/full_popup.png -------------------------------------------------------------------------------- /images/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arguablykomodo/easy-rss/f02b8ec1f0d812536374e229fd47d09718528b5d/images/settings.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "easy-rss", 3 | "version": "1.3.1", 4 | "repository": "git@github.com:SrKomodo/easy-rss.git", 5 | "author": "Sr Komodo ", 6 | "license": "MPL-2.0", 7 | "scripts": { 8 | "start": "webpack --mode development --env.dev -w", 9 | "watch": "web-ext run -s dist/", 10 | "build": "webpack --mode production --env.prod", 11 | "dist": "yarn build && web-ext build -s dist/", 12 | "lint": "eslint ." 13 | }, 14 | "devDependencies": { 15 | "@typescript-eslint/eslint-plugin": "^3.7.1", 16 | "@typescript-eslint/parser": "^3.7.1", 17 | "copy-webpack-plugin": "^6.0.3", 18 | "css-loader": "^4.1.1", 19 | "eslint": "^7.5.0", 20 | "mini-css-extract-plugin": "^0.9.0", 21 | "node-sass": "^4.14.1", 22 | "pug": "^3.0.0", 23 | "pug-loader": "^2.4.0", 24 | "sass-loader": "^9.0.2", 25 | "ts-loader": "^8.0.1", 26 | "typescript": "^3.9.7", 27 | "web-ext": "^5.0.0", 28 | "web-ext-types": "^3.2.1", 29 | "webpack": "^4.44.1", 30 | "webpack-cli": "^3.3.12" 31 | }, 32 | "dependencies": { 33 | "photon-colors": "^3.3.2" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/_utils.scss: -------------------------------------------------------------------------------- 1 | @mixin hover { 2 | cursor: pointer; 3 | transition: background 0.25s; 4 | &:hover { 5 | background: rgba(white, 0.1); 6 | } 7 | } 8 | 9 | @mixin shadow { 10 | box-shadow: 0 4px 16px rgba(12, 12, 13, 0.2); 11 | } 12 | 13 | button { 14 | padding: 0.5em; 15 | border: none; 16 | border-radius: 4px; 17 | background: $ink-60; 18 | color: white; 19 | outline: 0 !important; 20 | 21 | transition: background 0.25s cubic-bezier(0.07, 0.95, 0, 1); 22 | &:hover { 23 | background: $ink-70; 24 | box-shadow: 0 0 0 2px $ink-60; 25 | } 26 | &:active { 27 | background: $ink-80; 28 | } 29 | 30 | &::-moz-focus-inner { 31 | border: 0; 32 | outline: 0; 33 | } 34 | } 35 | 36 | input[type="range"] { 37 | background: none; 38 | min-width: 300px; 39 | 40 | &::-moz-range-track { 41 | height: 2px; 42 | background: rgba($grey-10, 0.3); 43 | } 44 | 45 | &::-moz-range-thumb { 46 | width: 14px; 47 | height: 14px; 48 | border: 1px solid $ink-60; 49 | background: $ink-50; 50 | border-radius: 100%; 51 | } 52 | 53 | &:focus { 54 | box-shadow: none; 55 | } 56 | 57 | &:hover::-moz-range-thumb { 58 | background: $ink-60; 59 | border-color: $ink-80; 60 | } 61 | 62 | &:active::-moz-range-thumb { 63 | background: $ink-70; 64 | border-color: $ink-80; 65 | } 66 | } 67 | 68 | input[type="text"], 69 | input[type="url"] { 70 | background: $ink-70; 71 | color: white; 72 | border: none; 73 | border-radius: 4px; 74 | padding: 8px; 75 | } 76 | -------------------------------------------------------------------------------- /src/assets/check.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/assets/delete.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/assets/logo_color.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/assets/logo_dark.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/assets/logo_light.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/assets/settings.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/background/background.ts: -------------------------------------------------------------------------------- 1 | import { fetchEntries } from "./parser"; 2 | 3 | browser.storage.sync.get(["entries", "read"]).then(({ entries, read }) => { 4 | if (entries) { 5 | console.log("migrating entry data to local storage..."); 6 | browser.storage.local.set({ entries }); 7 | browser.storage.sync.remove("entries"); 8 | } 9 | if (read) { 10 | console.log("migrating read data to local storage..."); 11 | browser.storage.local.set({ read }); 12 | browser.storage.sync.remove("read"); 13 | } 14 | }); 15 | 16 | const sorter = (a: Entry, b: Entry) => 17 | new Date(b.date).getTime() - new Date(a.date).getTime(); 18 | 19 | async function fetch() { 20 | browser.browserAction.setBadgeBackgroundColor({ color: "#3b88c3" }); 21 | browser.browserAction.setBadgeText({ text: "🕒" }); 22 | const feeds: Feed[] = (await browser.storage.sync.get({ feeds: [] })).feeds; 23 | 24 | const toFetch: Array> = []; 25 | for (const feed of feeds) { 26 | toFetch.push(fetchEntries(feed)); 27 | } 28 | 29 | const entries = ([] as Entry[]).concat(...(await Promise.all(toFetch))); 30 | entries.sort(sorter); 31 | 32 | browser.storage.local.set({ entries: entries as unknown as StorageValue }); 33 | } 34 | fetch(); 35 | 36 | browser.storage.sync.get({ interval: 5 }).then(results => { 37 | browser.alarms.create("fetch", { periodInMinutes: results.interval }); 38 | browser.alarms.onAlarm.addListener(fetch); 39 | }); 40 | 41 | browser.storage.onChanged.addListener(async (changes, areaName) => { 42 | if (changes.feeds) { 43 | fetch(); 44 | } 45 | 46 | if (changes.interval) { 47 | await browser.alarms.clear("fetch"); 48 | browser.alarms.create("fetch", { 49 | periodInMinutes: changes.interval.newValue 50 | }); 51 | } 52 | 53 | if ((changes.read || changes.entries) && areaName === "local") { 54 | const read: string[] = changes.read && changes.read.newValue 55 | ? changes.read.newValue 56 | : (await browser.storage.local.get({ read: [] })).read; 57 | const entries: Entry[] = changes.entries && changes.entries.newValue 58 | ? changes.entries.newValue 59 | : (await browser.storage.local.get({ entries: [] })).entries; 60 | 61 | let unread = 0; 62 | for (const entry of entries) if (read.indexOf(entry.id) === -1) unread++; 63 | 64 | browser.browserAction.setBadgeBackgroundColor({ color: "#dd2e44" }); 65 | browser.browserAction.setBadgeText({ 66 | text: unread === 0 ? "" : unread.toString() 67 | }); 68 | } 69 | }); 70 | -------------------------------------------------------------------------------- /src/background/parser.ts: -------------------------------------------------------------------------------- 1 | interface Option { 2 | selector: string; 3 | attribute?: string; 4 | } 5 | 6 | type Key = "id" | "title" | "link" | "date" | "icon" | "author"; 7 | 8 | const attributes: { [x: string]: Option[] } = { 9 | author: [{ selector: "author name" }, { selector: "author" }], 10 | date: [ 11 | { selector: "published" }, 12 | { selector: "updated" }, 13 | { selector: "pubDate" } 14 | ], 15 | id: [{ selector: "id" }, { selector: "guid" }], 16 | link: [{ selector: "link", attribute: "href" }, { selector: "link" }], 17 | title: [{ selector: "title" }] 18 | }; 19 | 20 | const domainRegex = /[/?#]/; 21 | 22 | function parse(el: Element, feed: Feed) { 23 | const entry: Entry = { 24 | id: "", 25 | title: "", 26 | link: "", 27 | date: "", 28 | icon: "", 29 | author: "", 30 | }; 31 | 32 | for (const attribute in attributes) { 33 | const options = attributes[attribute]; 34 | for (const option of options) { 35 | if (entry[attribute as Key]) continue; 36 | const element = el.querySelector(option.selector); 37 | if (element) { 38 | if (option.attribute) 39 | entry[attribute as Key] = element.getAttribute(option.attribute)!; 40 | else entry[attribute as Key] = element.textContent!; 41 | } 42 | } 43 | } 44 | 45 | // Get icon 46 | let domain = feed.url; 47 | if (feed.url.startsWith("http://")) domain = domain.slice(7); 48 | if (feed.url.startsWith("https://")) domain = domain.slice(8); 49 | entry.icon = 50 | "http://www.google.com/s2/favicons?domain=" + domain.split(domainRegex)[0]; 51 | 52 | // Get thumbnail 53 | const thumbnail = el.getElementsByTagName("media:thumbnail")[0]; 54 | if (thumbnail) entry.thumbnail = thumbnail.getAttribute("url")!; 55 | 56 | return entry as Entry; 57 | } 58 | 59 | const parser = new DOMParser(); 60 | 61 | async function fetchEntries(feed: Feed): Promise { 62 | const src = await (await fetch(feed.url)).text(); 63 | const xml = parser.parseFromString(src, "application/xml"); 64 | const entries: Entry[] = []; 65 | for (const el of xml.querySelectorAll("entry, item")) 66 | entries.push(parse(el, feed)); 67 | return entries; 68 | } 69 | 70 | export { fetchEntries }; 71 | -------------------------------------------------------------------------------- /src/find/find.pug: -------------------------------------------------------------------------------- 1 | #dialog 2 | link(rel="stylesheet", href=css) 3 | if feeds.length === 0 4 | h2 Sorry, no feeds were found 5 | button#exit Ok 6 | else 7 | h2 Add the following feeds? 8 | #feeds 9 | each feed in feeds 10 | div 11 | input.enabled(type="checkbox") 12 | input.name(type="text" value=feed.name) 13 | input.url(type="hidden" value=feed.url) 14 | #buttons 15 | button#add Yes 16 | button#exit No 17 | -------------------------------------------------------------------------------- /src/find/find.scss: -------------------------------------------------------------------------------- 1 | @import "~photon-colors/photon-colors.scss"; 2 | @import "../utils"; 3 | 4 | #dialog { 5 | z-index: 2147483647; // 2^31-1, literally the biggest z-index possible 6 | position: fixed; 7 | top: 50%; 8 | left: 50%; 9 | transform: translate(-50%, -50%); 10 | 11 | display: flex; 12 | flex-direction: column; 13 | padding: 1em; 14 | 15 | background: $ink-70; 16 | color: white; 17 | font: caption; 18 | box-shadow: 0 0 0 100vmax rgba(black, 0.75); 19 | } 20 | 21 | #feeds div { 22 | display: flex; 23 | align-items: center; 24 | margin: 0.5em 0; 25 | } 26 | 27 | h2 { 28 | margin: 0.25em 0 0.5em; 29 | } 30 | 31 | input[type="text"] { 32 | background: $ink-60; 33 | padding: 4px; 34 | } 35 | 36 | #buttons { 37 | display: grid; 38 | grid-template-columns: 1fr 1fr; 39 | grid-gap: 1ch; 40 | margin-top: 0.5em; 41 | } 42 | -------------------------------------------------------------------------------- /src/find/find.ts: -------------------------------------------------------------------------------- 1 | import dialog from "./find.pug"; 2 | import "./find.scss"; 3 | 4 | const feedLinks: NodeListOf = document.querySelectorAll( 5 | "link[type=\"application/rss+xml\"], link[type=\"application/atom+xml\"]" 6 | ); 7 | 8 | const feeds: Feed[] = []; 9 | for (const f of feedLinks) { 10 | feeds.push({ 11 | name: f.title, 12 | url: f.href 13 | }); 14 | } 15 | 16 | const html = dialog({ 17 | css: browser.runtime.getURL("find/find.css"), 18 | feeds 19 | }); 20 | 21 | const div = document.createElement("div"); 22 | (div.style as { all: string }).all = "initial"; 23 | const shadow = div.attachShadow({ mode: "open" }); 24 | // This is safe because it goes through a template engine (pugjs) that makes sure everything is sanitized 25 | shadow.innerHTML = html; 26 | document.body.appendChild(div); 27 | 28 | shadow.getElementById("exit")!.addEventListener("click", () => div.remove()); 29 | shadow.getElementById("add")!.addEventListener("click", async () => { 30 | const newFeeds: Feed[] = []; 31 | for (const feed of shadow.querySelectorAll("#feeds div")) { 32 | const checked = feed.querySelector(".enabled") as HTMLInputElement; 33 | if (checked.checked) { 34 | const name = feed.querySelector(".name") as HTMLInputElement; 35 | const url = feed.querySelector(".url") as HTMLInputElement; 36 | newFeeds.push({ 37 | name: name.value, 38 | url: url.value 39 | }); 40 | } 41 | } 42 | 43 | const oldFeeds: Feed[] = (await browser.storage.sync.get({ feeds: [] })) 44 | .feeds; 45 | 46 | // Remove duplicates 47 | let i = oldFeeds.length; 48 | while (i--) { 49 | if (newFeeds.some(f => f.url === oldFeeds[i].url)) { 50 | oldFeeds.splice(i, 1); 51 | } 52 | } 53 | 54 | browser.storage.sync.set({ feeds: newFeeds.concat(oldFeeds) as unknown as StorageValue }); 55 | div.remove(); 56 | }); 57 | -------------------------------------------------------------------------------- /src/manage/export.ts: -------------------------------------------------------------------------------- 1 | const link = document.getElementById("download") as HTMLAnchorElement; 2 | 3 | async function exportFeeds(): Promise { 4 | const feeds: Feed[] = (await browser.storage.sync.get({ feeds: [] })).feeds; 5 | 6 | const xml = ` 7 | 8 | 9 | ${feeds 10 | .map(f => ``) 11 | .join("\n ")} 12 | 13 | `; 14 | const blob = new Blob([xml], { type: "text/xml" }); 15 | 16 | link.href = URL.createObjectURL(blob); 17 | link.click(); 18 | URL.revokeObjectURL(link.href); 19 | } 20 | 21 | export { exportFeeds }; 22 | -------------------------------------------------------------------------------- /src/manage/import.ts: -------------------------------------------------------------------------------- 1 | const input = document.getElementById("upload") as HTMLInputElement; 2 | 3 | async function importFeeds(): Promise { 4 | if (!(input.files && input.files[0])) return; 5 | const file = input.files[0]; 6 | const reader = new FileReader(); 7 | reader.onload = async () => { 8 | const src = reader.result as string; 9 | const parser = new DOMParser(); 10 | const xml = parser.parseFromString(src, "application/xml"); 11 | const feeds: Feed[] = []; 12 | for (const node of xml.querySelectorAll("outline[xmlUrl]")) { 13 | feeds.push({ 14 | name: node.getAttribute("title")!, 15 | url: node.getAttribute("xmlUrl")! 16 | }); 17 | } 18 | const oldFeeds: Feed[] = (await browser.storage.sync.get({ feeds: [] })) 19 | .feeds; 20 | 21 | // Remove duplicates 22 | let i = oldFeeds.length; 23 | while (i--) 24 | if (feeds.some(f => f.url === oldFeeds[i].url)) oldFeeds.splice(i, 1); 25 | 26 | browser.storage.sync.set({ feeds: oldFeeds.concat(feeds) as unknown as StorageValue }); 27 | location.reload(); 28 | }; 29 | reader.readAsText(file); 30 | } 31 | 32 | export { importFeeds }; 33 | -------------------------------------------------------------------------------- /src/manage/manage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Easy RSS 9 | 10 | 11 | 19 | 20 | 21 |

Easy RSS

22 |
23 |

Settings

24 |
25 | 26 | 27 | 1 minute 28 |
29 | 30 |
31 |
32 |

Feeds

33 | 34 |
35 | 36 | 37 | 38 | 39 |
40 |
41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/manage/manage.scss: -------------------------------------------------------------------------------- 1 | @import "~photon-colors/photon-colors.scss"; 2 | @import "../utils"; 3 | 4 | body { 5 | display: grid; 6 | grid-template-columns: 1fr max-content 1fr; 7 | 8 | margin: 1em; 9 | 10 | background: $ink-80; 11 | color: white; 12 | font: caption; 13 | -moz-user-select: none; 14 | 15 | & > * { 16 | grid-column: 2 / 3; 17 | } 18 | } 19 | 20 | * { 21 | box-sizing: border-box; 22 | } 23 | 24 | section { 25 | display: flex; 26 | flex-direction: column; 27 | padding: 0 1em 1em; 28 | margin-bottom: 1em; 29 | background: $ink-70; 30 | } 31 | 32 | .setting { 33 | display: flex; 34 | 35 | input { 36 | flex: 1; 37 | } 38 | } 39 | 40 | #saveSettings { 41 | margin-top: 1em; 42 | } 43 | 44 | h2 { 45 | display: flex; 46 | align-items: center; 47 | margin: 1em 0 0.5em; 48 | min-width: 20ch; 49 | } 50 | 51 | #sync { 52 | margin: 0.5em 0; 53 | } 54 | 55 | .buttonGroup { 56 | display: flex; 57 | margin-bottom: 1em; 58 | 59 | button { 60 | flex: 1; 61 | 62 | &:first-child { 63 | margin-right: 0.25em; 64 | } 65 | 66 | &:last-child { 67 | margin-left: 0.25em; 68 | } 69 | } 70 | } 71 | 72 | .feed { 73 | display: grid; 74 | grid-template-columns: max-content 1fr max-content; 75 | grid-gap: 0.5em; 76 | align-items: center; 77 | padding: 1em; 78 | margin: 0.5em 0; 79 | background: $ink-60; 80 | 81 | label { 82 | text-align: right; 83 | } 84 | 85 | .delete { 86 | padding: 4px; 87 | border-radius: 4px; 88 | @include hover(); 89 | 90 | &:active { 91 | background: rgba(black, 0.1); 92 | } 93 | } 94 | } 95 | 96 | .no_feeds { 97 | padding: 1em 2em; 98 | color: rgba(white, 0.5); 99 | text-align: center; 100 | } 101 | 102 | #download, 103 | #upload { 104 | display: none; 105 | } 106 | -------------------------------------------------------------------------------- /src/manage/manage.ts: -------------------------------------------------------------------------------- 1 | import "./manage.scss"; 2 | import { populateFeeds } from "./populate"; 3 | 4 | const interval = document.getElementById("interval") as HTMLInputElement; 5 | const intervalOutput = document.getElementById("intervalOutput")!; 6 | const saveSettings = document.getElementById("saveSettings")!; 7 | 8 | const minutes = (s: string) => `${s} ${s === "1" ? "minute" : "minutes"}`; 9 | 10 | saveSettings.addEventListener("click", () => { 11 | browser.storage.sync.set({ interval: parseInt(interval.value, 10) }); 12 | }); 13 | 14 | interval.addEventListener("input", () => { 15 | intervalOutput.textContent = minutes(interval.value); 16 | }); 17 | 18 | browser.storage.sync.get({ interval: 5, feeds: [] }).then(results => { 19 | interval.value = results.interval.toString(); 20 | intervalOutput.textContent = minutes(results.interval.toString()); 21 | populateFeeds(results.feeds); 22 | }); 23 | 24 | browser.storage.onChanged.addListener(changes => { 25 | if (changes.feeds) populateFeeds(changes.feeds.newValue); 26 | }); 27 | 28 | import { sync } from "./sync"; 29 | document.getElementById("sync")!.addEventListener("click", sync); 30 | 31 | import { exportFeeds } from "./export"; 32 | document.getElementById("export")!.addEventListener("click", exportFeeds); 33 | 34 | import { importFeeds } from "./import"; 35 | const upload = document.getElementById("upload") as HTMLInputElement; 36 | const importEl = document.getElementById("import")!; 37 | importEl.addEventListener("click", () => upload.click()); 38 | upload.addEventListener("change", importFeeds); 39 | -------------------------------------------------------------------------------- /src/manage/populate.ts: -------------------------------------------------------------------------------- 1 | const feedTemplate = document.getElementById("feed") as HTMLTemplateElement; 2 | const feedsEl = document.getElementById("feeds")!; 3 | 4 | async function populateFeeds(feeds: Feed[]): Promise { 5 | while (feedsEl.lastChild) feedsEl.removeChild(feedsEl.lastChild); 6 | 7 | if (feeds.length === 0) { 8 | const text = document.createElement("div"); 9 | text.className = "no_feeds"; 10 | text.textContent = "You have no feeds. Go find some!"; 11 | feedsEl.appendChild(text); 12 | } 13 | 14 | feeds.forEach((feed, i) => { 15 | const el = document.importNode(feedTemplate.content, true); 16 | 17 | const name = el.querySelector(".name") as HTMLInputElement; 18 | name.value = feed.name; 19 | name.addEventListener("change", () => { 20 | feeds[i].name = name.value; 21 | browser.storage.sync.set({ feeds: feeds as unknown as StorageValue }); 22 | }); 23 | 24 | const url = el.querySelector(".url") as HTMLInputElement; 25 | url.value = feed.url; 26 | url.addEventListener("change", () => { 27 | feeds[i].url = url.value; 28 | browser.storage.sync.set({ feeds: feeds as unknown as StorageValue }); 29 | }); 30 | 31 | el.querySelector(".delete")!.addEventListener("click", () => { 32 | feeds.splice(i, 1); 33 | browser.storage.sync.set({ feeds: feeds as unknown as StorageValue }); 34 | }); 35 | 36 | feedsEl.appendChild(el); 37 | }); 38 | } 39 | 40 | export { populateFeeds }; 41 | -------------------------------------------------------------------------------- /src/manage/sync.ts: -------------------------------------------------------------------------------- 1 | async function sync(): Promise { 2 | const r = await fetch( 3 | "https://www.youtube.com/subscription_manager?action_takeout=1" 4 | ); 5 | 6 | if (r.redirected) alert("Please login into YouTube to sync subscriptions"); 7 | else { 8 | const parser = new DOMParser(); 9 | const xml = parser.parseFromString(await r.text(), "application/xml"); 10 | const newFeeds: Feed[] = []; 11 | for (const node of xml.querySelectorAll("outline > outline")) { 12 | newFeeds.push({ 13 | name: node.getAttribute("title")!, 14 | url: node.getAttribute("xmlUrl")! 15 | }); 16 | } 17 | 18 | const feeds: Feed[] = (await browser.storage.sync.get({ feeds: [] })).feeds; 19 | 20 | // Remove existing youtube subs 21 | let i = feeds.length; 22 | while (i--) 23 | if (feeds[i].url.startsWith("https://www.youtube.com/feeds/videos.xml")) 24 | feeds.splice(i, 1); 25 | 26 | browser.storage.sync.set({ feeds: feeds.concat(newFeeds) as unknown as StorageValue }); 27 | } 28 | } 29 | 30 | export { sync }; 31 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "applications": { 3 | "gecko": { 4 | "id": "easyrss@srkomodo.com", 5 | "strict_min_version": "56.0" 6 | } 7 | }, 8 | 9 | "manifest_version": 2, 10 | "version": "1.3.2", 11 | 12 | "name": "Easy RSS", 13 | "description": "An RSS reader for both the common man and the power user", 14 | "homepage_url": "https://github.com/SrKomodo/easy-rss", 15 | "developer": { 16 | "name": "SrKomodo", 17 | "url": "https://github.com/SrKomodo" 18 | }, 19 | 20 | "icons": { 21 | "48": "assets/logo_color.svg", 22 | "96": "assets/logo_color.svg" 23 | }, 24 | 25 | "background": { 26 | "scripts": ["background/background.js"] 27 | }, 28 | 29 | "browser_action": { 30 | "browser_style": true, 31 | "default_title": "Easy RSS", 32 | "default_popup": "popup/popup.html", 33 | "theme_icons": [ 34 | { 35 | "light": "assets/logo_light.svg", 36 | "dark": "assets/logo_dark.svg", 37 | "size": 16 38 | }, 39 | { 40 | "light": "assets/logo_light.svg", 41 | "dark": "assets/logo_dark.svg", 42 | "size": 32 43 | } 44 | ] 45 | }, 46 | 47 | "options_ui": { 48 | "page": "manage/manage.html", 49 | "open_in_tab": true, 50 | "browser_style": true 51 | }, 52 | 53 | "permissions": ["", "activeTab", "storage", "alarms", "unlimitedStorage"], 54 | "web_accessible_resources": ["find/find.css"] 55 | } 56 | -------------------------------------------------------------------------------- /src/popup/populate.ts: -------------------------------------------------------------------------------- 1 | const entryTemplate = document.getElementById("entry") as HTMLTemplateElement; 2 | const entriesEl = document.getElementById("entries")!; 3 | 4 | async function populateEntries(): Promise { 5 | const { 6 | entries, 7 | read 8 | }: { entries: Entry[]; read: string[] } = await browser.storage.local.get({ 9 | entries: [], 10 | read: [] 11 | }); 12 | 13 | while (entriesEl.lastChild) entriesEl.removeChild(entriesEl.lastChild); 14 | 15 | let unread = 0; 16 | for (const entry of entries) if (read.indexOf(entry.id) === -1) unread++; 17 | if (unread === 0) { 18 | const text = document.createElement("div"); 19 | text.className = "empty"; 20 | text.textContent = "You are all caught up!"; 21 | entriesEl.appendChild(text); 22 | } 23 | 24 | let i = 0; 25 | for (const entry of entries) { 26 | if (i > 100) break; 27 | if (read.indexOf(entry.id) !== -1) continue; 28 | 29 | const el = document.importNode(entryTemplate.content, true); 30 | const entryEl = el.querySelector(".entry")!; 31 | 32 | el.querySelector(".icon")!.setAttribute("src", entry.icon); 33 | el.querySelector(".title")!.textContent = entry.title; 34 | el.querySelector(".author")!.textContent = entry.author; 35 | el.querySelector(".date")!.textContent = new Date( 36 | entry.date 37 | ).toLocaleDateString(); 38 | if (entry.thumbnail) 39 | el.querySelector(".thumbnail")!.setAttribute("src", entry.thumbnail); 40 | 41 | entryEl.addEventListener("click", async e => { 42 | read.push(entry.id); 43 | browser.storage.local.set({ read }); 44 | 45 | // Only open new tab if user didn't click the "mark as read" button 46 | if ((e.target as Element).className !== "read") 47 | browser.tabs.create({ url: entry.link }); 48 | }); 49 | 50 | entriesEl.appendChild(el); 51 | i++; 52 | } 53 | } 54 | 55 | export { populateEntries }; 56 | -------------------------------------------------------------------------------- /src/popup/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Easy RSS 9 | 10 | 11 | 21 | 22 | 23 | 32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /src/popup/popup.scss: -------------------------------------------------------------------------------- 1 | @import "~photon-colors/photon-colors.scss"; 2 | @import "../utils"; 3 | 4 | html { 5 | scrollbar-color: $ink-60 $ink-70; 6 | } 7 | 8 | body { 9 | display: flex; 10 | flex-direction: column; 11 | 12 | background: $ink-80; 13 | color: white; 14 | } 15 | 16 | nav { 17 | @include shadow; 18 | position: sticky; 19 | top: 0; 20 | display: flex; 21 | justify-content: end; 22 | 23 | background: $ink-70; 24 | } 25 | 26 | #openTools { 27 | padding: 0.5em; 28 | @include hover; 29 | } 30 | 31 | #tools { 32 | overflow: auto; 33 | display: flex; 34 | 35 | div { 36 | display: flex; 37 | align-items: center; 38 | 39 | padding: 0 1em; 40 | @include hover; 41 | } 42 | 43 | transition: clip-path 0.25s cubic-bezier(0.07, 0.95, 0, 1); 44 | clip-path: inset(0 0 0 100%); 45 | &.open { 46 | clip-path: inset(0 0 0 0); 47 | } 48 | } 49 | 50 | .empty { 51 | margin: 1em; 52 | text-align: center; 53 | } 54 | 55 | .entry { 56 | display: grid; 57 | grid-gap: 0.5em; 58 | grid-template-columns: max-content 1fr max-content max-content; 59 | grid-template-rows: min-content min-content; 60 | grid-template-areas: 61 | "icon title read thumbnail" 62 | "author author date thumbnail"; 63 | align-items: center; 64 | 65 | cursor: pointer; 66 | background: $ink-70; 67 | margin: 0.5em; 68 | padding: 0.5em; 69 | 70 | &:first-of-type .thumbnail { 71 | transform-origin: top right; 72 | } 73 | &:last-of-type .thumbnail { 74 | transform-origin: bottom right; 75 | } 76 | } 77 | 78 | $areas: "icon", "title", "read", "thumbnail", "author", "date", "thumbnail"; 79 | @each $area in $areas { 80 | .#{$area} { 81 | grid-area: #{$area}; 82 | } 83 | } 84 | 85 | .title { 86 | text-overflow: ellipsis; 87 | } 88 | 89 | .read { 90 | justify-self: flex-end; 91 | } 92 | 93 | .author, 94 | .date { 95 | align-self: flex-end; 96 | } 97 | 98 | .thumbnail { 99 | max-height: 3em; 100 | transform-origin: center right; 101 | 102 | transition: transform 0.25s cubic-bezier(0.07, 0.95, 0, 1); 103 | &:hover { 104 | transform: scale(4); 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /src/popup/popup.ts: -------------------------------------------------------------------------------- 1 | import { populateEntries } from "./populate"; 2 | import "./popup.scss"; 3 | 4 | // Find feeds in page 5 | document.getElementById("find")!.addEventListener("click", () => { 6 | browser.tabs.executeScript(undefined, { file: "/find/find.js" }); 7 | }); 8 | 9 | // Add new feed 10 | const add = document.getElementById("add") as HTMLDivElement; 11 | add.addEventListener("click", () => { 12 | add.textContent = "URL: "; 13 | const input = document.createElement("input"); 14 | input.type = "url"; 15 | input.addEventListener("change", async () => { 16 | const feeds: Feed[] = (await browser.storage.sync.get({ feeds: [] })).feeds; 17 | feeds.unshift({ url: input.value, name: "" }); 18 | browser.storage.sync.set({ feeds: feeds as unknown as StorageValue }); 19 | 20 | add.removeChild(input); 21 | add.textContent = "Add new feed"; 22 | }); 23 | add.appendChild(input); 24 | input.focus(); 25 | }); 26 | 27 | // Open tools 28 | const tools = document.getElementById("tools")!; 29 | document 30 | .getElementById("openTools")! 31 | .addEventListener("click", () => tools.classList.toggle("open")); 32 | 33 | // Open settings 34 | document 35 | .getElementById("manage")! 36 | .addEventListener("click", () => browser.runtime.openOptionsPage()); 37 | 38 | // Mark all as read 39 | document.getElementById("clear")!.addEventListener("click", async () => { 40 | const { 41 | entries, 42 | read 43 | }: { entries: Entry[]; read: string[] } = await browser.storage.local.get({ 44 | entries: [], 45 | read: [] 46 | }); 47 | 48 | for (const entry of entries) 49 | if (read.indexOf(entry.id) === -1) read.push(entry.id); 50 | browser.storage.local.set({ read }); 51 | }); 52 | 53 | populateEntries(); 54 | browser.storage.onChanged.addListener((changes, areaName) => { 55 | if ((changes.read || changes.entries) && areaName === "local") { 56 | populateEntries(); 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.pug" { 2 | const generator: (params: { [x: string]: unknown }) => string; 3 | export default generator; 4 | } 5 | 6 | interface Feed { 7 | name: string; 8 | url: string; 9 | } 10 | 11 | interface Entry { 12 | id: string; 13 | title: string; 14 | link: string; 15 | date: string; 16 | icon: string; 17 | author: string; 18 | thumbnail?: string; 19 | } 20 | 21 | type StorageValue = browser.storage.StorageValue; 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2017", 4 | "strict": true, 5 | "outDir": "dist", 6 | "sourceMap": true, 7 | "typeRoots": ["node_modules/@types", "node_modules/web-ext-types"] 8 | }, 9 | "include": ["src/**/*.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | 4 | const path = require("path"); 5 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 6 | const CopyWebpackPlugin = require("copy-webpack-plugin"); 7 | 8 | module.exports = env => ({ 9 | entry: { 10 | "popup/popup": "./src/popup/popup.ts", 11 | "manage/manage": "./src/manage/manage.ts", 12 | "find/find": "./src/find/find.ts", 13 | "background/background": "./src/background/background.ts" 14 | }, 15 | devtool: env.prod ? "" : "inline-source-map", 16 | output: { 17 | path: path.resolve(__dirname, "dist"), 18 | filename: "[name].js", 19 | publicPath: "/dist/" 20 | }, 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.ts$/, 25 | loader: "ts-loader" 26 | }, 27 | { 28 | test: /\.scss$/, 29 | use: [ 30 | { loader: MiniCssExtractPlugin.loader, options: { sourceMap: true } }, 31 | { loader: "css-loader", options: { sourceMap: true } }, 32 | { loader: "sass-loader", options: { sourceMap: true } } 33 | ] 34 | }, 35 | { 36 | test: /\.pug$/, 37 | loader: "pug-loader" 38 | } 39 | ] 40 | }, 41 | resolve: { 42 | extensions: [".js", ".ts"] 43 | }, 44 | plugins: [ 45 | new CopyWebpackPlugin({ patterns: [ 46 | { from: "src/manifest.json" }, 47 | { from: "**/*.html", context: "src" }, 48 | { from: "src/assets", to: "assets" } 49 | ]}), 50 | new MiniCssExtractPlugin() 51 | ] 52 | }); 53 | --------------------------------------------------------------------------------