How to detect fullscreen api support with pure javascript? - javascript

This is the API I'm referring to: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
As for what I've tried so far:
Modernizr has the Modernizr.fullscreen thing, but I don't feel like using yet another library for what seems like a simple task.
So I'm digging the source code of Modernizr to try and see how they do it, after all Modernizr does use JS to figure it out, right? But so far all I found about the fullscreen API in their source code is this file (Modernizr/feature-detects/fullscreen-api.js)
/*!
{
"name": "Fullscreen API",
"property": "fullscreen",
"caniuse": "fullscreen",
"notes": [{
"name": "MDN Docs",
"href": "https://developer.mozilla.org/en/API/Fullscreen"
}],
"polyfills": ["screenfulljs"],
"builderAliases": ["fullscreen_api"]
}
!*/
/* DOC
Detects support for the ability to make the current website take over the user's entire screen
*/
define(['Modernizr', 'prefixed'], function(Modernizr, prefixed) {
// github.com/Modernizr/Modernizr/issues/739
Modernizr.addTest('fullscreen', !!(prefixed('exitFullscreen', document, false) || prefixed('cancelFullScreen', document, false)));
});
...and I don't quite understand that code. yet.

The following snippet seems to be the best solution:
const fullScreenAvailable = document.fullscreenEnabled ||
document.mozFullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled

Related

Exception Using chrome.desktopCapture.chooseDesktopMedia

In Chrome Manifest V2 I was able to easily capture the desktop. Attempting this in Manifest version 3 I have had no luck. I feel I may be missing something here in attempting this in Manifest V3.
I have been using this as a reference. https://developer.chrome.com/docs/extensions/reference/desktopCapture/
My manifest has these permissions granted to it
"permissions": [
"idle",
"tabs",
"storage",
"notifications",
"alarms",
"desktopCapture"
],
This is the sample code I have been testing just to see if I can get the screen selector to come up. I have not included the tabs.tab as this is labeled as optional and I wanted to see if I could have the plugin trigger the screen recording feature on its own.
chrome.desktopCapture.chooseDesktopMedia(["screen"], (streamID, options) => {console.log(id)});
I have been attempting to have this run in my background.js file.
Each time it runs chrome crashes completely with no errors given.
Reviewing the crash dump I can see the following information.
Exception Code: 0xC0000005
Exception Information: The thread tried to read from or write to a virtual address for which it does not have the appropriate access.
I solve it this way for Manifest v3.
It was giving me errors too. When I checked the documentation, chooseDesktopMedia it wanted three parameters.
DesktopCaptureSourceType[]
Tab
Callback Function
I see in your question your have put 1 and 3. I did the same it was giving me errors. So I made sure I get the active tab first before calling chrome.desktopCapture.chooseDesktopMedia in the background script.
So the code looks like this
chrome.tabs.query({ active: true }, (tabs) => {
if (tabs.length) {
const tab = tabs[0];
var pending = chrome.desktopCapture.chooseDesktopMedia(["window"], tab, (streamId) => {
//console.log(streamId, tab);
});
}
return false;
})
And it worked. I hope this helps

Injecting a JavaScript into a webpage automatically?

I am a very novice when it comes to writing code, this is my first attempt. I have done a fair amount of research and learning, but there is so much to learn. So i'm looking for some help or advice. At work we have to click a button to get us a work order. I am trying to automate the process, I have some code written that clicks the button for me. Unfortunately when it returns with "No Matches" it automatically reloads the page and my code is gone in the DOM. Is there a way to automatically inject my code every time the webpage reloads?
My Current Code:
var button = document.getElementById('GetMeAWorkOrder')
setInterval
button.click()
,1500
You can look into creating your own Chrome extension that injects the code through a content script. To make it easier, I've included the starter files for your specific project. Simply entering your specific URL into the marked lines should be enough for the code you posted.
Manifest.json
{
"manifest_version": 2,
"name": "My Extension",
"description": "Injects custom code to [website]",
"version": "1",
"permissions": [
"*://URL HERE*"
],
"content_scripts": [
{
"matches": [
"*://URL HERE*"
],
"js": ["content.js"]
}
]
}
content.js
//code you want to inject into the website
var button = document.getElementById('GetMeAWorkOrder');
setInterval( function() { button.click() },1500 );
Remember to replace the URLS with the website you want to inject the code into; here's a reference on match patterns.
Good luck and have fun coding! :)

WebExtension failing silently in Firefox but not Chrome

