chrome.windows.create(
{
url: url.href,
type: "popup",
left: w,
width: 500,
height: 900
});
Im using this piece of code to launch a popup window on top of the main browser window. How do make it so that the popup window automatically closes if the user clicks off to the main browser window. Also I am using Manifest V3 for the extension.
chrome.windows.create(
{
url: url.href,
type: "popup",
left: w,
width: 500,
height: 900
});
window.addEventListener("blur", function()
{
window.close();
});
I tried to look for the "blur" event to automatically close the window, but this did not work.
// gets resolution of the main window to open the popup in the right corner
chrome.windows.getCurrent((cw) => {
let w, h;
w = cw.width - 500;
// creates new popup window
chrome.windows.create(
{
url: url.href,
type: "popup",
left: w,
width: 500,
height: 900,
});
// gets ID of the popup window
chrome.windows.getCurrent((pop) =>
{
let popid = pop.id;
// when focus changes the window closes
chrome.windows.onFocusChanged.addListener( (stat) =>
{
chrome.windows.remove(popid);
});
});
Tried this and it closes the window immediately as it opens.
// All rights reserved to Isabella Rasku and Aditya Ponde 2023.
// making the context menu
chrome.runtime.onInstalled.addListener(async () => {
chrome.contextMenus.create({
id: "Lookup",
title: "Lookup On RMP",
type: 'normal',
contexts: ['selection']
});
});
// opens RMP when context menu is clicked with the search perms using selected text
chrome.contextMenus.onClicked.addListener((item, tab) => {
var name = item.selectionText;
var uname = name.replace(/ /g, "+");
let url = new URL("https://www.ratemyprofessors.com/search.jsp?queryBy=teacherName&schoolName=&queryoption=HEADER&")
url.searchParams.set('query', uname)
// gets resolution of the main window to open the popup in the right corner
chrome.windows.getCurrent((cw) => {
let w, h;
w = cw.width - 500;
// creates new popup window
chrome.windows.create(
{
url: url.href,
type: "popup",
left: w,
width: 500,
height: 900,
});
// gets ID of the popup window
chrome.windows.getCurrent((pop) =>
{
let popid = pop.id;
// when focus changes the window closes
chrome.windows.onFocusChanged.addListener( (stat) =>
{
chrome.windows.onFocusChanged.addListener( (stat) =>
{
chrome.windows.remove(popid);
});
});
});
});
});
This works!
Related
I am trying to open a new electron window when I press a button, but I can't create it.
Here is the code I used and didn't work:
//creates a new window
//
const createChapterWindow = () => {
// Create the browser window.
print('started window');
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
preload: path.join(__dirname, 'preload.js'),
},
});
print('step 1 finished')
// and load the index.html of the app.
mainWindow.loadFile(path.join(__dirname, 'chapter.html'));
// Open the DevTools.
mainWindow.webContents.openDevTools();
print('finished window')
};
//calls browser window
createChapterWindow();
}
function print(text){
console.log(`\n\n\n${text}\n\n\n`)
}
I copied most of this code from the part where I create the main window, so that might be the issue.
I'm using an index.html including an iframe. When a page is opened in a new tab with CTRL + Click keys, the properties I defined for BrowserWindow are not applied.
I want to remove the frame of the opened new tab. How can I do it?
const path = require('path')
const {app, BrowserWindow, Menu} = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 1000,
height: 700,
frame: false,
show: false,
})
win.loadFile('index.html')
win.once('ready-to-show', () => { win.show() });
}
const menu = Menu.buildFromTemplate([])
Menu.setApplicationMenu(menu)
app.whenReady().then(() => { createWindow() })
Windows opened via links don't inherit their parents options, instead, you have to register a window open handler and set the options manually:
win.webContents.setWindowOpenHandler(({ url }) => {
return {
action: 'allow',
overrideBrowserWindowOptions: { // These options will be applied to the new BrowserWindow
frame: false,
// other BrowserWindow settings
}
}
}
On the documentation: https://www.electronjs.org/docs/latest/api/window-open#native-window-example
I am working on a small electron app, and I seem to have hit a road block. I have a webview in my app that loads to www.google.com . The webview loads fine, but when I right click anywhere in the webview, no context menu is created, clicking on any part of the page that is not the webview results in a context menu being successfully created. I am using electron-content-menu to create the menus, and I read through the documentation included at the git repository: https://github.com/sindresorhus/electron-context-menu#readme, but got nothing of value. Any help would be appreciated, as I really need context menu's to appear in my webviews.
Main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow, Menu, shell} = require('electron')
const path = require('path')
var holder;
var checkmax = 0;
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 1919,
height: 1079,
frame: true,
webPreferences: {
webviewTag: true,
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html');
holder = mainWindow;
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
//testing context
const contextMenu = require('electron-context-menu');
contextMenu({
prepend: (defaultActions, params, browserWindow) => [
{
label: 'Rainbow',
// Only show it when right-clicking images
visible: params.mediaType === 'image'
},
{
label: 'Search Google for “{selection}”',
// Only show it when right-clicking text
visible: params.selectionText.trim().length > 0,
click: () => {
shell.openExternal(`https://google.com/search?q=${encodeURIComponent(params.selectionText)}`);
}
}
]
});
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="background-color:red;">
<webview style="position: absolute; top: 10vh; left:0; width:100vw; height: 90vh;" src="https://www.google.com/"></webview>
</body>
</html>
I figured it out after a ton of trial and error, and I came up with this, which works for any generated webviews within the page after the initialization.
This goes in Main.js
var menu = new Menu();
//Basic Menu For Testing
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log("YES");
} }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
app.on("web-contents-created", (...[/* event */, webContents]) => {
//Webview is being shown here as a window type
console.log(webContents.getType())
webContents.on("context-menu", (event, click) => {
event.preventDefault();
console.log(webContents.getType())
menu.popup(webContents);
}, false);
});
When a popup is created I'd like to display it in a BrowserView.
Is there a way of piping the entire popup request into a BrowserView?
The example below works for simple urls but not for more complex popups (eg window.open creates an about:blank page and uses document.write to generate content). Can be tested with "Method #1.1" on https://webbrowsertools.com/popup-blocker/.
const { app, BrowserWindow, BrowserView } = require('electron')
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600
})
mainWindow.webContents.on('new-window', (event, url, frameName, disposition, options, additionalFeatures) => {
event.preventDefault();
const view = new BrowserView()
mainWindow.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 800, height: 800 })
view.webContents.loadURL(url)
})
mainWindow.loadURL("https://webbrowsertools.com/popup-blocker/")
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
How can I make a zooming effect instead of instant zooming?
Hi there, i'm currently developing a game, which will zoom in when the condition is true. To do that, i followed this link.
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/camera/
camera = this.cameras.main;
if (condition) {
camera.setZoom(3);
camera.zoom = 3;
}
It works, but there's no transition/animation of the zooming. It just simply zoomed.
How can I make a zooming effect instead of instant zooming?
You can play with the pan call and replace 'Power2' by :
Elastic
Sine.easeInOut
Or leave it blank
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600, loader: {
baseURL: 'https://raw.githubusercontent.com/nazimboudeffa/assets/master/',
crossOrigin: 'anonymous'
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('map', 'pics/hyrule.png');
}
function create ()
{
this.cameras.main.setBounds(0, 0, 1024, 1024);
this.add.image(0, 0, 'map').setOrigin(0);
this.cameras.main.setZoom(1);
this.cameras.main.centerOn(0, 0);
this.input.on('pointerdown', function () {
var cam = this.cameras.main;
cam.pan(500, 500, 2000, 'Power2');
cam.zoomTo(4, 3000);
}, this);
}
<script src="//cdn.jsdelivr.net/npm/phaser#3.17.0/dist/phaser.min.js"></script>