英文:
How to download file from another URL with MV3 chrome extension?
问题
我正在使用MV3创建一个Chrome扩展，该扩展将下载按钮注入到文档主体上。我尝试使该下载按钮下载托管在另一个URL上的示例PDF，但无法成功。当我点击按钮时，Chrome只是在当前选项卡中打开PDF。我需要将其像常规文件一样下载到计算机上。我在清单中有下载权限，但不确定哪里出了问题。任何帮助将不胜感激！
下载按钮存储在我的contentScript.JS文件中，如下所示：
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)
}
这是我的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" }
}
希望这可以帮助你解决下载按钮的问题。
英文:
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" }
}
答案1
得分: 0
请使用 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"
});
英文:
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"
});
答案2
得分: 0
This used content scripts and service worker.<br>
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"
});
});
英文:
This used content scripts and service worker.<br>
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"
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论