After a lot of times spend to find the solution, i'm here to ask your help.
I have a simple chrome extension, and what I try to do is simple:
Detect on the page when a button is clicked, then, open the extension popup.html.
A good example is MetaMask, the html page can open the popup to connect the wallet, send transaction ...
Thank you !
Run a content script on the page and send a message to the background when the button is clicked.
// Content Script
button.addEventListener("click", () => {
chrome.runtime.sendMessage("OpenPopup")
})
Catch the message in the background and create a window with your popup URL. Provide a "top" and a "left" value to place it at the top right of the users' screen. Use the type "popup" to get rid of the stuff that is usually at the top of a window. Read more about the chrome.windows.create method here.
// Background Script
chrome.runtime.onMessage.addListener(request => {
if (request == "OpenPopup") {
chrome.windows.create({
url: "popup.html",
type: "popup",
focused: true,
width: 400,
height: 600,
top: 0,
left: screen.width - 400,
}, () => {
console.log("Opened popup!")
})
}
})
Related
Use case:
website opens an extension popup window when a user clicks on a button
user performs some actions in the extension popup
a result of that action is sent back to the browser tab which initially opened the extension
Approach
(1) window.postMessage(data): Send a message to the content script where window.addEventListener("message", (event) => {...} is receiving the message event.
(2) chrome.runtime.sendMessage(event.data, function(response) {...}: This functionality is in the listener above and forwards the message to the background script where chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {...}) is receiving the message.
(3) Background scripts opens the extension as a dedicated popup window:
chrome.windows.getLastFocused().then((window) => {
const width = 600 + 100;
const height = 400 + 100;
const left = window.width - width;
chrome.windows.create({url: path, type: "popup", height: height, width: width, left: left, focused: true});
});
(4) After having processed some user actions within the extension popup a response message should be returned to the content script:
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {...})}
Problem
Everything works fine up to step (4). Because the extension popup has been opened programmatically as a dedicated popup window tabs[0].id contains a tab id from the extension popup window instead of the browser window which triggered the whole flow and where the content script runs.
How can the correct tab id be determined or forwarded along the chain to the popup?
Is this messaging scenario the right approach for my requirements?
Any feedback is very much appreciated!
I am writing a CRUD in MVC. when the user clicks on add new to add a new row in the grid. I am trying to show a form in a pop up window. below is my code:
function PopupForm(url) {
debugger;
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
Popup = formDiv.dialog({
autoOpen: true,
resizable: false,
title: 'Fill Student Details',
height: 500,
width: 700,
close: function () {
Popup.dialog('destroy').remove();
}
});
});
}
I checked the url and if I type the url directly in the browser, I can see the addnew form. In the debug mode, I can see error at : formDiv.dialog(). below is the image of the error:
I also looked in the browser after clicking on addnew and pressing F12 developers tool. below is the screen shot:
I am not sure where am I making the mistake. Below is the scripts folder image in my application and also, the layout page will all the script tags:
Any help will be greatly appreciated.
I already looked at these URL's, but my issue is different:
https://stackoverflow.com/questions/52298691/getting-typeerror-caller-callee-and-arguments-properties-may-not-be-acc
https://stackoverflow.com/questions/58675600/getting-caller-callee-and-arguments-properties-may-not-be-accessed-on-st
I have a chrome extension that creates popups in a static location. However, if the user moves the popup and then closes it. I'd like to set the next popup to open in the same location the previous one was closed.
My background page is already listening for onRemoved and onFocusedChanged, but those only return the Window ID.
Is there a way to get the last top and left locations of a popup window after a user moves it, and on or before it is closed?
We can use beforeunload event and we need a synchronous method of saving data in order to guarantee it successfully completes before the execution context of the page is destroyed.
If the popup runs your extension page.
Popup's page script can save the size in the synchronous localStorage shared between all your extension pages, including the background script where you can use the saved value next time to create the popup window.
window.addEventListener('beforeunload', () => {
localStorage.windowSize = JSON.stringify({
left: window.screenX,
top: window.screenY,
width: window.outerWidth,
height: window.outerHeight,
});
});
If the popup runs a web URL.
We'll have to use a content script where we can abuse chrome.runtime.connect to pass the data synchronously in the port name to the background script which will parse and save the data in chrome.storage.local. Of course you can use this approach for the first case as well.
content script:
window.addEventListener('beforeunload', () => {
chrome.runtime.connect({
name: 'windowSize:' + JSON.stringify({
left: window.screenX,
top: window.screenY,
width: window.outerWidth,
height: window.outerHeight,
})
});
});
Make sure the content script runs inside the popup, for example, via chrome.tabs.executeScript in your background script right after creating the popup window.
background script:
chrome.runtime.onConnect.addListener(port => {
if (port.name.startsWith('windowSize:')) {
const windowSize = JSON.parse(port.name.slice('windowSize:'.length));
chrome.storage.local.set({windowSize});
}
});
How can I automatically enable browser location using jQuery? Currently I can detect whether location is enabled or not from the code written below:
setInterval(function () {
navigator.geolocation.getCurrentPosition(positionFound, positionNotFound);
}, 6000);
function positionFound() {
return true;
}
function positionNotFound() {
var template = site_url + 'front/auth/setLocationFancybox';
if (!$('.fancybox-overlay').html()) {
$.fancybox.open({
padding: 0,
href: template,
type: 'iframe',
'closeBtn': false
});
}
}
In the fancybox there will be two buttons:
Turn on location: By which browser location will be turned on.
Cancel: By which current parent window will get closed from the fancybox.
How can I turn on browser location and how can I close parent window from fancybox?
It is not possible to turn on browser location using JavaScript/jQuery. Users need to grant permissions in their preferences. Your best option there is to specifically ask your users to enable it.
To close the parent window from fancybox you can use the following line of code:
parent.$.fn.fancybox.close();
I'm trying to use new-win-policy event to handle link clicks that open new windows. https://github.com/rogerwang/node-webkit/wiki/Window#new-win-policy
win.on('new-win-policy', newWinPolicyHandler);
function newWinPolicyHandler(frame, url, policy) {
gui.Window.open(url, {
position: 'center',
frame: true,
toolbar: true,
focus: true
});
policy.ignore();
}
After click on a link the handler isn't called. I got the message in console:
[17120:1029/214512:INFO:CONSOLE(138)] ""Remove zombie callback for window id 1 ev: new-win-policy"", source: window_bindings.js (138)
Have no idea what to do...
Thanks very much for posting your question. Info on doing this seems scarce. I was able to try out some variations based upon your sample. In my case I'm using an iFrame in NWJS, and was able to prevent popups, forcing the URL into the iFrame:
win.on('new-win-policy', newWinPolicyHandler);
function newWinPolicyHandler(frame, url, policy) {
policy.ignore(); //ignore policy first to prevent popup
$("#Your-iFrameID").attr("src",url); //load popup url into iFrame
}