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
Related
I developed a web extension for Firefox with manifest.json containing:
"icons": {
"16": "Open In New.svg"
},
and the background.js containing:
browser.menus.create( {
id: 'myContextMenuItem',
title: browser.i18n.getMessage('contextMenuItemLabel'),
contexts: ['link']
} )
The icon declared in manifest.json is the extension's icon and is also used in front of the context menu item label. Can the latter be changed programmatically on the fly?
I found Change Context Menu Icon but that has no answer with a solution.
You can update with menus.update(). For example:
browser.menus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == "do-not-click-me") {
var updating = browser.contextMenus.update(info.menuItemId, {
icons: {16: 'something.svg'}
});
updating.then(onUpdated, onError);
}
});
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;
});
});
});
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"]
}
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.
I have created my firefox addon but when I install it, it doesn't create any icon on the tool bar of firefox.
I am unable to upload the image due to low reputation but posted the image at this link
I'm going to guess you're using the add-on SDK because of the tag. To do this, use ActionButton:
let { ActionButton } = require("sdk/ui/button/action");
let button = ActionButton({
id: "my-button-id",
label: "Button Label",
icon: {
"16": "./icon16.png",
"32": "./icon32.png"
},
onClick: function(state) {
console.log("button '" + state.label + "' was clicked");
}
});
[The full documentation is here[(https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action)
Pay particular attention to the docs on icon files - files should be located in the data sub-directory in your add-on folder.
If you're not actually using the Add-on SDK, Noitidart's comment is more relevant to you.