1

In my Chrome extensions, I need to monitor/fetch requests to blob: URLs. When I open the Chrome Developer Tools, specifically the Network section. I can see those requests a GET requests.

However, when I use the chrome.webRequest API, in the background script of my extensions, these blob: requests are missing. After some searching, I've found this bug report requesting this feature. It seems that extensions don't have the permission to access blob: request and there is the argument that those are not "true" (network) request -- makes sense, I guess, but they are displayed as GET requests in the Dev Tools.

How can I get a handle on these blob: URLs. I cannot find them anywhere in the DOM structure nor do I know how I can grab them "on the fly" -- I need to get the file (here: an image) after it has been selected in the explorer dialog window.

UPDATE: Here's a sketch of the current code I'm trying to use to identify selected files of the "Photo/Video" input element of Facebook:

// Facebook is highly dynamic, so I have to wait for the input element to be loaded
this.mutationObserver = new MutationObserver(function(mutations) {
  let addedNode = null;
  for (let i=0; i < mutations.length; i++){
    for (let j=0; j < mutations[i].addedNodes.length; j++){
      addedNode = mutations[i].addedNodes[j];
      let inputs = addedNode.querySelectorAll("input");
      for (let inp = 0; inp < inputs.length; inp++) {
        let input = inputs[inp];
        if (input.getAttribute('data-testid') == 'media-sprout') {
          preparePhotoVideoInput(input);
        }
      }
    }
  }

function preparePhotoVideoInput(input) {
  input.addEventListener('change', handleMediaChange);
}

function handleMediaChange(e) {
  console.log(e); // e.srcElement.files is always empty (same for e.target.files)
}

UPDATE 2: After many more ours, I've finally managed to get it working. the final version of the method preparePhotoVideoInput looks something like this:

function preparePhotoVideoInput(input) {
  input.addEventListener('change', function(e) {
    let file = this.files[0]
    let reader = new FileReader();
    reader.readAsDataURL(this.files[0]);
    reader.onloadend = function() {
      let base64data = reader.result;
      attachments[file.name] = base64data;
    }
  }, false);
}

I use a an object attachments to collect all the uploaded images -- it was preferable compared to a list since this event fires twice for each image, and it was easier to remove images in case a user deletes a selected image before the posting. Using a referenced function handleMediaChange wasn't working for some reason; in this case input.files was always empty. But that was probably simply because of my lack of knowledge.

Christian
  • 3,239
  • 5
  • 38
  • 79
  • Do it in the content script. For example you can add a `change` event listener on the file input element and read `element.files[0]` (e.g. using FileReader). – wOxxOm Dec 14 '19 at 04:38
  • @wOxxOm I've tried and failed so far, and right now have no idea what else to do. The problem is that I want to monitor/intercept images uploaded to Facebook, and the website is highly dynamic using React. Even the "Photo/Video" `input` element is removed/added dynamically. I've manged to add a `change` listener but `input.files` is always empty. I've also tried to check all `input` elements when the user clicks on "Post", but I've never seen any file(s). – Christian Dec 14 '19 at 05:38
  • Without seeing the code I can only suppose it wasn't correct. I would use MutationObserver to detect the input element then add a listener on it. P.S. maybe you'll have to put the detection code in [page context](/a/9517879). – wOxxOm Dec 14 '19 at 05:44
  • @wOxxOm thanks! I've added some code snippet to my original question. I indeed use a `MutationObserver` to see when the relevant input field is loaded/added. The `change` even even fires and the function `handleMediaChange(e)` is called. But the output shows no files anywhere. – Christian Dec 14 '19 at 06:20
  • It won't print in a console log message, you need to use it in the code. You can set a breakpoint inside the listener and when it triggers, inspect things and mock up code using console as REPL. – wOxxOm Dec 14 '19 at 07:06
  • @wOxxOm I got it eventually working, thanks to your pointers (see my update). Please feel free to shortly summarize you comments as an answer so I can accept and upvote it. – Christian Dec 16 '19 at 04:10
  • I think it'd be better if you post the answer. – wOxxOm Dec 16 '19 at 05:05

0 Answers0