Skip to content

webdev23/ponyFilters

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

87 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ponyFilters

Dynamic css filtering combo bar.

Customize your webpage with fine filters adjustment.

Brightness, grayscale, hue-rotate, invert, sepia, contrast, background color, foreground color and texts colors can be adjusted, for each web domains.

Demo on the reddit new design

Demo on stackoverflow.com

Settings are saved in local storage by pressing the lock icon.

How to use:

Just include pwnyFilter.js in the bottom of your html file.

The bar will ponytself.

To load back automatically your personnal css filters settings for any web page, use the userscript. This is optionnal
Or include pwnyFilters.js at the bottom of your page, to allow your users to make their own adjustment.

To test via the console:

var target = document.getElementsByTagName('script')[0],
inj = document.createElement('script');
inj.src= 'https://webdev23.github.io/ponyFilters/pwnyFilter.js';
target.appendChild(inj);

The load anywhere bookmarklet:

The script is going to be injected after all other scripts in the global context.

javascript:void%20function(){let%20targetx=[...document.querySelectorAll(%22script%22)].pop(),injx=document.createElement(%22script%22);injx.src=%22https://webdev23.github.io/ponyFilters/pwnyFilter.js%22;targetx.appendChild(injx)}();

As a ES6 module with import:

(async () => {
  await import('https://webdev23.github.io/ponyFilters/pwnyFilter.js')
})()

Or you may want to defer the load:

setTimeout(function(){
var target = document.getElementsByTagName('*')[0],
inj = document.createElement('script');
inj.src= 'https://webdev23.github.io/ponyFilters/pwnyFilter.js';
target.appendChild(inj)}, 3000)

For power users who needs per site personals css filters customisation.

Drop ponyFilters.user.js in Firefox with Greasmonkey/Violentmonkey installed. Chrome/chromium users can also drop pwnyFilters.user.js into the extension tab
As soon as settings had been saved by pressing the lock symbol, they will emerge back at next reload.

Or click this link: Userscript : https://webdev23.github.io/ponyFilters/pwnyFilters.user.js

Can also be found here:
https://greasyfork.org/en/scripts/25395-pwnyfilters

Note that some websites disallow dynamics sciptings (Web content policy), like github do.