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);
}
});
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 want to open app and pass parameters with deep linking using Electron (macOS).
Project 'electron-deep-linking-mac-win' is on GitHub.
Edited package.json, following ‘electron-builder’ quick-setup-guide to produce mac installer:
{
"name": "electron-deep-linking-osx",
"version": "1.0.0",
"description": "A minimal Electron application with Deep Linking (OSX)",
"main": "main.js",
"scripts": {
"start": "electron .",
"pack": "build --dir",
"dist": "build"
},
"repository": "https://github.com/oikonomopo/electron-deep-linking-osx",
"keywords": [
"Electron",
"osx",
"deep-linking"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "1.6.6",
"electron-builder": "17.1.2"
},
"build": {
"appId": "your.id",
"mac": {
"category": "your.app.category.type"
},
"protocols": {
"name": "myApp",
"schemes": ["myApp"]
}
}
}
Edited main.js, appended code to register myapp url scheme protocol, listen 'open-url' events and log the arguments:
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
// Module with utilities for working with file and directory paths.
const path = require('path')
// Module with utilities for URL resolution and parsing.
const url = require('url')
// Module to display native system dialogs for opening and saving files, alerting, etc.
const dialog = electron.dialog
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
// The setAsDefaultProtocolClient only works on packaged versions of the application
app.setAsDefaultProtocolClient('myApp')
// Protocol handler for osx
app.on('open-url', function (event, url) {
event.preventDefault();
log("open-url event: " + url)
dialog.showErrorBox('open-url', `You arrived from: ${url}`)
})
// Log both at terminal and at browser
function log(s) {
console.log(s)
if (mainWindow && mainWindow.webContents) {
mainWindow.webContents.executeJavaScript(`console.log("${s}")`)
}
}
Steps to come to life:-)
# Clone this repository
git clone https://github.com/oikonomopo/electron-deep-linking-mac-win.git
# Go into the repository
cd electron-deep-linking-mac-win
# Install dependencies
npm install
# Run the app
npm start
# Produce installer
npm run dist
After running the installer (electron-deep-linking-mac-win/dist/electron-quick-start-1.0.0.dmg), i try to open electron-deep-linking-os app with deep linking, entering myapp://param at Safari address bar.
If app is opened, it activates and i can see the dialog and the log open-url event: myapp://param!
If app is closed, it opens, dialog is shown with proper url but isn't logged to dev console!
Why with dialog module url is showing properly, but isn't logged to dev console?
How to log it?
Looking for solution using only electron-builder (which uses electron-packager)!
Solved for both macOS and win32 ( Updated project 'electron-deep-linking-mac-win' on GitHub).
package.json:
{
"name": "electron-deeplinking-macos-win32",
"version": "0.0.1",
"description": "Minimal Electron application with deep inking (macOS/win32)",
"main": "main.js",
"scripts": {
"start": "electron .",
"pack": "build --dir",
"dist": "build"
},
"repository": "https://github.com/oikonomopo/electron-deep-linking-osx",
"author": "oikonomopo",
"license": "CC0-1.0",
"devDependencies": {
"electron": "1.6.6",
"electron-builder": "17.1.2"
},
"build": {
"appId": "oikonomopo.electron-deeplinking-macos-win32",
"protocols": {
"name": "electron-deep-linking",
"schemes": ["myapp"]
},
"mac": {
"category": "public.app-category.Reference"
},
"win": {
}
}
}
main.js:
const {app, BrowserWindow} = require('electron')
// Module with utilities for working with file and directory paths.
const path = require('path')
// Module with utilities for URL resolution and parsing.
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
// Deep linked url
let deeplinkingUrl
// Force Single Instance Application
const shouldQuit = app.makeSingleInstance((argv, workingDirectory) => {
// Someone tried to run a second instance, we should focus our window.
// Protocol handler for win32
// argv: An array of the second instance’s (command line / deep linked) arguments
if (process.platform == 'win32') {
// Keep only command line / deep linked arguments
deeplinkingUrl = argv.slice(1)
}
logEverywhere("app.makeSingleInstance# " + deeplinkingUrl)
if (win) {
if (win.isMinimized()) win.restore()
win.focus()
}
})
if (shouldQuit) {
app.quit()
return
}
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
mainWindow.webContents.openDevTools()
// Protocol handler for win32
if (process.platform == 'win32') {
// Keep only command line / deep linked arguments
deeplinkingUrl = process.argv.slice(1)
}
logEverywhere("createWindow# " + deeplinkingUrl)
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
// Define custom protocol handler.
// Deep linking works on packaged versions of the application!
app.setAsDefaultProtocolClient('myapp')
// Protocol handler for osx
app.on('open-url', function (event, url) {
event.preventDefault()
deeplinkingUrl = url
logEverywhere("open-url# " + deeplinkingUrl)
})
// Log both at dev console and at running node console instance
function logEverywhere(s) {
console.log(s)
if (mainWindow && mainWindow.webContents) {
mainWindow.webContents.executeJavaScript(`console.log("${s}")`)
}
}
main.js code description:
At let deeplinkingUrl we keep the provided url.
On macOS you need to listen to the app.open-url event, while on Windows the url should be available in process.argv (in the main process).
On macOS platform this is captured at 'open-url' event, we set it with deeplinkingUrl = url! (See // Protocol handler for osx)
On win32 platform this is saved at process.argv together with other arguments. To get only the provided url, deeplinkingUrl = argv.slice(1). (See // Protocol handler for win32)
At app.makeSingleInstance method we check in which platform we are and we set deeplinkingUrl accordingly! If we are on win32 platform, the url is located at argv variable from callback, else on macOS should have already been set at 'open-url' event! (See // Force Single Instance Application)
You should be setting up the open-url event in the will-finish-launching callback as per the docs. I had similar weird behaviour with open-file until it was setup within the will-finish-launching callback.
You notice they've done it this way in the example you link to.
Although it mentions this under will-finish-launching, it should really mention this under the open-url and open-file docs too as its quite easy to miss.
app.on('will-finish-launching', () => {
// Protocol handler for osx
app.on('open-url', (event, url) => {
event.preventDefault();
log("open-url event: " + url)
})
});
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
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.