npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

yett

v0.2.3

Published

A small library that can prevent other scripts from executing.

Downloads

12,662

Readme

🔐 A small webpage library to control the execution of (third party) scripts like analytics

Simply drop yett at the top of your html and it will allow you to block and delay the execution of other scripts.

Background

[❓] So, why on Earth would I want to block scripts on my own website?

One way to use yett would be to build a GDPR compliant consent-first-analytics, via an UI like below.

Blocking execution of analytics script (until consent is given) can be done manually, but the problem is that analytics providers often provide minified code embeds that you have to include in your html as they are. If you want to exercise control over their execution, then you have to tamper with this minified JS yourself, which is complex and does not scale well if you load several 3rd party scripts.

Another thing to consider is that these scripts first setup a local buffer that record user actions locally, and then upload the data only after a remote script is loaded asynchronously. Meaning that if the whole thing is simply wrapped inside a callback (as some other libraries do) then every action performed by the user on the web page before the callback gets executed won't get recorded and will never appear in your analytics dashboard.

Thus we invented yett. Just drop in the script and define a domain blacklist - yett will take care of the rest ✨.


And on a side note, it is technically quite amazing to know that a few lines of js is all you need to control execution of other scripts, even those included with a script tag. 😉

Also, yett has an interesting meaning.

Usage

:tv: Demo

Small example

<!DOCTYPE html>
<html>
  <head>
    <!-- Regular head items here… -->

    <!-- 1) Add a blacklist -->
    <script>
      window.YETT_BLACKLIST = [
        /my-blacklisted-domain/,
      ]
      // Or a whitelist
      window.YETT_WHITELIST = [
        /my-whitelisted-domain/,
      ]
    </script>
    <!-- 2) Include Yett -->
    <script src="https://unpkg.com/yett"></script>
    <!-- If you target only modern browsers (!= IE) you should use the following version. It is way smaller! -->
    <!-- script src="https://unpkg.com/yett/dist/yett.min.modern.js"></script -->
    <!-- 3) Profit! -->
    <!-- This script is blocked -->
    <script src="https://my-blacklisted-domain.com/file.js"></script>
    <script>
      // This one too
      (function() {
        var script = document.createElement('script')
        script.setAttribute('src', 'https://my-blacklisted-domain.com/some-file.js')
        script.setAttribute('type', 'application/javascript')
        document.head.appendChild(script)
      })()
    </script>
  </head>
  <body>
    <button onclick="window.yett.unblock()">Unblock</button>
  </body>
</html>

⚠️ It is strongly recommended (but not necessary) that you add type attributes to <script> tags having src attributes that you want to block. It has the benefit of preventing the scripts from begin downloaded in major browsers.

💡 In any case, if you would like to ensure that cookies are not sent to third-party servers during the initial request you can use the crossorigin="anonymous" attribute. Check this link for more details.

Add a blacklist

Yett needs a blacklist, which is an array of regexes to test urls against.

<script>
    // Add a global variable *before* yett is loaded.
    YETT_BLACKLIST = [
        /www\.google-analytics\.com/,
        /piwik\.php/,
        /cdn\.mxpnl\.com/
    ]
    // OR
    YETT_WHITELIST = [
        /my-whitelisted-domain/
    ]
</script>

CDN

Finally, include yett with a script tag before other scripts you want to delay:

<script src='unpkg.com/yett'></script>

Then, use window.yett.unblock() to resume execution of the blocked scripts.

NPM

You can also use npm to install yett:

npm i yett
window.YETT_BLACKLIST = [
    // ... //
]
// OR
window.YETT_WHITELIST = [
    // ... //
]
// Side effects here! Do not import more than once!
import { unblock } from 'yett'

unblock()

Unblock

unblock(...scriptUrlsOrRegexes: (String | RegExp)[])

Unblocks blacklisted scripts.

If you don't specify a scriptUrlsOrRegexes argument, all the scripts that were previously blocked will be executed. Otherwise, the scriptUrlsOrRegexes provided will be either removed from the blacklist or added to the whitelist and executed.

Build locally

# Clone
git clone https://github.com/elbywan/yett
cd yett
# Install
pnpm i
# Serves demo @ localhost:8080
pnpm dev
# Build for release
pnpm build

Browser compatibility

| | <script> | <script type="javascript/blocked"> | document.createElement('script') | |------------------------|:-----------------------------------------------:|:-------------------------------------------:|:-------------------------------------------:| | Prevents loading | | | | | Prevents execution | | | |

The most 'advanced' javascript feature that yett uses is MutationObserver, which is compatible with all major browsers as well as IE11.

If you need IE 9/10 compatibility, you will have to use a polyfill:

<script src="https://cdn.jsdelivr.net/npm/mutationobserver-shim/dist/mutationobserver.min.js"></script>

Caveats

Add a type attribute manually

Adding this attribute prevents the browser from downloading the script on Chrome and Firefox.

<script src="..." type="javascript/blocked"></script>

Monkey patch

This library monkey patches document.createElement. No way around this.

This means that yett is not compatible with third-party browser extensions that also monkey patch this native browser function.

Dynamic requests

Scripts loaded using XMLHttpRequest and Fetch are not blocked. It would be trivial to monkey patch them, but most tracking scripts are not loaded using these 2 methods anyway.

Suggestions

If you have any request or feedback for us feel free to open an issue!

So far we’re using this library for analytics, but it could also be used to block advertising until consent, and other things we haven’t thought about yet. We’re excited to see what use cases the community comes up with!

License

MIT