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.
Related
I built a small teams message extension which just uses some user input, builds a link from it, and returns a card with a button pointing to that link.
I need to add a Settings section, but I couldn't find proper instructions or a sample for this.
I tried to use this sample as example (which is JS, and I'm using TypeScript), but I could not get it to work.
Relevant portion in my class:
export class MessageExtensionBot extends TeamsActivityHandler {
...
protected handleTeamsMessagingExtensionConfigurationQuerySettingUrl(context: TurnContext, query: MessagingExtensionQuery): Promise<MessagingExtensionResponse> {
return Promise.resolve({
composeExtension: {
type: "config",
suggestedActions: {
actions: [
{
title: "Title",
type: ActionTypes.OpenUrl,
value: "https://" + `${process.env.PUBLIC_HOSTNAME}` + "/settings.html"
}
]
}
}
});
}
protected handleTeamsMessagingExtensionConfigurationSetting(context, settings): Promise<void> {
return Promise.resolve(undefined);
}
process.env.PUBLIC_HOSTNAME points to the temporary ngrok link, smth like xxx-yyy-zzz.ngrok.io.
When I access xxx-yyy-zzz.ngrok.io/settings.html, I get the correct content of that html file
I also added "canUpdateConfiguration": true, in my manifest file, and the Settings link is available.
THE PROBLEM: when I click the Settings link in my custom teams message extension, all I get is a pop-up with the error message Sorry, the setting of this compose extension is not available. Please try again later. and an OK button.
What is wrong/missing in my code ?
Thank you.
We also faced this issue. It is resolved after adding validDomains in the manifest. Please try updating the validDomains in manifest, hope this resolves the issue.
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 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