Install Sanitize On :

Chrome

Firefox

Edge

Opera

1. 1. Popup Settings

   After you installed Sanitize, you can click on the popup to the top right of the browser window to access the popup. There, you can change a multitude of settings so that you can customize your browsing experience. You will se a list of checkboxes that you toggle on and off. here is what each one does:

   Filters Fieldset

   1. Html : Sanitize will delete stuffs in the current webpage using your Html Filters.
   2. Css : Sanitize will add the Css rules you created.
   3. Js : Sanitize will inject the Js code you made in the webpage.

   Modes Fieldset

   1. Zen : Take the webpage and transform it into a clean and minimal version similar to a reader view. it will only keep the text, list and table discarding everything else.
   2. Freeze : Stick an invisible overlay to the webpage, make it impossible to interact with website making it look like it is somewhat frozen.
   3. Grayscale : Change the whole color of the webpage to grayscale from images to texts and videos.

   Dangerous Fieldset

   1. Disable Css : Disable all Css in the current webpage. Be careful as it will make the webpage look ugly and unintuitive.
   2. Disable Js : Disable all Js in the current webpage. Again Be careful as it will break the webpage and most of it functionality.

   Block Annoyances Fieldset

   1. Image : Block all images. This include <img>, <canvas> and <svg> tags.
   2. Video : Block all videos. This include only <video> tags.
   3. Audio : Block all audios. This include only <audio> tags. It also mutes the whole tab altogether.
   4. Tables : Block all tables. This include <table>, <tr>, <td> and <caption> tags.
   5. Forms : Block all forms. This include <form>, <input>, <button> tags and many more...
   6. Lists : Block all lists. This include <ul>, <ol> and <li> tags.
   7. Fonts : Block all external fonts. it will block the requested fonts from being loaded.
   8. Links : Disable all links. it will remove the all hyperlinks in the <a> tags from the webpage.
   9. Semantics : Disable all semantic elements. This mean things like bold, italics, line-height etc...
   10. Embedded Objects : Disable all embedded objects. This include <iframe>, <embed> and <object> tags and some more.

2. 2. Other Optional Settings

   Optional Settings are the little icons that you see on the top right of the popup, there button toggle some other unimportant settings. A setting is disabled if it is grayed out else it is enabled. The settings are as follows:

   1. Theme : Change the theme of sanitize to light or dark mode. this affects everything in the sanitize UI but not the website you are viewing.
   2. Show Messages : Show a red box saying "Blocked XYZ" or "🛇" on the blocked element like images or form depending on your settings.
   3. Activate Sanitize : Activate Sanitize or deactivate it temporarily.

3. 3. Different Scopes

   You can change the scope of your settings. This means you the settings will be applied globally or only on the current website, to be specific the hostname. This allow you to have different settings for different websites. To change the scope, click on either of the two buttons to the top left of the popup. The buttons are as follows:

   1. Global : Apply this settings globally, meaning on all websites.
   2. Local : Apply the settings only on the current website (e.g. www.github.com).

