Remove menubar from Finder in Electron on OSX - macos

I purchased a new macbook and I am now working on getting my apps to run on a 64bit mac.
However I haven't been able to remove the default menubar.
Is there anyway to change my app name from Electron to something else within Electron via app.js so I don't see Electron in Finder (revert to screenshot for better understanding)? Is there any way to remove the edit, view window, and help menus?
package.json:
{
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron-prebuilt": "^0.33.0"
}
}
app.js:
var app = require("app"),
BrowserWindow = require("browser-window");
app.on("ready", function() {
var mainWindow = new BrowserWindow({
toolbar: false,
"skip-taskbar": true,
"auto-hide-menu-bar": true,
width: 800,
height: 600
});
mainWindow.loadUrl("file://" + __dirname + "/index.html");
mainWindow.setMenuBarVisibility(false);
mainWindow.setAutoHideMenuBar(true);
mainWindow.openDevTools();
});
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
Hello world!
</body>
</html>

After you create your browser window do the following:
mainWindow.setMenu(null);
Only works for Windows and Linux! - http://electron.atom.io/docs/api/browser-window/#winsetmenumenu-linux-windows
Otherwise you can create a custom menu of your own by checking out Electron's documentation on the Menu: http://electron.atom.io/docs/api/menu/.

I got same problem here with my electron app
I tried mainWindow.setMenu(null); but it didn't work
but I noticed that when app is running, there was an electron icon show in the dock which is your app
I think maybe this is the point to cause the problem here
just give it a try
app.dock.hide();
Notice: it's an os x only method (documentation)
there you go
after hide dock icon, you app no longer have default functions of ApplicationMenu or dockMenu, such as Quit, About, Hide etc...
so you can consider about give your app a Tray

The name Electron is in the Info.plist file inside Electron.app, change it to what you want.

Related

Electron: How do implement "open with" / have the "open-file" app event on MacOS called?

According to the documentation the following should do it:
app.on("open-file", (event, path) => {
event.preventDefault();
console.log("OPEN FILE???");
});
The console log is never called. I have tried:
Choosing "open with" and the application by right clicking on a file.
Use open with while the app is open.
Dragging a file on the dock icon.
It might be quite significant how I build it too. I use electron-builder and have this in my package.json:
"build": {
"appId": "com.myname.someid",
"mac": {
"fileAssociations": [
{
"ext": [
"mp3"
]
}
]
}
}
Then I run electron-builder after installing it.
I have retested it in electron-quick-start and after following the above steps it still fails.
According to this tutorial this is also how you should do it:
https://roysegall.medium.com/electron-open-with-for-mac-osx-f215a1fe2ce1

Service-worker doesn't install only adds to home screen

I'm trying to install the pwa onto my mobile device. I only am able to add to home screen. Does anyone have any idea why this is happening?
To make your PWA installable you need to meet up the following requirments:
A web manifest,with the correct fields filled in.
The website to be served from a secure(HTTPS) domain.
An icon to represent the app on the device.
A service worker registered with a fetch eventhandler,to make the app work offline(this is only required by chrome for Android currently).
You must include your manifest file in section of your index.html,like this
<link rel="manifest" href="name.webmanifest">
Your manifest should contain the following fields,most of which are self explanatory.
{
"background_color": "purple",
"description": "Shows random fox pictures. Hey, at least it isn't cats.",
"display": "fullscreen",
"icons": [
{
"src": "icon/fox-icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"name": "Awesome fox pictures",
"short_name": "Foxes",
"start_url": "/pwa-examples/a2hs/index.html"
}
Now when the browser finds the manifest file with all requirements fulfilled,it will fire a beforeinstallprompt and accordingly you have to show the A2HS dialog.
NOTE:
Different browsers have different criteria for installation, or to trigger the beforeinstallprompt event.
Starting in Chrome 68 on Android (Stable in July 2018), Chrome will no longer show the add to home screen banner. If the site meets the add to home screen criteria, Chrome will show the mini-infobar.
For A2HS dialog:
Add a button in your document,to allow user to do the installation
<button class="add-button">Add to home screen</button>
Provide some styling
.add-button {
position: absolute;
top: 1px;
left: 1px;
}
Now in the JS file where you register your service worker add the following code
let deferredPrompt;
//reference to your install button
const addBtn = document.querySelector('.add-button');
//We hide the button initially because the PWA will not be available for
//install until it follows the A2HS criteria.
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});

