Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tooling to bundle a browser build #1253

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

warren-bank
Copy link

Admittedly, a browser build is limited in where and how it can be used (ie: CORS and CSP restrictions).

However, when wanting to write a browser extension or userscript that runs on the 'youtube.com' domain.. it's super useful.
You do a great job in keeping this library up-to-date, as Youtube makes occasional breaking changes.
It would be so nice for you to be able to say to such developers:

  • load the most recent version of the script from a CDN
  • when Youtube breaks and this script is updated to fix the issue,
    release a minor version bump to trigger a fresh download

* uses WebPack to bundle the library into a single JS file,
  which can be downloaded by web browsers from a CDN
* same-origin policy requires that this library
  can only be called from a page hosted by 'youtube.com',
  which limits the use-cases for this build to mainly:
  - browser extensions
  - userscripts

status:
=======
* the example userscript indicates that the Promise returned from:
    window.ytdl.getInfo(window.location.href)
  catches an Error caused by the server response status code: 410
* the corresponding request looks OK:
    https://www.youtube.com/get_video_info?video_id=...
  but something is clearly breaking;
  a closer look is required.
* the issue was the dependency: 'miniget'
  - it performs a GET request,
    with some configurable behavior
  - it uses several native node modules,
    for which I had previously included polyfill libraries
  - ultimately, it just wasn't working
  - I replaced it with a mock implementation,
    which uses 'window.fetch' to perform the network request

status:
=======
* the example userscript works great
add support for:
  options.requestOptions.headers
  options.requestOptions.proxyUrl
  options.requestOptions.debug

example:
========
  window.ytdl.getInfo(
    'https://www.youtube.com/watch?v=CICY20dQUPk',
    {
      requestOptions: {
        headers: {"x-requested-with": "ytdl-core"},
        proxyUrl: "https://cors-anywhere.herokuapp.com/",
        debug: false
      }
    }
  )

where:
======
  https://cors-anywhere.herokuapp.com/corsdemo

test temporary access to demo proxy server:
===========================================
{
  const proxy  = 'https://cors-anywhere.herokuapp.com/'
  const target = 'http://httpbin.org/get'
  const url    = proxy + target

  fetch(url, {headers: {"x-requested-with": "ytdl-core"}})
  .then(req => req.text()).then(console.log)
}

related:
========
* using with proxyAgent in node
    https://github.com/fent/node-ytdl-core/blob/v4.11.5/example/proxy.js
* using with proxyUrl in browser
    https://www.npmjs.com/package/ytdl-core-browser
    https://www.npmjs.com/package/ytdl-core-info-browser

notes:
======
* 'cors-anywhere' limits 50 requests per hour per URL origin
  - apparently, this count is not per-user
  - as such, the example userscript tests on a low-traffic domain:
      'example.com'
* using a proxyUrl, such as 'cors-anywhere', only works on sites
  having a permissive CSP that allows cross-origin fetch
  to 'www.youtube.com'
  - for example, it won't work on 'github.com'
@warren-bank
Copy link
Author

warren-bank commented Oct 3, 2023

note (to self):

in addition to the existing es2020 target,
add a new es5 target.. along with examples.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant