Extracting link from navigator.share dialog using Puppeteer in an Angular website

Question

I am working on a website that contains multiple cards, each featuring a button that triggers navigator.share, opening a dialog with a link inside. I need to extract that link using Puppeteer for nodejs, but I am unable to share the website’s link, as it is not my property. The website is built with Angular, and I am struggling to identify the call that opens the sharing dialog. Is there a way to achieve this?

Update

I understand the difficulty of my request. Unfortunately, it's a relatively complex site, and to reproduce a working version, I wouldn't even know what to do. I'm attaching a file that might be able to handle navigator.share.

File link

UPDATE

This is the butto to raise the event:

<a _ngcontent-chr-c5="" class="btn btn-whatsapp w-100 ng-star-inserted">
        <i _ngcontent-chr-c5="" class="fas fa-share"></i>&nbsp;SHARE LINK
      </a>

It's pretty hard to help blindly like this. If you can't share the site, I suggest making a minimal reproducible example of it--take whatever part you're stuck on, repro it locally in isolation, and then provide your code attempt. — ggorlen
– ggorlen, Commented Jun 11 at 3:08

Heiko Theißen · Accepted Answer · 2025-06-11 14:57:21Z

0

Puppeteer offers no function that waits for a sharing dialog to appear.

But this Node.js program illustrates how puppeteer can intercept the first request that loads the website and inject Javascript which redefines navigator.share so that it writes its argument into a global variable interceptedShare. Puppeteer then waits for this global variable to appear and logs it in the console.

const browser = await puppeteer.launch({
  headless: "new"
});
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on("request", async function (request) {
  if (request.url() === URL) {
    const response = await fetch(request.url());
    request.respond({
      status: response.status,
      body: (await response.text()).replace(
          "<html>",
          `<html><script>
navigator.share = function(options) {
  window.interceptedShare = options;
};
</script>`
      )
    });
  } else request.continue();
});
await page.goto(URL, {
  waitUntil: "networkidle2"
});
page
  .waitForFunction(function () {
    return window.interceptedShare;
  })
  .then((_) => _.jsonValue())
  .then(console.log);
/* Interact with the page */
await page.click("body");

I tested this with the following page

<!doctype html>
<html>
  <body onclick='navigator.share({url: "http://secret.url"})'>
    Click to share a URL
  </body>
</html>

where sharing happens after a click. Your case may of course require a different interaction.

edited Jun 11 at 14:57

answered Jun 11 at 14:45

Heiko Theißen

18.2k2 gold badges14 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kraken Jun 11 at 16:08

I thank you for your availability, but certainly the information I have provided is not sufficient to develop a solution. For this reason, I have decided to close the post. Thanks again.

Heiko Theißen Jun 12 at 6:24

My answer is meant to give an idea for a solution. Your certainly have to adapt the "Interact with the page" section.

Kraken Jun 12 at 9:18

%c3%9fen Of course, I understand. In the main body, I have posted the contents of a .js file that I believe performs the sharing, as well as the HTML that starts the call. I can't detect the call to navigator.share, so I'm unable to intercept the opening of the share dialog, which requires a button click to be triggered.

Heiko Theißen Jun 12 at 9:29

await page.click("a.btn-whatsapp"); should trigger the sharing in your case.

Kraken Jun 12 at 14:24

%c3%9fen It worked. Thank you for your help.

Collectives™ on Stack Overflow

Extracting link from navigator.share dialog using Puppeteer in an Angular website

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related