0

I am working on a Chrome Extension. I want to add a file to a webpage which has a dropzone on it.

This can be done for example in the developers console with 

document.body.dropzone.addfile(file);

I have learnt that extensions do not have access to variables such as in this case the dropzone object. So I thought I could solve this problem by following the many examples like this one where I use a custom event. My code is still very similar;

In my content.js

               //!!!!we are in a frame so doc is needed. Not using main document.
                var s = doc.createElement('script');
                s.src = chrome.extension.getURL('CustomEvent.js');
                (doc.head || doc.documentElement).appendChild(s);
                s.onload = function () {
                    s.remove();
                };

                // Event listener
                doc.addEventListener('RW759_connectExtension', function (e) {
                    // e.detail contains the transferred data (can be anything, ranging
                    if (!e.detail) {
                        console.log('addFile - failed to get the e.detail object.');

                    return  // this is where I end up no detail object.
                    }

                    e.detail.addFile(upFile);

CustomEvent.js

setTimeout(function () {
    console.log('in the time out');
    let dz = document.body.dropzone;
                if (!dz) {
                    console.log('addFile - failed to get the dropzone object.');
                }
    /* Example: Send data from the page to your Chrome extension */
    document.dispatchEvent(new CustomEvent('RW759_connectExtension', {
        detail: dz
    }));
}, 10);

In the timeoutfunction I can get the dropzone object. The event is dispatched. Content.js receives the event, but detail is null. To check everything is wired up right I changed detail to a string and my content.js gets the string ok.

So the problem is that I cannot pass an object. Does anyone know why?

Alternatively can I pass my file to the webpage some other way, to the script or in my customevent.js which is injected in the page?

darbid
  • 2,545
  • 23
  • 55
  • CustomEvent cannot transfer complex data. Only simplest types are supported such as strings/numbers and arrays or objects of such types. You'll have to construct and add the file object inside your CustomEvent.js, there's no other way. – wOxxOm Jun 09 '19 at 03:36
  • So you mean I add my file to the context of the webpage? How do I do this? – darbid Jun 09 '19 at 04:01
  • I got the file into the extension via native messaging and base64 encoding, so the only way I can think is inject the base64 string into the page and then in the context of the page create the file. This seems clunky to me. – darbid Jun 09 '19 at 04:41
  • It's a matter of opinion. For me it's not clunky, it's straightforward. There's no other way, regardless. Just send your base64 string via CustomEvent and the only conceptual difference to the current code will be the direction of exchange. – wOxxOm Jun 09 '19 at 05:59

0 Answers0