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" }
}
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"
});
});
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"
});
Related
I created a js script that goes with my popup.html for a chrome browser extension I'm working on. It listens for a change in a slider value on the HTML and then sends a message to the content.js script with the new data. However, it seems I can't use sendMessage in this script. I'm using manifest v3.
Here's my js:
var slider = document.getElementById("slider");
let value = slider.value;
//function is called when the slider moves
changeSlider = function() {
value = slider.value;
update();
}
update = function() {
chrome.runtime.sendMessage({ message: "update", data: value });
}
Here's my manifest:
{
"manifest_version": 3,
"name": "e",
"version": "0.1",
"author": "e",
"homepage_url": "https://www.example.com",
"permissions": [
"contextMenus",
"activeTab",
"nativeMessaging"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["src/content.js"]
}],
"web_accessible_resources": [
{
"resources": ["src/*"],
"matches": ["<all_urls>"],
"use_dynamic_url": true
}],
"background": {
"service_worker": "src/background.js"
},
"action":
{
"default_popup": "src/popup.html",
"default_icon": "src/resources/icon.png"
},
"icons": {
"16": "src/resources/icon-16.png",
"32": "src/resources/icon-32.png",
"48": "src/resources/icon-48.png",
"128": "src/resources/icon-128.png"
}
}
And here's the console error I get whenever I adjust the slider:
additionally, my interpreter doesn't autofill chrome.runtime, so I assume something went wrong there. Help :D
I am trying to create a chrome extension, that will redirect to custom html file. the page is blocked by the browser
manifest.json
{
"manifest_version": 3,
"name": "Hello World!",
"version": "0.1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["src/blocker.js"]
}
],
"permissions": ["storage", "activeTab", "tabs"],
"action": {
"default_popup": "src/html/popup.html"
}
}
blocker.js
window.location.href = chrome.runtime.getURL("html/popup.html");
Page blocked Image
Either add blocked.html to web_accessible_resources in manifest.json or switch to using declarativeRequest API
Currently I'm trying to pass an array from the context_script into my popup.html on a button click from the extension. However there have been complications which I can't seem to solve on my own, almost every single one of the implementation methods in SO and other sites don't seem to work out.
All I really need is to simply pass a single list from the context, into the JavaScript page that handles the extensions HTML interface.
background.js
"use strict";
function Master() {
firebase.initializeApp(config);
this.time = 0;
this.http_usage = this.get_http();
this.https_usage = this.get_https();
this.todays_usage = this.get_today_sites();
chrome.runtime.onMessage.addListener(function(message,sender,sendResponce) {
sendResponce("Hello world");
});
this.init();
}
manifest.json
{
"name": "Statistics",
"description": "Saves time and visitation data.",
"version": "1.0",
"manifest_version": 2,
"permissions": [
"activeTab",
"tabs",
"http://*/*",
"https://*/*",
"clipboardRead",
"clipboardWrite",
"background"
],
"content_scripts": [
{
"matches": [
"*://*/*"
],
"js": [
"config.js",
"firebase.js",
"background.js"
],
"css": [
"styles.css"
]
}
],
"browser_action": {
"default_title": "Statistics",
"default_popup": "popup.html"
}
}
popup.js
function get_data(){
let data = []
chrome.runtime.sendMessage({data:"giblist"}, function (responce) {
console.log(responce);
...
});
}
document.addEventListener('DOMContentLoaded', function () {
console.log("Loaded page");
firebase.initializeApp(config);
document.getElementById("showStatistics").addEventListener("click", get_data);
});
In this extension, if I click on the extension button and if current URL matches http://example.com/* or https://example.com/* it should be redirected to a new domain like http://NewDomain/* or https://NewDomain/*.
But I want this extension scan tab URL and perform redirection automatically in the following conditions:
if a new tab created or
if current tab URL changes
This is my code:
manifest.json
{
"manifest_version": 2,
"name": "My Extension",
"description": "Redirect example.com to NewDomain",
"version": "0.1",
"permissions":
[
"activeTab",
"tabs",
"background"
],
"browser_action":
{
"default_icon": "icon.png"
},
"content_scripts":
[
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}
]
}
scripts.js
var current_url = tab.url.split('/');
if(current_url[2] == "example.com")
{
current_url[2] = "NewDomain";
}
var new_url = current_url.join('/');
console.log('New tab url: ' + new_url);
document.location.href = new_url;
But it's not working, What changes should I apply?
Use a content script instead and drop the browser_action.
Then you can use document.location.href = "urlToRedirectTo";
The url matching can be done in the manifest
You have two options. Either specify the url to match in the manifest or match every url and check the url in the content script.
For example, this manifest will match all urls:
{
"manifest_version": 2,
"name": "whatever",
"description": "blah",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}
],
"permissions": [
"activeTab"
]
}
And in the content.js, you could do something like this:
if (document.location.href == "theUrlImLookingFor")
document.location.href = "theUrlThatIRedirectTo";
I am building a Chrome extension that injects some HTML and JS when the user clicks the extension icon. So, when the icon is clicked, it is registered in the bg script, and the content script is notified about this like so:
Background script
chrome.browserAction.onClicked.addListener(iconClicked)
function iconClicked(tab) {
var visitors = window.AllVisitors.get(tab.id),
data = {
message: 'toggleMenu',
user: window.user
};
chrome.tabs.sendMessage(tab.id, data);
}
Now, to the problem: In my manifest file, I have also added a custom page for the chrome://newtab page. When the extension icon is clicked while visiting this custom newtab page, the content script does not receive any message what so ever. The default newtab page does actually receive the message as well as any other webpage.
I am thinking that maybe it has something to do with externally_connectable, but adding this does not help:
"externally_connectable": {
"matches": ["chrome://newtab/"],
}
Does anybody know why my custom newtab page does not receive any messages from the background script? Any help is very appreciated!
Manifest file:
{
"manifest_version": 2,
"name": "Orbit",
"version": "0.0.1",
"web_accessible_resources": [
"templates.html",
"img/icon48.png",
"fonts/*.woff",
"img/*"
],
"externally_connectable": {
"matches": ["chrome://newtab/"],
},
"chrome_url_overrides" : {
"newtab": "tab/newtab.html"
},
"icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"browser_action": {
"default_icon": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"default_title": "Orbit"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["vendor/chrome-promise.js", "vendor/jquery.js", "vendor/underscore.js", "vendor/backbone.js", "orbit.js"]
},
{
"matches": ["<all_urls>"],
"css": ["sidebar.css"]
}
],
"background": {
"scripts": ["vendor/socket.io.js", "vendor/jquery.js", "vendor/underscore.js", "vendor/backbone.js", "vendor/chrome-promise.js", "vendor/jquery.js", "eventPage.js"],
"persistent": true
},
"permissions": [
"http://fonts.googleapis.com/*",
"https://fonts.googleapis.com/*",
"https://get-orbit.com:8080/*",
"activeTab",
"tabs",
"storage"
]
}
Content scripts aren't injected on chrome-extension:// pages.
Simply add the script manually in your newtab.html:
<html>
<head>
<script src="your-content-script.js"></script>
</head>