How to download file from another URL with MV3 chrome extension?-CodePudding

I'm using MV3 to create a chrome extension which injects a download button onto the document body. I'm trying to get that download button to download an example PDF hosted on another URL, but am unable to do so. When I click on the button, Chrome just opens the PDF in the current tab. I need to instead download it to the computer like a regular file. I have the download permission in my manifest, but am unsure what I'm doing wrong. Any help would be greatly appreciated!

This is where the download button is stored is my contentScript.JS file.

 function createModal() {
            var auroraModal = document.createElement('div');
            auroraModal.className = '_aurora__modal';
            auroraModal.id = '_aurora__modal';

            var downloadLink = document.createElement('a');
            downloadLink.download = "Example.pdf";
            downloadLink.href = "https://www.africau.edu/images/default/sample.pdf";
            downloadLink.innerHTML = 'Download';

            auroraModal.innerHTML = '<p>Woo-hoo <strong>' dataFromPromise '</strong>! Your custom PDF is ready!</p>';
            auroraModal.appendChild(downloadLink)
            document.body.appendChild(auroraModal)
        }

And here is my manifest.JSON:

{
  "name": "Aurora Extension",
  "manifest_version": 3,
  "description": "Aurora extension attempt with FB9 and MV3",
  "permissions": ["storage", "tabs", "downloads"],
  "host_permissions": ["https://*.stackoverflow.com/*"],
  "background": { "service_worker": "background/index.js" },
  "content_scripts": [
    {
      "js": ["content/index.js"],
      "css": ["content/coupon.css"],
      "matches": ["https://*.stackoverflow.com/*"]
    }
  ],
  "action": { "default_popup": "pages/popup/index.html" }
}

CodePudding user response：

Please user chrome.downloads.download.

manifest.json

{
  "name": "chrome.downloads.download",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "downloads"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<html>
<body>
  <script src="popup.js"></script>
</body>
</html>

popup.js

chrome.downloads.download({
  filename: "Example.pdf",
  url: "https://www.africau.edu/images/default/sample.pdf"
});

CodePudding user response：

This used content scripts and service worker.

manifest.json

{
  "name": "chrome.downloads.download used content_scripts   service_worker",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "downloads"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "js": [
        "matches.js"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ]
}

matches.js

console.log("matches.js");

const button = document.createElement("button");
button.innerText = "button";

button.onclick = () => {
  chrome.runtime.sendMessage("");
  console.log("Send");
}

document.body.insertBefore(button, document.body.firstElementChild);

background.js

console.log("background.js");

chrome.runtime.onMessage.addListener(() => {
  console.log("Receive");
  chrome.downloads.download({
    filename: "Example.pdf",
    url: "https://www.africau.edu/images/default/sample.pdf"
  });
});