{"id":13606168,"url":"https://github.com/lowwebtech/low-web-extension","last_synced_at":"2025-04-12T08:30:35.990Z","repository":{"id":36267144,"uuid":"208426646","full_name":"lowwebtech/low-web-extension","owner":"lowwebtech","description":"low-web extension, reduces data and carbon footprint of your internet browsing.","archived":false,"fork":false,"pushed_at":"2023-01-06T02:15:44.000Z","size":12083,"stargazers_count":63,"open_issues_count":22,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-07T11:43:51.362Z","etag":null,"topics":["chromium","climate-change","energy-consumption","firefox","global-warming","greenit","lowtech","savetheearth","webextension"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lowwebtech.png","metadata":{"files":{"readme":"Readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-14T10:50:05.000Z","updated_at":"2024-09-05T13:07:17.000Z","dependencies_parsed_at":"2023-01-17T00:00:45.758Z","dependency_job_id":null,"html_url":"https://github.com/lowwebtech/low-web-extension","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowwebtech%2Flow-web-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowwebtech%2Flow-web-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowwebtech%2Flow-web-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowwebtech%2Flow-web-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lowwebtech","download_url":"https://codeload.github.com/lowwebtech/low-web-extension/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248539748,"owners_count":21121228,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chromium","climate-change","energy-consumption","firefox","global-warming","greenit","lowtech","savetheearth","webextension"],"created_at":"2024-08-01T19:01:06.705Z","updated_at":"2025-04-12T08:30:30.982Z","avatar_url":"https://github.com/lowwebtech.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# low—web extension (v0.0.13)\n\nReduce energy consumption and carbon footprint of your internet browsing.\n\n- Chromium : [https://chrome.google.com/webstore/detail/low-web-extension/jllfpicflcigpegdmejghjhaehdiabfj](https://chrome.google.com/webstore/detail/low-web-extension/jllfpicflcigpegdmejghjhaehdiabfj) \n- Firefox : [https://addons.mozilla.org/fr/firefox/addon/low-web-extension/](https://addons.mozilla.org/fr/firefox/addon/low-web-extension/)\n\n\n\n## Why ? :green_heart::herb::deciduous_tree::evergreen_tree::earth_africa:\n\nThe Internet consumes about 8% of the electricity produced worldwide and emits 3 to 4% of total greenhouse gas emissions. Every request, every resource, every calculation, is small amounts of electricity consumed ... and we visit billions of pages, make billions of computer operations, load billions of terabytes... needing to run millions of servers, millions of antennas, millions of miles of fiber and especially devices like telephones always more powerful and ever more obsolete.\n\nThis extension aims to reduce our data and limit the energy consumption of our Internet browsing.\n\n**This extension affects electricity consumption when browsing the Internet but not during manufacturing. Manufacturing is the most energy consuming and polluting stage. So let's keep our phones and computers as long as possible !**\n\n\n\n\n## How ?\n\nA browser extension allows you to block resources and modify the content of a page. So we can optimize some content, block what is not necessary and thus limit the number of requests, weight and computer operations.\n\nFirst, you need a good blocker for ad/malware/tracker like [uBlock Origin](https://github.com/gorhill/uBlock), [Ghostery](https://www.ghostery.com/)... or a browser like [Firefox](https://www.mozilla.org/firefox/) or [Brave](https://brave.com/). \nReducing advertising and tracking is surely what will save you the most data. We made the choice in the extension not to deal with advertising, many extensions do it very well.\n\n\n### Video\n\nMore than **80% of the data transferred over the Internet are videos**. This extension tries to limit their use and the quality of the videos: \n\n- when possible, the extension chooses a low video quality. For example on Youtube.com, the video will be played in 240p, 360p or 480p (Youtube, Vimeo, Dailymotion)\n- embed video iframes are blocked and a light preview is displayed. The click on a preview opens the video on the original site or in the iframe. We use oEmbed to get informations about the videos (Youtube, Vimeo, Dailymotion, Facebook).\n- optionnaly, some optimisations are done to limit dark patterns on Youtube to reduce its attraction and avoid to lose hours on Youtube. Links and image preview on homepage and video page can be hided.\n- remove autoplay and loop parameters for embed videos and native html \u0026lt;video\u0026gt;\n- optionnaly block all requests of type: video *(default:false)*\n\n\n### Image\n\nSeveral optimizations are made on the images, some are blocked and some displayed in smaller sizes.\n\n- stop animated GIF and play them when hovering. An animated GIF force browser to re-render part of the screen, it consumes CPU/GPU processes.\n- custom embeds for Giphy images. Original animated images are blocked and replaced by static images. Animated image is loaded and played when hovering.\n- block avatar images of many services including Gravatar, Discus, Twitter, Linkedin, Github, Pinterest, Reddit and [more...](https://github.com/lowwebtech/low-web-extension/blob/master/src/lists/avatar.txt)\n- ~~remove biggest or hidpi images from srcset. This prevents the browser from loading images that are too big. *(only works with lazy-loaded images eg. data-srcset, data-lazysrcset. None lazyloaded images are loading already when the extension starts and it is not possible to stop loading them)*~~\n- ~~add lazyloading to all images (native loading=\"lazy\" or [fallback](https://github.com/verlok/lazyload))~~ *(not working due to browser restrictions, images are loading when extension start and it's not possible to stop them)*\n- optionnaly block all requests of type: image *(default:false)*\n\n\n### And more\n\n- block different social embeds like Facebook like or share buttons. It mostly blocks scripts from embeds, so when possible embeds are still displayed and customized with injected css and when necessary datas are loaded from oEmbed.\n- add the header `Save-data: on` to all requests (currently based on [Save-data: on](https://chrome.google.com/webstore/detail/save-data-on/nholpkfnmjbinlhcfihkhiehdaohlibg)). This header can be interpreted by websites to reduce weight of pages.\n- optionnaly block all requests of type: font (+ urls from font services like Google Fonts) *(default:false)*\n- disable css transition and animation *(default:false)* (:warning: break transitionend / animationend events :warning:)\n- disable \u0026lt;marquee\u0026gt; animations :P\n\n[More details](https://github.com/lowwebtech/low-web-extension#details) \n\n## Results\n\nSome results of optimisations from [various test pages](https://lowwebtech.github.io/low-web-extension/) :\n\n|        | with extension      | without extension     |      |\n|--------|---------------------|-----------------------|------|\n| video  | 456Kb / 22 requests | 4Mb / 107 requests    | ~89% |\n| image  | 993Mb / 30 requests | 7.7Mb / 35 requests   | ~87% |\n| social | 898Kb / 78 requests | 9.3Mb / 330 requests  | ~90% |\n| giphy  | 213Kb / 31 requests | 12.3Mb / 34 requests  | ~98% |\n\n*note 1: these pages are particularly favorable for optimizations*\n*note 2: theses results are for firstload*\n*note 3: extension adds requests to local files, it increased the number of requests especially for image*\n\n\n## Details\n\nSome detailed explanations about functionalities of low—web extension.\n\n### Low quality video\n\n#### Youtube\n\nThe video quality of Youtube can only be changed automatically on the official website not in embed. A script is injected by the extension on youtube.com to adjust the quality according to the Video Quality parameter available in options repectively 240p, 360p, 480p for Very Low, Low, Medium. ([Youtube-small.js](https://github.com/lowwebtech/low-web-extension/blob/master/src/content_script/video/players/Youtube-small.js), [Youtube-medium.js](https://github.com/lowwebtech/low-web-extension/blob/master/src/content_script/video/players/Youtube-medium.js), [Youtube-large.js](https://github.com/lowwebtech/low-web-extension/blob/master/src/content_script/video/players/Youtube-large.js))\n\n#### Vimeo\n\nThe extension changes the quality of Vimeo videos when they are embedded. A 'quality' parameter can be added to the url of a vimeo iframe (eg: https://player.vimeo.com/video/156045670?quality=360p).\nThis parameter is defined at 240p, 360p, 540p depending on the \"Video Quality\" option, respectively for Very Low, Low, Medium. \nWe are looking for a solution to automatically change the quality on vimeo.com.\n\n#### Dailymotion\n\nDisabled for the moment.\n\n#### Facebook\n\nWe didn't find a way to reduce automatically quality for Facebook videos. But you can set quality to standard and disable autplay in Facebook settings page : https://www.facebook.com/settings?tab=videos\n\n\n### Click to load a video\n\nEmbed videos iframe from Youtube, Vimeo, Dailymotion and Facebook are blocked and replaced by the preview image of the video, its title and a Play button imitating the official players.\nA click on these preview plays the video either on the official website, or in the iframe depending on the \"Video Quality\" parameter. Sometimes it is necessary to double click to launch the video.\n\nEx for original Youtube iframe:\n- no cache ~ 550 / 600KB / 16 requests / load ~ 800ms\n- cache ~ 20Ko / 16 requests / load ~ 650ms\n\nYoutube iframe optimized:\n- no cache ~ 20KB / 5 requests / load ~ 220ms\n- cache ~ 7KB / 5 requests / load ~ 200ms\n\nTechnically, original iframe is [blocked](https://github.com/lowwebtech/low-web-extension/blob/master/src/background_script/block/block-embed-video.js) by extension, then an [script](https://github.com/lowwebtech/low-web-extension/blob/master/src/content_script/video/click-to-load.js) is injected for customising blocked iframe. It loads [oEmbed datas](https://github.com/lowwebtech/low-web-extension/blob/master/src/background_script/message/oembed.js) to get image and title of the video, then a new simple html (with image, title, button) is created and injected (data:text/html) into the new iframe.\n\nYou can test this functionality on this page: [embed-video.html](https://lowwebtech.github.io/low-web-extension/embed-video.html) with option \"Click to load a video\" activated.\n\nMore technical info soon...\n\n\n### Video and audio native attributes\n\nThe native html5 elements \u0026lt;video\u0026gt; and \u0026lt;audio\u0026gt; are [modified](https://github.com/lowwebtech/low-web-extension/blob/master/src/content_script/media/attributes.js) to consume less data. These media are paused and the following attributes are changed:\n- autoplay = false\n- loop = false\n- preload = none\nWebsites may still force autoplay of the videos.\n\nYou can test this functionality on this page: [media.html](https://lowwebtech.github.io/low-web-extension/media.html) with option \"Custom attributes for html element \u0026lt;video\u0026gt; and \u0026lt;audio\u0026gt;\" activated.\n\n### Stop GIF animation, hover over it to play\n\nThe animation of a GIF requires the browser to permanently refresh the rendering of the GIF area (when visible in the screen), this requires a lot of CPU / GPU resources.\nOpen a page with an animated GIF and Activity Monitor on Mac or Resource Monitor on Window, you will notice that the use of the CPU or GPU is more important.\nIt is still possible to see the animation of the GIF by hovering over it. A Play button (white triangle with black border) indicates that the image can be animated.\nThe extension does not yet detect if the GIF image is animated, it can sometimes indicate that the image is animated when it is a static GIF.\n\nYou can test this functionality on this page: [gif.html](https://lowwebtech.github.io/low-web-extension/gif.html) with option \"Hover over a GIF to play it\" activated.\n\nMore technical informations soon.\n\n\n### Load Giphy GIF on hover\n\nGiphy offers an API to access different image formats. Giphy's animated GIFs are replaced by much lighter static images. When hovering over this image, the animated GIF is loaded in medium resolution (see [GiphyPlayer.js](https://github.com/lowwebtech/low-web-extension/blob/master/src/content_script/image/players/GiphyPlayer.js)).\nThe content of Giphy iframes (containing a GIF and many scripts) is replaced by a simple static image. The animation is loaded on hover.\n\nYou can test this functionality on this page: [giphy.html](https://lowwebtech.github.io/low-web-extension/giphy.html) with option \"Hover over a GIF to play it\" activated.\n\n\n### Specific website optimisations\n\nThe best way to reduce your data is not to use the Internet or to reduce your use of it. But it's not always easy... Most sites use techniques called \"dark-patterns\" to keep us on their site so that we consume more content. But in the case of sites like Youtube, these are petabytes of data that we consume more and a lot of lost time...\nThis feature is only available for Youtube at the moment. It is possible to reduce the data and / or the display.\n\nYoutube:\n- display of preview images in low resolution (mqdefault.jpg)\n- blocking of animated images when hovering over a preview\n- blocking of video autoplay on a Channel page\n- blocking of previews and suggestions on the home page and on a video page\n\nYou can test this functionality on youtube.com with option \"Specific optimisation for most used websites\" activated.\n\nWe strongly recommend the [Minimal extension](https://minimal.aupya.org/#install) which limits these dark-patterns.\n*Note: if you use the low—web and minimal extensions, deactivate the option: \"Specific optimization for most used websites\" of the low—web extension*\n\n\n### Smallest image (srcset)\n\nAn image in html can be defined in different sizes via the parameters srcset and sizes. The browser will load the image most suitable for your screen. In general, he will choose a larger image.\nThe extension [removes urls from larger images](https://github.com/lowwebtech/low-web-extension/blob/master/src/content_script/image/srcset.js). The browser will therefore load the smallest of the images.\n\nYou can test this functionality on this page: [srcset.html](https://lowwebtech.github.io/low-web-extension/srcset.html) with option \"Image quality\" activated.\n\n*Note: this technique only works for \"lazy-loaded\" images (generally data-srcset).*\n\n\n### Header 'Save-data: on'\n\nWhen requesting a file on the Internet some info is sent: headers. There is a header that says you want to save data: \"Save-data: on\". The site you are visiting can then adapt the content to reduce the data, by not loading, for example, images or a video. For the moment, few sites take this header into account.\nThe extension [adds this header for each request](https://github.com/lowwebtech/low-web-extension/blob/master/src/background_script/header/save-data.js).\n\n\n### Block fonts\n\nAn option is available to block fonts. Font files are not very heavy but now most sites have 3, 4, 10 font files. Browsers will used system fallback fonts. Sorry my dear AD friends.\nFont files may be used for icons, like fontawesome. We choose to white-list some icons font to avoid broken icons and design.\n\nYou can test this functionality on this page: [fonts.html](https://lowwebtech.github.io/low-web-extension/fonts.html) with option \"Block Fonts\" activated.\n\nFeel free to PR or send me an email (vico @@@ lowweb.tech) to add more online font services into [fonts.txt](https://github.com/lowwebtech/low-web-extension/blob/master/src/lists/fonts.txt)\n\n\n### Block social media embed\n\nSocial media contents are often shared, mostly in the form of iframe. These iframes contain a lot of unnecessary content and scripts.\nIt is sometimes possible to [block these files](https://github.com/lowwebtech/low-web-extension/blob/master/src/lists/social.txt) and display only the media (image, text ...). The extension can [add a style](https://github.com/lowwebtech/low-web-extension/blob/master/src/styles/social.scss) to simulate the style of the original content (ex: tweet, reddit...)\nOther social media content such as a Like, Share, Follow button, etc. is useless and blocked. They are mainly there to track us (most often via Facebook).  \n\nYou can test this functionality on this page: [social.html](https://lowwebtech.github.io/low-web-extension/social.html) with option \"Block social media embeds\" activated.\n\nFeel free to PR or send me an email (vico @@@ lowweb.tech) to add more embeds urls into [social.txt](https://github.com/lowwebtech/low-web-extension/blob/master/src/lists/social.txt)\n\n\n### Block avatar images\n\nAn option is available to block avatar images. Avatar images are generally light but often very numerous.\nThe urls of blocked images are in this [avatar.txt list](https://github.com/lowwebtech/low-web-extension/blob/master/src/lists/avatar.txt), the syntax is the same as Ad Block Plus Filters.\n\nYou can test this functionality on this page: [avatar.html](https://lowwebtech.github.io/low-web-extension/avatar.html) with option \"Block avatar images\" activated.\n\nFeel free to PR or send me an email (vico @@@ lowweb.tech) to add more avatar urls into [avatar.txt](https://github.com/lowwebtech/low-web-extension/blob/master/src/lists/avatar.txt)\n\n\n### Optimised CSS\n\nSome CSS properties can affect rendering performance of a page (and therefore increases its energy consumption).\n[Injected CSS](https://github.com/lowwebtech/low-web-extension/blob/master/src/background_script/css-optimization.js) can : \n    - disable animation and transition (option: Disable CSS animation)\n    - optimize font rendering (option: Optimize font rendering)\n    - optimize image rendering (through content-visibility:auto)\n\n\n## Development / Build\n\n- tested on node 12.20 / npm 6.14\n- installation : `npm install`\n- development : `npm start` (firefox) or `npm run dev:chrome` or `npm run dev:opera`\n- build : `npm run build` (firefox, chrome, opera) built to dist/ folder or `npm run build:firefox` or `npm run build:chrome`\n\nPages for tests : \nhttps://lowwebtech.github.io/low-web-extension/\n\n## Contribute\n\n\n## Licence\n\nCode released under the [GNU GPLv3 License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flowwebtech%2Flow-web-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flowwebtech%2Flow-web-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flowwebtech%2Flow-web-extension/lists"}