2

I fetch some data and display it on a web page after that. It works OK. I want to show the downloading progress on the web page, but the next code does not work in a content script properly.

(async () => {
    const response = await fetch("https://i.imgur.com/Rvvi2kq.mp4");

    const reader = response.body.getReader();
    const contentLength = +response.headers.get('Content-Length');
    alert(contentLength)  // 0

   // other code...

})();

It works properly (shows 2886550, not 0) only if I run it in the context of the page in the same domain (i.imgur.com for this example).

Does it can work (properly) in a content script or at least in a background script? And works when I fetch a data from not the same domain too?

Is there any way to fetch a data (not just download to Downloads folder) for working with it after that and see downloading (fetching) progress?

Upd: The code above* works properly in the background script, but only in Firefox and Chromium 76+ based browsers. It was a Chromium's bug, that the code shows 0.

*It's a part of the code from here.

KeyKi
  • 2,693
  • 3
  • 12
  • 24
  • 2
    Modern Chrome doesn't allow cross-origin requests in a content script so you need to do it in the background script as shown in the [official CORB explainer](https://www.chromium.org/Home/chromium-security/extension-content-script-fetches) (see an example in section 2). – wOxxOm Aug 07 '19 at 10:49
  • It does not work even in the background script with `"permissions": ["*://*.imgur.com/*"]`. It shows `0`. – KeyKi Aug 07 '19 at 11:01
  • Sounds like you didn't click the reload icon on chrome://extensions page after editing manifest.json – wOxxOm Aug 07 '19 at 11:06
  • Oh, it works, in Chrome. But not in Opera. – KeyKi Aug 07 '19 at 11:16
  • Weird. Try [debugging the background script](https://stackoverflow.com/a/10258029) and check the request's details in devtools network panel. – wOxxOm Aug 07 '19 at 11:22
  • I think it works only in Chromium 76+. The latest Vivaldi, Chrome 75.0.3770.142 show `0` too. – KeyKi Aug 07 '19 at 11:27
  • Firefox works well too (except that it does not allow to use `alert` in the background script, only `console.log`) – KeyKi Aug 07 '19 at 11:34
  • Sounds like Opera/Vivaldi are buggy. – wOxxOm Aug 07 '19 at 11:35
  • Chrome, Opera, Vivaldi that use Chromium 75 shows `0`. Chrome, Brave that use Chromium 76 (77 too) shows `2886550`. – KeyKi Aug 07 '19 at 11:41
  • Now in Opera 63 what uses Chromium 76 it works. – KeyKi Aug 25 '19 at 01:57

1 Answers1

0

Imgur.com's server does not send a Access-Control-Expose-Headers header exposing content-length, so download progress indicators are not possible. It could possibly be faster to serve static content with HTTP/2 from your own domain/server since you would not be opening new socket connections to other CDNs. You could also use your server as a proxy to Imjur.com, but you run the risk of them blocking your server's IP

The fetch-progress-indicators examples show various download progress indicators with Fetch.

anthumchris
  • 8,245
  • 2
  • 28
  • 53