Running into "Could not establish connection. Receiving end does not exist"

[RinkiyaKeDad]

Hey folks! I've been trying to implement this in my code, but unable to get it to work. Here's what I currently have:

import ExtPay from 'extpay';
const extpay = ExtPay('myid');
extpay.startBackground();

in my background.js and:

import ExtPay from 'extpay';
const extpay = ExtPay('myid');
my app logic {
extpay.openPaymentPage();
}

in my code but when I run it I get this error in my console:

{message: 'Could not establish connection. Receiving end does not exist.'}message: "Could not establish connection. Receiving end does not exist."[[Prototype]]: Object
open_payment_page @ content.bundle.js:231
await in open_payment_page (async)
(anonymous) @ content.bundle.js:1921

I'm using webpack to build the extension and installed the library using:

npm install extpay --save

Can anyone please help me understand what I'm doing incorrectly. Thanks!

[Glench]

Hey Arsh, responding here instead of in email so others might benefit as well. I'm not sure what this error is. Does it happen when you try the sample extension? https://github.com/Glench/ExtPay/tree/main/sample-extension-mv3 If not, I expect it would be something with your code.

And can you show a screenshot of the network panel? I want to know what URL ExtPay is trying to connect to and if that's what's causing the error you're receiving.

[RinkiyaKeDad]

Thanks for taking a look at this @Glench! I tried the sample extension and that seems to be working. But for our extension, when we look at the network tab I can't see any requests that ExtensionPay is making. I have attached the screenshot below.

None of the network requests you see in the image were made by Extension Pay when I checked.

I think the error has to do with how we have Webpack configured currently. But I'm not able to figure out what exactly are we doing wrong. Right now all our files our bundled into dist/content.bundle.js and in our manifest.json we point to it:

    "content_scripts": [
        {
            "js": [
                "dist/content.bundle.js"
            ],
            "matches": [
                "<all_urls>"
            ]
        }
    ],
    "background": {
        "background": "dist/backgroud.bundle.js"
    },

Could it be because of this it's not picking up the installed npm package for ExtensionPay?

[Glench]

OK, thanks for providing all that. It looks like it's not an ExtPay issue so I agree it's probably a webpack issue. Unfortunately I don't know much about webpack but maybe you can look through the source it outputs to see if it's actually pulling in ExtPay correctly.

And it looks like that particular error you saw often happens when an extension's content script tries to contact the background worker but the background worker doesn't have a message handler set up. So that might give you a clue as to what's happening.

[Glench]

Hey Arsh, did you get it working? If so, can you please live a description of your fix so others can benefit?

[RinkiyaKeDad]

Hey unfortunately not. Still getting that message :(

We started looking into other solutions because we weren't able to understand what's happening here. Do you have any more pointers that could help us get ExtensionPay working?

[Glench]

@RinkiyaKeDad did you look in the output as I suggested? Did you see ExtPay there? Can you make a minimal repo that reproduces the error? I can't really help you out if you don't put in some effort!

[RinkiyaKeDad]

Hey @Glench thanks for being so proactive with helping out! We're currently fixing other things in the product so didn't get around to this. I'll definitely update here once we look into it again.