How can I get the browser to switch to full screen mode(f11) through code?
I googled and found various JS results for switching the web browser to full screen mode. The various pieces of code work and I can go full screen and can exit from it, however, when I refresh the page or click on any link on the page while in full screen mode, it switches back to windowed mode.
It seems there are restrictions in the browser of some kind.
The code below works to a degree, but I couldn’t find code that solves this problem. Is it possible to go full screen by code that will remain in full screen even when I click on links?
function toggleFullScreen(elem) {
// ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (elem.requestFullScreen) {
elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
Related
if (cmd === "test") {
message.channel.send("Pick a reaction").then(async function(message) {
await message.react("🇳");
await message.react("🇧");
await message.react("🇴");
const filter = (reaction, user) => reaction.emoji.name === "🇳" || reaction.emoji.name === "🇧" || reaction.emoji.name === "🇴" && reaction.message.author.id === "266315409735548928";
let collector = message.createReactionCollector(filter, {
time: 15000
});
collector.on('collect', (reaction, collector) => {
switch (reaction.emoji.name) {
case "🇳":
message.channel.send("Picked N");
break;
case "🇧":
message.channel.send("Picked B");
break;
case "🇴":
message.channel.send("Picked O");
break;
}
});
collector.on('end', collected => {
return;
});
});
}
For some reason my code stopped working today: when I switch the 🇴 and 🇧 in the filter it does work but when I leave it as it is now, nothing happens when 🇴 is picked.
What is causing this problem?
The problem is not the 🇴 itself, but the way logical operators work. Let's say you have this expression:
first || second && third
That means that the program is first going to check first, then if that's true since there's a || after it, it will stop, otherwise, it will check for second. When it checks for second it doesn't stop if its true, because you put a && after it. That expression translates to this one:
first || (second && third)
Your code works with the first two reactions because it's not checking the id, while it does it in the third (and it happens not to be the same: false)
I suggest you to switch to this expression:
["🇳", "🇧", "🇴"].includes(reaction.emoji.name) && reaction.message.author.id == '266315409735548928';
This does the same thing but in a more compact way. If you still want to use the old way, write this:
(reaction.emoji.name === "🇳" || reaction.emoji.name === "🇧" || reaction.emoji.name === "🇴") && reaction.message.author.id === "266315409735548928";
Sidenote: since you wrote that it didn't work with the 🇴, it won't work with this code too because reaction.message.author.id == '266315409735548928' still returns false.
If you were trying to check if the reaction was added by you, you should use user.id == 'your id'.
I don't see the point in checking the ID of the message's author since the message was sent by the bot and the ReactionCollector works only with that message.
I'm searching for an event which triggers when an external Desktop-Software like Outlook, Thunderbird, Messenger App etc. want the default browser (firefox) to open a new link. I could manage with a workaround to catch this event if firefox was closed before:
// catch page when triggered by link and browser was closed
chrome.runtime.onStartup.addListener(function () {
// search for initial tab
chrome.tabs.query({
active: true,
currentWindow: true,
}, function (tabs) {
var initialTab = tabs[0];
// catch open of files and links when browser was closed
if (initialTab.url != 'chrome://newtab/') {
handleNewUrlRequest(initialTab.id,initialTab.url);
}
});
});
But how to catch the opening of an external link when firefox is already running?
Thank you for your help and greetings!
Thanks to #wOxxOm ill made it in this way:
// catch page when triggered by link and browser is already open (firefox) step 1
var lastRequest = null;
chrome.webNavigation.onCommitted.addListener(function (details) {
if(details.url == 'about:blank' && details.frameId == 0 && details.parentFrameId == -1 && details.transitionType == 'link') {
lastRequest = details;
}
});
// catch page when triggered by link and browser is already open (firefox) step 2
chrome.webNavigation.onBeforeNavigate.addListener(function (details) {
if(lastRequest && details.frameId == 0 && details.parentFrameId == -1 && details.tabId == lastRequest.tabId && details.windowId == lastRequest.windowId) {
console.log('New Request detected: open new Link in Firefox when Firefox is already open');
lastRequest = null;
}
});
I have the following data structure:
/users
/{user_uid}
/lists
/{list_uid}
Using a cloud function, i'd like to be able to have a /list_count reference on the root of my database, to be able to easily track list count without having to do a fat client-side call to count them.
at the moment I have this implementation, which I find a bit ugly:
exports.countlists = functions.database.ref('/users/{uuid}/lists').onWrite(event => {
const ref = event.data.ref.parent.parent.parent.child('list_count');
return ref.transaction(current => {
if (event.data.exists() && !event.data.previous.exists()) {
return (current || 0) + 1;
}
else if (!event.data.exists() && event.data.previous.exists()) {
return (current || 0) - 1;
}
});
});
The issue being that I get an error in the firebase console:
Error serializing return value: TypeError: Converting circular structure to JSON
as Inlined said here:
The problem you're running into is that the promised value that ref.transaction returns isn't serializeable as JSON. The easiest way to fix this (before we fix it in the Firebase SDK) is to transform the value to something like null.
I think to fix your problem, do this:
exports.countlists = functions.database.ref('/users/{uuid}/lists').onWrite(event => {
let root = admin.database().ref(`users/${event.params.uuid}/lists/list_count`)
return root.transaction(function(current){
if (event.data.exists() && !event.data.previous.exists()) {
return (current || 0) + 1;
}
else{
return (current || 0) - 1;
}
}.then(() => null));
});
I have a Chrome extension (specifically, a "content script") where I'd like to detect whether the page I am monitoring/changing is in fullscreen state. I have tried several APIs, as well as the "screenfull" library, but no luck so far. Any ideas?
Thanks for your help!
If you want to detect whether the page has used the Fullscreen API to enter fullscreen mode, just check document.webkitIsFullscreen.
If you want a general method to reliably detect full screen mode, the chrome.windows API is your only option. Since this API is unavailable to content scripts, you need to use the message passing API to interact with a background or event page.
Example: content script
function isFullScreen(callback) {
chrome.runtime.sendMessage('getScreenState', function(result) {
callback(result === 'fullscreen');
});
}
// Example: Whenever you want to know the state:
isFullScreen(function(isFullScreen) {
alert('Window is ' + (isFullScreen ? '' : 'not ') + 'in full screen mode.');
});
Example: background / event page
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if (message === 'getScreenState') {
chrome.windows.get(sender.tab.windowId, function(chromeWindow) {
// "normal", "minimized", "maximized" or "fullscreen"
sendResponse(chromeWindow.state);
});
return true; // Signifies that we want to use sendResponse asynchronously
}
});
You can try something like this:
var isFullScreen = (screen.width == window.outerWidth) && (screen.height == window.outerHeight);
if(isFullScreen) {
// ...
}
The simplest way is to listen for webkitfullscreenchange event, e.g
$(document).on('webkitfullscreenchange',function(){
if (document.webkitIsFullScreen === true) {
console.log('Full screen mode is on");
} else {
console.log('Full screen mode is off");
}
});
In a Chrome extension, a script may be included as a content script or background script.
Most stuff it does is the same, but there are some would vary according to different context.
The question is, how could a script tell which context it is being run at?
Thank you.
I think this is a fairly robust version that worked in my initial tests and does not require a slower try catch, and it identifies at least the three primary contexts of a chrome extension, and should let you know if you are on the base page as well.
av = {};
av.Env = {
isChromeExt: function(){
return !!(window['chrome'] && window['chrome']['extension'])
},
getContext: function(){
var loc = window.location.href;
if(!!(window['chrome'] && window['chrome']['extension'])){
if(/^chrome/.test(loc)){
if(window == chrome.extension.getBackgroundPage()){
return 'background';
}else{
return 'extension';
}
}else if( /^https?/.test(loc) ){
return 'content';
}
}else{
return window.location.protocol.replace(':','');
}
}
};
Well I managed to work out this:
var scriptContext = function() {
try {
if (chrome.bookmarks) {
return "background";
}
else {
return "content";
}
}
catch (e) {
return "content";
}
}
It's because an exception would be thrown if the content script tries to access the chrome.* parts except chrome.extension.
Reference: http://code.google.com/chrome/extensions/content_scripts.html
The best solution I've found to this problem comes from over here.
const isBackground = () => location.protocol === 'chrome-extension:'
The background service worker at Manifest v3 does not contain a window.
I use this as part of my extension error handling which reloads the content scripts, when i receive an Extension context invalidated error:
...
if (!self.window) {
console.warn('Background error: \n', error);
} else {
location.reload();
}
...