Ignoring X-Frame-Options in firefox webextension

I'm trying to port my extension from Chrome to Firefox, however I have problem
with X-Frame-Options. My extension is pretty simple, all it does is create few
iframes, wait for them to load and then extract some data from the loaded pages.
This all works great it Chrome, however in Firefox I have problem that the page
does not load in the iframe (probably due to X-Frame-Options: ALLOW-FROM XXX).
In Chrome having
"permissions": {
"https://example.com/"
}
is enough to make browser ignore the X-Frame-Options, but in Firefox
it still does not work.
So, how can I force Firefox to ignore this X-Frame-Options for my extension (and
its pages)?
EDIT: I would just like to add that since I'm using injected content script anyway (to get data from the frame), I don't need it to be in an iframe. All I need is to render the page without it being visible to user (so new tabs etc. are no-go :/).
EDIT2: This 2 file extension works in chrome, but not in firefox:
manifest.json
{
"manifest_version": 2,
"name": "Iframe test",
"description": "foobar",
"version": "0.9.3",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"https://jisho.org/"
]
}
popup.html
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<iframe src="https://jisho.org"></iframe>
</body>
</html>
It looks like it "just works" in Chrome because Chrome doesn't support "ALLOW FROM".
Firefox does the right thing here, but you can intercept this header like any other with the webRequest API, specifically webRequest.onHeadersReceived. Something like this (untested) should work:
browser.webRequest.onHeadersReceived.addListener((details) => {
let newHeaders = details.responseHeaders.filter(
header => !header.name.toLowerCase().endsWith('frame-options')
);
return {responseHeaders: newHeaders};
},
{
urls: [ 'https://jisho.org/*' ],
types: [ 'sub_frame' ]
},
['blocking', 'responseHeaders']
);
You also require the webRequest and webRequestBlocking permissions for this.

How do I make a Firefox 57 addon that opens a link when left-clicked?

This may sound dumb, but I want to make a link open in a new tab whenever the icon in the toolbar is left-clicked. I've never made a Firefox addon before, and I'm pretty clueless on how you'd go about doing that.
You need browserAction in manifest.json, tabs.create and browserAction.onClicked.
Inside manifest.json:
"browser_action": {
"browser_style": true,
"default_icon": {
"32": "icons/icon-32.png"
}
}
Inside background.js:
browser.browserAction.onClicked.addListener((tab) => {
browser.tabs.create({url: "https://google.com"}); //
// or
browser.tabs.duplicate({tabId: tab.id}); // duplicate current tab, same as doing browser.tabs.create({url: tab.url}); but better (navigation history is kept)
});
Don't forget to ask for the "tabs" or "activeTab" permission in manifest.json.
"permissions": ["tabs", "activeTab"]
And don't forget to register background.js
"background": {
"scripts": ["background.js"]
}

Fireox, how get tabs object?

I try get tabs of current brouser window
var tabs = require("sdk/tabs");
and catch all new tabs
tabs.on('load', function(tab) {
console.info( tab.url );
});
if I run firefox by jpm run, all work fine. But if I build the xpi and install it to firefox then I'm getting tabs by other empty windows (if I call tabs.open opening new windows)
How fix it?
Now I'm trying the following simple example:
var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");
var button = buttons.ActionButton({
id: "mozilla-link",
label: "Visit Mozilla",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
function handleClick(state) {
tabs.open("http://www.mozilla.org/");
}
And this example works only if I run "jpm run".
if I build the extension and simple run the firefox (with the addon), the button do not created.
I'm thinking that your xpi can not locate the icons, so your plugin seems not working.
The icons should be in your ./data directory and furthermore in your package.json it is a good practice to specify your main. The file hierarchy of your working extension is:
├--data/
├-- icon-16.png
├-- icon-32.png
├-- icon-64.png
├--lib/
├-- main.js
├--package.json
The package.json looks like:
{
"name": "stackexample",
"title": "stackexample",
"id": "mail#mail.com",
"description": "An stackoverflow example",
"author": "mail#mail.com",
"main": "./lib/main.js",
"version": "0.0.1"
}
In firefox after 'ready' event has been emitted, all properties relating to the tab's content can be used.You cannot access tab's properties on load event.
Please refer to this link of addon sdk tabs ready event
I found answer
If set setting history
"Never remember history" i got the problem
if set
"Remember history" problem has gone
it's very strange, i know

Resources