I have some html files inside a Firefox web extension which I want to open on Browser Action event (Click on the tool bar icon). The way I was doing it in chrome was:
var appId = chrome.app.getDetails().id;
var tabUrl = "chrome-extension://" + id + "/src/index.html";
chrome.windows.getCurrent(function (currentWindow) {
chrome.tabs.create({
url: tabUrl
});
});
What I am trying to do fir firefox is:
//firefox doesnt support chrome.app, so I have hard coded the app id in manifest under applications.gecko.id
var id = chrome.runtime.getManifest().applications.gecko.id;
var tabUrl = "moz-extension://" + id + "/src/index.html";
//I have tried chrome-extension:// also above
browser.tabs.create({
url: tabUrl,
active:true
});
Its just opening a new tab with the url but the page is not loading. Any suggestion on what I am doing wrong
In Firefox the URL is constructed as moz-extension://[some GUID here]/, not chrome-extension://[extension ID here]. The GUID is not predictable.
The right way to get the URL for Firefox (and Chrome) is to use chrome.runtime.getURL:
chrome.tabs.create({
url: chrome.runtime.getURL('src/index.html')
});
Another method that works for getting an absolute URL is (only when the code runs in the context of your extension page, not in content scripts):
chrome.tabs.create({
url: location.origin + '/src/index.html')
});
You can also pass a relative URL to chrome.tabs.create:
chrome.tabs.create({
url: '/src/index.html'
});
Note that when you use relative URLs, make sure that you specify the full path (starting with /). This is because Firefox and Chrome resolve relative URLs differently. For example, if you have a script running in a page in a subdirectory "/html/" in your add-on, then Firefox will resolve the URL relative to the subdirectory, whereas Chrome will resolve the URL relative to the extension root. So:
// Running at moz-extension://[guid]/html/page.html
// or at chrome-extension://[id]/html/page.html
chrome.tabs.create({url: 'newpage.html'});
// Firefox: Opens moz-extension://[guid]/html/newpage.html
// Chrome: Opens chrome-extension://[id]/newpage.html
chrome.tabs.create({url: '/newpage.html'});
// Firefox: Opens moz-extension://[guid]/newpage.html
// Chrome: Opens chrome-extension://[id]/newpage.html
Related
I am loading a PDF as follows (I am using Angular 2, but I am not sure that this matters..):
//Inside a service class
downloadPdf = (id): Observable<Blob> => {
let headers = new Headers();
headers.append("Accept", "application/pdf");
return this.AuthHttp.get(this.pdfURL + id, {
headers: headers,
responseType: ResponseContentType.Blob
}).map(res => new Blob([res.blob()], {type: "application/pdf"}));
}
//Inside a click handler
this.pdfService.downloadPdf(this.id).subscribe((data: Blob) => {
let fileURL = window.URL.createObjectURL(data);
window.open(fileURL);
});
This code runs nicely in Firefox. In Chrome, a new tab briefly flashes open and closes. When I debug and I manually put surf to the object URL, Chrome can open it just fine.
What am I doing wrong here?
The opening of a new tab got blocked by an adblocker.
It can not work, new popup will be blocked by browser, because of it was created from callback which is not a trusted event, to make it work it must be called directly from click handler, or you have to disable bloking popups in your browser.
Chrome will only allow this to work as wanted if the ajax call returns in less than a second. More there
I have to make an extension that when clicked on text in the context menu, in callback opens the extension menu popup.
chrome.runtime.onInstalled.addListener(function() {
var context = "selection";
var title = "Google for Selected Text";
var id = chrome.contextMenus.create({"title": title, "contexts":["selection"],
"id": "context" + context});
});
// add click event
chrome.contextMenus.onClicked.addListener(onClickHandler);
// The onClicked callback function.
function onClickHandler(info, tab) {
var sText = info.selectionText;
var url = "https://www.google.com/search?q=" + encodeURIComponent(sText);
//what i have put here to open extension popup
};
In this case, when I click on the menu I open a new tab with this search.
There is no way of opening the default browser action popup programmatically. A work around is use content scripts to open a modal or a lightbox and show the contents of your popup.
Another way would be - within the clickhandler of your context menu item, create a new tab and make it inactive and then pass that tab to chrome.windows.create api to create a new popup window.
chrome.tabs.create({
url: chrome.extension.getURL('popup.html'),
active: false
}, function(tab) {
// After the tab has been created, open a window to inject the tab
chrome.windows.create({
tabId: tab.id,
type: 'popup',
focused: true
});
});
It is just a work around. Hope it helps.
It is now possible to open a browser action popup programmatically from inside the handler for a user action.
browser.menus.create({
id: "open-popup",
title: "open popup",
contexts: ["all"]
});
browser.menus.onClicked.addListener(() => {
browser.browserAction.openPopup();
});
You can read more about it here.
Edit:
This feature is only available as of Firefox 57. In Chrome, it is only available in the dev channel.
Sources: chrome/common/extensions/api/_api_features.json - chromium/src - Git at Google
Unfortunately, it cannot be done.
Chrome API doesn't provide a method to open extension popup programmatically. The Chromium team rejected the feature request for such an option with an explanation that:
The philosophy for browser and page action popups is that they must be
triggered by user action.
Here's the source.
You can use the chrome.window API (documentation here).
What you want is something like this :
chrome.windows.create({
url : "http://yourPopupUrl.com"
focused : true
type : "popup"});
This will open a new windows in popup mode (without the top menu bar) and load the "http://yourPopupUrl.com".
I'm creating a small extention which when an on-button-click, will open a URL in a new tab.
This is a snippet of part of a function:
var urlLink = "www.google.com";
chrome.tabs.create({ url: urlLink });
However, when the newtab is opened it doesn't go to google.com it puts
chrome-extension://**extentionID**/www.google.com
How do I get it only to go to www.google.com rather than call chrome-extention with the extentionID?
Also I've delcared the following in my manifest.json
"permissions":[
"tabs"
],
Thanks.
Adding
http://
or
https://
to the URL fixes this.
I have a Backbone application which, at one point, opens a new tab in the browser. After the execution in the new tab is complete a javascript will be triggered (in that new tab) to trigger routing in the opener window. Javascript code looks like this:
window.onunload = window.onbeforeunload = function(e){
opener.router.navigate("start",{trigger: true});
};
window.close();
This works great, the 'start' route is executed and the correct result is shown in all browsers (including Chrome). But in Chrome, the url bar is not updated with the new url (eg. ../something#start), instead the original url for the opening window remains in the address bar.
In IE and Firefox the url bar shows the correct url. Is there some way to achieve this behaviour in Chrome also?
Any input appreciated!
Instead of trying to make a call to the router directly from the tab that's about to be closed, have you tried triggering a Backbone event (which the "opener window" would be listening to) instead?
So change:
window.onunload = window.onbeforeunload = function(e){
opener.router.navigate("start",{trigger: true});
};
window.close();
to:
window.onunload = window.onbeforeunload = function(e){
Backbone.trigger('routeChange');
};
window.close();
And include a listener to the routeChange event in the "opener window's" view with a callback function which executes router.navigate():
opener.listenTo(Backbone, 'routeChange', function(e) {
opener.router.navigate('start',{trigger: true});
});
Let me know if that helps.
I've an extension which saves some files to the downloads folder. The code below is just for testing
//This lies in the background page of my extension
function fileTest(name) {
var a = document.createElement('a');
a.href = 'data:text/plain;base64,SGVsbG8gV29ybGQh'; //Hello World!
a.download = name + '.txt';
a.onclick = function (e) {console.log('[TEST] ' + name);return true;};
a.click();
}
window.onload = function() {
fileTest('test1');
fileTest('test12');
fileTest('test123');
}
only the first file "test1.txt" is saved to the disk, although the output of the console shows that there was 3 clicks
[TEST] test1
[TEST] test12
[TEST] test123
Is this an intentional limitation by the browser ? or there's something wrong with the code ?
When I run your code in a regular browsing session, I get a slide out notification (at the top of the window) that says
This site is attempting to download multiple files. Do you want to allow this?
So, yes, it is a security limitation of the browser to restrict downloads that are not user-initiated. You probably don't see the notification because the action is being performed by your background page.
The limitation seems to be one download per user action as demonstrated in this variant of your code:
window.onclick = function() {
fileTest('test1');
}
This will allow unlimited downloads, but only one download per click event.