I'm making a WebExtension for Chrome and Firefox that adds more information to GitHub. It's supposed to be faster than existing extensions.
I have my manifest set up like Mozilla's documentation recommends.
{
"manifest_version": 2,
"name": "GitHub Extended",
"version": "0.0.1",
"description": "Adds information to GitHub normally accessible only by the API.",
"permissions": [
"https://github.com/*"
],
"content_scripts": [
{
"all_frames": true,
"run_at": "document_start",
"matches": [
"https://github.com/*"
],
"js": [
"source/github.js",
"source/repository.js"
]
}
]
}
When the page is loaded, the content scripts are injected. The file github.js is a light wrapper around GitHub's API, and repository.js is the code to modfy the DOM of the main repository root page.
The most important code in there is this the preloader, which makes an API request while the page is loading and waits for both events to complete before adding to the DOM.
While this current code works fine in Chrome, in Firefox it simply does nothing. I tried testing it by putting console.log("I'm loaded!"); in repository.js. Nothing is printed. Why is this code not working in Firefox?
function beginPreload() {
console.log("Test from preload scope!");
let urlMatch = window.location.pathname.match(/\/([\w-]+)\/([\w-]+)/);
console.log(urlMatch);
Promise.all([
getSortedReleases(urlMatch[1], urlMatch[2]),
documentReady()
]).then((values) => {
let releaseJson = values[0];
let actionsEl = document.getElementsByClassName("pagehead-actions")[0];
let dlCount = 0;
for (release of releaseJson)
for (asset of release.assets)
dlCount += asset.download_count;
let buttonEl = createDownloadButton(
releaseJson[0].html_url,
window.location.pathname + "/releases",
formatNum(dlCount)
);
actionsEl.appendChild(buttonEl);
});
}
beginPreload();
console.log("Test from global scope!");
This was the solution.
"permissions": [
"https://api.github.com/*"
]
All that needed to happen was add permission for the extension to use GitHub's API. AFAIK, this is only required for content scripts using XHR.
You need to go step by step and first ask yourself if script is really injected in the FF github page: remove everything thing from your contentScript, reload extension and check your FF console. If you see the log then start adding code progressively until it breaks, if not you have a problem with your build content.

Context menus not working firefox add-on WebExtensions

I'm trying to add a context menu to my firefox add-on using the WebExtensions API. I need the background script to listen to a click on the menu item and send a message to the content script.
This is what I have:
manifest.json
{
"manifest_version": 2,
"name": "MyExt",
"version": "0.0.1",
"description": "Test extension",
"icons": {
"48": "icons/icon-48.png"
},
"applications": {
"gecko": {
"id": "myext#local",
"strict_min_version": "45.0"
}
},
"permissions": ["contextMenus"],
"background": {
"scripts": ["background-scripts.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.js"]
}
]
}
background-scripts.js
chrome.contextMenus.create({
id: "clickme",
title: "Click me!",
contexts: ["all"]
});
browser.contextMenus.onClicked.addListener(function(info, tab) {
console.log("Hello World!");
sendMessage(info, tab);
});
function sendMessage(info, tab) {
chrome.tabs.query(
{active: true, currentWindow: true },
function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "Test message from background script.");
}
);
}
content-script.js
browser.runtime.onMessage.addListener(function(msg) {
console.log(msg);
});
The menu item is being created, but the messages are never displayed (I'm checking both the Web and Browser Console). Since the click event is not working, the message is not sent either.
I'm following this example from MDN, which does not work. It also creates the menu items, but they do nothing, which makes me think that something changed in the API and MDN didn't bother to update the documentation.
Any ideas? Thanks.
Your code works as written:
I strongly suspect that your issue is either of:
You are testing using a version of Firefox prior to Firefox 48. Firefox 48 is in Beta. The contextMenus "Browser compatibility" section clearly states that the first version in which it is functional is Firefox 48. The WebExtensions API is still in development. In general, you should be testing against Firefox Developer Edition, or Firefox Nightly. You can use earlier versions if all the APIs you are using are indicated to be working in an earlier version. However, if you experience problems, you should test with Nightly. I suspect that this is your most likely issue as you indicated that the contextMenus example code was not doing anything.
You have not navigated to an actual webpage. Your content-script.js is only loaded into pages that match one of the supported schemes: that is, "http", "https", "file", "ftp", "app". It is not loaded in about:* pages. If this was your issue, you would have had partial functionality from the contextMenus example code. In addition, using your code, the Browser Console would have, after a delay, generated an error message:
Error: Could not establish connection. Receiving end does not exist.
A note on your code:
Note, your sendMessage() function is, potentially, overly complex. You are searching for the active tab when the tabs.Tab object for the tab in which the context menu item was selected was already passed to your function as one of the arguments. A shorter version could be:
function sendMessage(info, tab) {
chrome.tabs.sendMessage(tab.id, "Test message from background script.");
}
I would be interested to know if you have encountered a situation where you needed to search for the active tab rather than use the tabs.Tab object provided by the context menu listener.

Get Fonts through Flash ans JS

I have to check all available fonts istalled on user's system. Therefore, I try to use this tutorial. I compiled Fontlist.as with mxmlc compiler and included a JS file, which contains the populateFontList(fontArr) function.
I embed the SWF file with:
$("#flash").flash(
{
"src": "FontList.swf",
"width": "1",
"height": "1",
"swliveconnect": "true",
"id": "getfonts",
"name": "getfonts"
},
{ update: false }
);
If I open the page, it the SWF file will be embeded to the <div id="flash"></div> but the populateFontList(fontArr) function isn't fired.
Is there any trap which I fell in?
I would welcome every advise.
Many thanks!
Daniel
Ok I got it. My problem was, that I testet it locally. I installed the Flash Debugger and realised, that there was a security error #2060. The solution was to add the local path to flash player's global settings:
Global Settings

Categories