4. 4. Add Filters

   A filter is a collection of rules that will be applied to the page. You can add as many as you want. A filter includes the following:

   1. Html : Sanitize will delete stuffs in the current webpage using specific selectors (like #container > div > p or .small-box ...).
   2. Css : Sanitize will append new Css rules to the current website to overwrite existing ones. it can be anything you want to. it should be valid Css and vavoribly contain a !important rule to correctly overwrite existing rules.
   3. Js : Sanitize will inject the Js code to the current website. make sure that the code is valid and is safe so it won't break the website or your safety.

   Now to create a new filter, click on the "New Filter" button in the popup or on the context menu (right click) and press "Add New Filter". A popup will show up on the bottom right on the webpage dimming the background also a bit. There, you can do the following:

   1. Type : Change the type of filter. You can choose between Html, Css and Js. Html has to be a Css selector. Css has to be valid Css, same goes for Js.
   2. Scope : Change the scope of the filter to either global or local.
   3. Content : Enter the content of the filter in the text area in front of you.
   4. Pick : Enter Content Selection Mode. With this mode, you can hover over an element and it will highlight it. click on it to select it. you can also select multiple elements depending on the selector. Works only for Html filters.
   5. Preview : Quickly preview the filter you have written in the text area. It is not permanent unless you ran some Js code that manipulates the page.
   6. Create : create the filter, then reload the page.

5. 5. View Filters

   You can view all the filters you have added. You can also edit or delete them. To do that, click on the "View All Filters" button in the popup. I will load a new tab with all the filters that exist. they are all listed on the left side of the page. Click on any of them to view the content of it in the read panel or write panel next to it. You can change the type (Html, Css, Js) by clicking on the type button on top which will switch to your desired type.

6. 6. Edit Filters

   As shown above, you can edit filters. by also clicking on the "View All Filters" button. choose the filter and it type, to edit the filter content, write the new content in write panel (the one of the right). and save it for the changes to take effect. Be aware that if you swtitch the type without saving first, the new you have written content will be lost.

7. 7. Delete Filters

   Similar to the other two instruction above, click on the "View All Filters" button. and next the hostname of the filter list, you will see a cross next to it. click on it to delete the filter on that hostname. to only delete just a type, not the whole filter, just leave the write panel empty and save your change.

8. 8. Reset Everything

   Click on the popup, then you should see a "Reset Settings" button on the bottom, click it and everything will be reset from your filters to your config. Use it with caution and make sure to have a backup first.

9. 9. Export & Import Configuration

   Lastly, click on the popup. If you see a "Sync Settings" button, click it to go to the export and import page. You can also just press the "View All Filters" button and it would still work the same. After that you should see on top right two buttons, one is "Export Settings" and the other is "Import Settings". Export settings will prompt you to save your filters as JSON file on your computer. To import it, just select the saved JSON file after clicking on "Import Settings". Everything will be imported to the browser storage and you will be able to use sanitize again.

• Due to the recent manifest 3 changes forced by Chromium, The Js Filters will no longer work at all on Chrome, Edge, and Opera. Attempt to solve this issue is on my todo list.
• If you turn on image or video block, but some of the images or videos are still there, try to hard reload the website by pressing Ctrl + Shift + R to clear the cache. Otherwise, if this does not work, then the images or videos are most likely present in an embedded elements like an iframe, which you can block too by toggling off all embeds.
• Zen mode is not meant to be used on every website because it will likely pick up junk text or nothing of interest, so be careful with it. Plus, if you use other settings, such as blocking images or disabling Css, it will greatly increase the load time of the webpage you are viewing and will likely cause performance issues.
• Element selection when adding new filters will not work on some websites, such as YouTube.com, because of some nonsense and bloat issues. If that is the case, then consider picking the element yourself by using the browser console (F12) and writing the Css selector to the text area.
• After you opened the popup to add a new filter but did not create one and closed the popup, you will have to reload the website to get back all the removed Js, event listeners, and links to continue your browsing. This allows us to carefully pick the element you clicked on without activating any event or executing any script.
• Js previews permanently affect the DOM; this means that if you remove an element from your code in the text area and decide to preview it, The element will be forever deleted, even after you finish the preview. and you will have to reload the webpage again.
• Sanitize will not work on higher pages like 'about:preferences' or 'about:addons' because of the browser security measures.

Sanitize is open-source software licensed under the GNU General Public License v3 (GPL-3). This means you have the freedom to use, modify, and distribute Sanitize for free, as long as you adhere to the terms of the GPL-3. In essence, the GPL-3 ensures that any modifications you make to Sanitize's code must also be shared under the same GPL-3 license, promoting transparency and collaboration within the open-source community.

Whether you're a seasoned developer or just starting out, there are many ways you can help make Sanitize even better. Here are some areas where you can contribute:

• Bug Fixes: Found a bug? Let me know! Detailed bug reports on github with clear steps to reproduce the issue are incredibly helpful to me. The more information you can provide, the faster I can fix the problem.
• Feature Requests: Have an idea for a new feature? I'd love to hear it! Submit a feature request outlining your proposal and the potential benefits it would bring to Sanitize users.
• Code Contributions: Feeling confident in your coding skills? I encourage you to contribute directly to Sanitize's codebase. Fork the repository on GitHub, make your changes, and submit a pull request. I will review and merge them as soon as possible.

No contribution is too small! Every bit of effort helps Sanitize grow and evolve. I appreciate your interest in contributing and look forward to collaborating with you! You can find the GitHub repo Here.

• v1.0.3 : Fix concerning extension permissions
• v1.0.2 : Sanitize now works on all chromium based browsers (Chrome, Edge, and Opera)
• v1.0.1 : Very minor and unnoticeable change
• v1.0.0 : Initial release