I create a tab in Firefox and load a url:
function createNewEbayTab()
{
newTab = browser.tabs.create({
active: false,
url:"https://www.google.de"
});
};
Now I would like to open every further URL that I call within the extension in this tab. What is the best way to do this?
Thanks!
Related
How do I create a functioning electron app with multiple instances of the mainWindow? Here's a very simple app with a mainWindow that just has two buttons. One to create a new mainWindow instance, and one to close the current window.
// main.js
const { app, ipcMain, BrowserWindow } = require('electron')
let mainWindow;
function main () {
mainWindow = new BrowserWindow({
width: 500,
height: 400,
tabbingIdentifier: 'todoTab',
show: false,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadFile('renderer/index.html');
mainWindow.once('ready-to-show', () => {
mainWindow.setTitle("Todo-" + mainWindow.id)
mainWindow.show();
})
mainWindow.mergeAllWindows();
}
app.on('ready', main);
ipcMain.on('newListWindow', main);
ipcMain.on('closeWindow', function(event){
mainWindow.close();
});
In the above file I set mainWindow as a global variable.
Adding a tabbingIdentifier property and chaining the mergeAllWindows() method will automatically create multiple tabs in the display if more than one window is opened.
Each mainWindow instance is assigned an id by Electron. If only one instance is open the id is 1. For simplicity I set the mainWindow title to be "Todo-" + the mainWindow.id (so Todo-1 for the first window, Todo-2 if I open a second).
When the newListWindow button is clicked the "main" function gets called creating a new instances of mainWindow.
When the closeWindow button is pressed the mainWindow instance is closed.
The HTML file with the two buttons (abbreviated to just the body element)
// renderer/index.html
<body>
<h1 class="text-center">Todo List</h1>
<button id="new-list-btn">New Todo List</button>
<button id="close-btn">Close List</button>
<script src="./index.js"></script>
</body>
The ipcRenderer. Listens for the button clicks and sends a message to main.js.
// renderer/index.js
const { ipcRenderer } = require('electron')
document.getElementById('new-list-btn').addEventListener('click', () => {
ipcRenderer.send('newListWindow');
});
document.getElementById('close-btn').addEventListener('click', () => {
ipcRenderer.send('closeWindow');
});
The above code will create multiple Todo windows and display them on different tabs. Each list title (Todo-1, Todo-2, etc) is displayed. The problem is, the last one opened is the only active one. So if I open three todos, then go to any one of them and click the close button, only the third window will close, regardless of which one I was in. Then the other two will throw an error if I try to close them saying the object was destroyed. Which makes sense. So how do I code this so if that whichever instance tab I am in is the one that I close. And when I close it the next tab I am in becomes the valid mainWindow object?
You may want to deal only with the focused BrowserWindow in 'closeWindow' callback
Use BrowserWindow.getFocusedWindow static method
ipcMain.on('closeWindow', function(event) {
const current = BrowserWindow.getFocusedWindow()
if (current) current.close()
})
Pergy's answer works as requested but I'll post this answer as well since it's what I'm actually using, and there's no other documentation on how to do this that I could find. The difference is small but this seems more direct:
ipcMain.on('closeWindow', function(event) {
mainWindow = BrowserWindow.getFocusedWindow();
mainWindow.close();
})
I need help with Firefox plugin sidebar: sdk/ui/sidebar
var sidebars = require("sdk/ui/sidebar"),
...
var orderSidebar = sidebars.Sidebar({
id: "order-sidebar",
title: "clix Sidebar",
url: self.data.url("html/order-sidebar.html"),
onHide: function () {
mainToggleButton.setToggle(false);
}
});
orderSidebar.on("ready", function (worker) {
worker.port.on("orderClicked", handleOrderClicked);
worker.port.emit("orderArrival", orderData);
orderSidebarWorker = worker;
});
The Firefox add-on shows as a sidebar, but I want to make it show in a tab or window.
I want to change the ui/sidebar command to a window or tab by that making the plugin.
I am working on a Chrome app that switches between medias shown in a webview tag. The medias must be updated when they change on my web server and it must keep playing when the internet or the server go down. My solution was to play the media from a programmatically managed local cache.
I programmed the Chrome app to download the content with webkitRequestFileSystem into persistent local storage and I try to access the files from there. The content ends up with URLs like this filesystem:chrome-extension://kbjjicmijilgpdpkicpbnceofdpfbjcb/persistent/my_file.html.
No matter what I do, I cannot access the local files. Neither the webview nor navigating directly to the file displays it in Chrome. It only shows a ERR_FILE_NOT_FOUND error.
How should I go about showing this local content in my webview?
Here is my saveAsset() code (strongly inspired by this answer) :
function saveAsset(fs, url, filename, callback, failCallback) {
// Set callback when not defined
if (!callback) {
callback = function(cached_url) {
console.log('download ok: ' + cached_url);
};
}
if (!failCallback) {
failCallback = function() {
console.log('download failed');
};
}
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', function() {
fs.root.getFile(filename, {create: true, exclusive: false}, function(fileEntry) {
fileEntry.createWriter(function(writer) {
writer.onwrite = function(e) {
callback(fileEntry.toURL());
};
writer.onerror = failCallback;
console.log(xhr.response);
var blob = new Blob([xhr.response], {type: ''});
writer.write(blob);
}, failCallback);
}, failCallback);
});
xhr.addEventListener('error', failCallback);
xhr.send();
}
And this is the code that sets the src attribute of the webview to that URL.
window.webkitRequestFileSystem(window.PERSISTENT, 1024*1024, function (fs) {
saveAsset(fs, url, filename, function(localUrl) {
console.log(localUrl);
$(contentSelector).attr("src", localUrl);
});
});
I never managed make the webview work with local content, but switching to an iframe does work perfectly. I have both cached and uncached content so it makes some confusing code, but I fixed my issue by using both a webview and an iframe and hiding the one which is not in use.
PS. For anyone trying to do this, the webview won't load its content correctly if it is hidden with display:none . I had to move it outside of the screen instead.
I am using Jquery Mobile 1.4 and I would like to create a button that sends the user to another page, and opens the panel on this new page once landed :
I am trying this :
$(document).on('pagecreate','#faq-page', function(){
$('#faqcontactus').on("tap", function() {
$( "body" ).pagecontainer( "change", "#welcome-page", { transition: "fade" });
$( "body" ).pagecontainer( "getActivePage" ).find('#mypanel').panel("open");
});
});
which goes to the page, opens the panel, but closes it instantly.
Can you help ?
Thanks
You can't do it after you initiate page change process. That process is asynchronous and pane open will not wait for this function to end. What you need to do is wait for next page to became visible, then you should trigger panel.
Something like this:
$(document).on('pagecontainershow', function (e, ui) {
var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
var activePageId = activePage .attr('id')
if(activePageId === 'welcome-page') {
activePage.find('#mypanel').panel("open");
}
});
You should wait until page is fully loaded before you open the panel, i.e. use pagecontainershow.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
if(activePage[0].id == "welcome-page") {
$(".ui-panel", activePage).panel("open");
}
});
Hi guys i know this is a known problem in ASP.NET MVC, basically what i have here is a photo gallery with categories (Red, Blue, Green).
When i choose one category, say 'Red', it will do an ajax call and load the page with photos of red colored products. when i click one of the photos, i expect it to be enlarged (lightbox kinda effect). I use a jQuery plugin called fancybox for that.
but as u all know jQuery using a dynamically loaded content with jquery in it , doesnt actually work in ASP.NET MVC. So i added the jQuery call to fancybox into the ajax.success.
but since it is a plugin, the function $(".fancybox").fancybox() does not register and says that it's not a valid javascript function. How can i solve this problem, so that i can do the image enlarge thing after an ajax call? thank you!
$(document).ready(function() {
$("select#Colors").change(function() {
var color = $("#Colors > option:selected").attr("value");
var tempnric = $(".tempnric").attr("value");
$("#ProductsDiv").hide();
$('#ajaxBusy').show();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "/FindProducts/" + color,
data: "{}",
dataType: "json",
success: function(data) {
$('#ProductsDiv > div').remove(); // remove any existing Products
if (data.length > 0) {
var options = '';
for (p in data) {
var product = data[p];
options += "<a href='/GetPhotoSet/" + product.PhotoID + "' class='fancybox load fade'><img src='/GetPhotoSet/" + product.PhotoID + "'/></a>";
}
$("#ProductsDiv").html(options);
$('#ajaxBusy').hide();
$("#ProductsDiv").show();
} else {
$("#Products").attr('disabled', true).html('');
$("#ProductsDiv").append('<div>(None Found)</div>');
}
}
});
});
});
Here is the remaining code it works ok except that when i click on the images, it opens up a new browser..
Before your document.ready call, put this line of code:
var $j = jQuery.noConflict();
Then replace all of the '$' references with '$j' and your code should now work.
There is probably a conflict between some other javascript and the jQuery script, so your document.ready is not being seen. This is the quickest way to work around the problem. And if you're feeling ambitious, you can find out what is going on by using a tool such as FireFox's Error Console.