paulshryock/clean-up-the-web

Clean Up the Web removes certain HTML elements from websites which provide an unpleasant user experience.

Senior Software Engineer building better content management workflows for editorial teams at the NBA to power nba.com and many other client applications.

Building a library of reusable Node.js abstractions for side effects at the edges of software so I can manage complexity and focus on application business logic. Yes, I realize that Node itself is already an abstraction layer.

clean-up-the-web's Issues

Give the user controls/preferences

Add controls for the user to:

• Manually disable the Add-On from running on the current page
• Manually disable the Add-On from running on the current website
• Whitelist websites that the Add-On should never run on
• Select which feature(s) are active or disabled (if more features are added later)

Explore what is the best method for storing user preferences (i.e., sessionStorage, localStorage, cookies, etc.) while using the least amount of resources, and giving the user the most control over what is saved, if anything.

Remove DOM elements which match certain selectors

• '[id^="ad-"]'
• '[id^="ad_"]'
• '[id^="Ad-"]'
• '[id^="Ad_"]'
• '[id^="AD-"]'
• '[id^="AD_"]'
• '[id$="-ad"]'
• '[id$="_ad"]'
• '[id$="-Ad"]'
• '[id$="_Ad"]'
• ​'[id$="-AD"]'
• ​'[id$="_AD"]'
• ​'[id*="adfuel"]'
• '[id*="adblock"]'
• ​'[id*="DisplayAd"]'
• '[id*="onetrust"]'
• '[id*="sap-insights"]'
• '[id*="cookie"]'
• '[id="taw"]'
• '[class^="ad-"]'
• '[class^="ad_"]'
• '[class^="Ad-"]'
• '[class^="Ad_"]'
• '[class^="AD-"]'
• '[class^="AD_"]'
• '[class$="-ad"]'
• '[class$="_ad"]'
• '[class$="-Ad"]'
• '[class$="_Ad"]'
• '[class$="-AD"]'
• '[class$="_AD"]'
• '[class*="adfuel"]'
• '[class*="adblock"]'
• '[class*="DisplayAd"]'
• '[class*="onetrust"]'
• '[class*="sap-insights"]'
• '[class*="cookie"]'
• '[class="taw"]'

Optimize the way mutationObserver is used

Why is mutationObserver used?

Sometimes certain websites will inject 3rd party scripts and DOM elements after the page has loaded (and sometimes at regular intervals). mutationObserver is used to observe the DOM over time for any new elements added and remove them if they match certain CSS selectors.

Is there a better implementation that would be more performant?

Review this StackOverflow answer and do some additional research and testing for ways to optimize how mutationObserver is used for best performance and least use of resources.

Explore whether or not it should be allowed to always observe, or whether it should disconnect automatically after a particular number of seconds (or any other event/circumstance).

Are there are any native window or document events that could trigger a reconnect if the DOM should be reviewed for new elements? Or would it be too late to observe what has already changed...

Measure any performance differences, and test on many different kinds of websites.

Add pre-commit hook

Lint files before committing.

Add pre-push hook

Lint and compile files before pushing.

Make websites try to meet WCAG standards

Explore ways to make websites try to meet WCAG standards if they do not already.

How does Clean Up the Web work, and how does it compare with other Add-Ons?

Hi @paulshryock ,

Firstly, thank you for your Clean-Up-the-Web (CUTW).

I would like to understand better your add-on, so please allow me the following simple questions:

• Is CUTW a blocker or a hider add-on? I mean, does CUTW block web requests? Or does CUTW hide web elements (cosmetic function)?

• If CUTW blocks web requests, what exactly does CUT block? At main.js file I can see "ad", "Ad", "AD", "adfuel", "adblock", "DisplayAd", "onetrust", "sap-insights", "cookie"... but I don't have knowledge to understand if CUTW blocks just that stuff, or where CUTW blocks that stuff etc.

• What makes CUTW better than other blocker add-ons?

Thanks in advance!

Minify production assets

Add GitHub Issue, PR, and first contribution template files

Add pre-release hook

Update semver in manifest.json and CHANGELOG.md based on package.json during release.

Add subtle typographic enhancements

If a website has large bits of text with:

• Font size too small
• Line height too small or too big
• Line length too long
• Letter spacing too small or too big
• Font color contrast is too weak
• etc.

Explore what it would look like to make minor ("unopinionated") typographic adjustments automatically so that text is easier to read. Changes should be unobtrusive and should serve to enhance and improve what already exists, rather than trying to redesign other people's websites more to my own taste as a designer.

Block requests to specific assets

• Certain cookies?
• Device fingerprinting?
• Trackers?
• Analytics? (certain kinds of analytics that invade user privacy?)
• Specific assets?
• Assets over a certain file size?
• Assets from specific domain(s)?
• other bad actors

Considerations

• Would this improve performance and website load times?
• Would this use less network bandwidth?
• Would this use less resources?
• Would this increase user privacy?
• Would this break anything?
• Would this result in user frustration?

Organize project files

Support more browsers

• Firefox (since 1.0.0)
• Chrome
• Edge
• Brave
• DuckDuckGo
• Safari
• IE11
• Samsung Internet