I have implemented sample mozilla firefox extension to display firefox icon (action button) on toolbar and it will open "http://www.mozilla.org/".
It is working fine in jpm run, then I have created package of that using jpm xpi and created xpi file. Then I have installed it in my firefox browser and successfully installed but did not work. It couldn't add firefox icon (action button) on toolbar (There is no error in console).
Below is the code.
index.js
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/");
}
package.json
{
"title": "Sample",
"name": "sample",
"version": "0.0.1",
"description": "Sample AddOn",
"main": "index.js",
"author": "Sample",
"engines": {
"firefox": ">=30.0a1",
"fennec": ">=30.0a1"
},
"license": "MIT"
}
I have implemented that using - https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29
Please Help.
Thanks
In order to make the icons visable, you have to create a data directory inside your extension and put your icons there.
You missed one of item in this lesson...
You need to create "data" directory in your extension root dir, and all of content you have to put in this folder.
In my Example I use it like this:
var button = this.buttons.ActionButton({
id: "show-panel",
label: "Show Panel",
icon: {
"16": "./icon/x16.png",
"32": "./icon/x32.png",
"64": "./icon/x64.png"
},
onClick: function(state) {
// ...
}
});
and my structure looks like:
MyExtensionName/data/icon/[.png,.ico]
But you can also use internal links of your extension:
resource://extensionname/...
icon: {
"16": "resource://extensionname/data/icon/x16.png",
"32": "resource://extensionname/data/icon/x32.png",
"64": "resource://extensionname/data/icon/x64.png"
}
Related
I have the following background.js script:
browser.runtime.onInstalled.addListener(function () {
browser.contextMenus.create({
id: 'add-todo',
title: 'Add a todo',
contexts: ['page']
});
});
browser.contextMenus.onClicked.addListener(function (clickData) {
if (clickData.menuItemId === 'add-todo') {
var todoName = window.prompt('Add a todo')
alert(todoName);
}
});
And the following manifest.json
{
"manifest_version": 2,
"name": "Todo",
"version": "1.0",
"description": "Yet another todo app",
"browser_action": { "default_popup": "index.html" },
"permissions": ["contextMenus"],
"background": {
"scripts": [
"background.js"
]
}
}
I can see the context menu when I right click, but clicking it does nothing.
Oddly, when I open the extension via the browser action button, and it displays my popup.html, I can right click there and see a prompt dialog.
I use the same code in Chrome with the webextension-polyfill library and it works just fine.
What gives with Firefox?
I have started developing an addon which would work on package.json of a Github repo. On loading the addon, it requires an additional page refresh for the addon to take effect instead of applying the border as soon as the url is recognized.
manifest.json
{
"manifest_version": 2,
"name": "Border It",
"version": "0.0.1",
"permissions": ["activeTab", "tabs", "https://github.com/*"],
"content_scripts": [
{
"matches": ["https://github.com/*/package.json"],
"js": ["src/scripts/borderify.js"],
}
]
}
borderify.js
document.body.style.border = '5px solid red';
What am I doing wrong?
GitHub updates page content dynamically, so you need to run your script on every GitHub pages ("matches": ["https://github.com/*"]) and observe the location change. Here is more hints:
Event when window.location.href changes
(updated)
Example implementation based on MutationObserver:
{
"manifest_version": 2,
"name": "Border It",
"version": "0.0.1",
"permissions": [
"activeTab",
"tabs",
"https://github.com/*"
],
"content_scripts": [
{
"matches": ["https://github.com/*"],
"js": ["borderify.js"]
}
]
}
function onLocationChanged() {
if (/\/package.json([?#]|$)/.test(location.pathname))
document.body.style.border = '5px solid red';
else
document.body.style.border = '';
}
onLocationChanged(); // executed when the page is initially loaded
let lastUrl;
const observer = new MutationObserver(mutations => {
// executed on any dynamic change in the page
if (location.href == lastUrl)
return;
lastUrl = location.href;
onLocationChanged();
});
const config = {
childList: true,
subtree: true
};
observer.observe(document.body, config);
i'm building a connector for MS Teams and Outlook. I have registered the connector on Connectors Developer Dashboard but when I sideload it on outlook and I try to configure the connector... Nothing happens in my setup page. Indeed,
microsoftTeams.settings.getSettings is not working.
Does the microsoftTeams js library works for Outlook too? If not how do I do?
It seems that Connect To Office 365 Button aren't the ongoing way to do it.
Documentation with dead links and mix between Teams & Outlook doesn't help :(
Thank you!
Edit 1:
AngularJS code called on my configuration page:
$scope.setValidateState = function() {
microsoftTeams.settings.setValidityState(true);
};
$scope.authenticate = function() {
microsoftTeams.authentication.authenticate({
url: isSettings.serverUrl + '/microsoft/auth-start/',
with: 500,
height: 800,
successCallback: function(data) {
$scope.isAuthenticated = data && data['accessToken'];
localStorage.setItem("microsoft-oauth", JSON.stringify(data));
displayConfiguration();
},
failureCallback: function(reason) {
console.log(reason);
}
});
};
function displayConfiguration() {
microsoftTeams.settings.setValidityState(true);
microsoftTeams.settings.registerOnSaveHandler(function(saveEvent) {
microsoftTeams.settings.setSettings({
entityId: 'icescrum-connector-pkey-' + $scope.settings.project.pkey,
contentUrl: isSettings.serverUrl + '/microsoft/setup/',
configName: $scope.settings.project.name
});
microsoftTeams.settings.getSettings(function(settings) {
$scope.settings.webhookUrl = settings.webhookUrl;
console.log(settings.webhookUrl);
saveEvent.notifySuccess();
});
});
microsoftTeams.settings.getSettings(function(settings) {
$scope.setup = !settings.configName;
ProjectService.listByUserAndRole(Session.user.id, 'productOwner', {light: true}).then(function(projects) {
$scope.projects = projects;
if (settings.entityId) {
$scope.settings.project = _.find($scope.projects, {pkey: settings.entityId.split('icescrum-connector-pkey-')[1]});
}
$scope.ready = true;
});
});
}
// Init
$scope.settings = {};
$scope.projects = [];
$scope.ready = false;
var tokenData = JSON.parse(localStorage.getItem("microsoft-oauth"));
$scope.isAuthenticated = tokenData && tokenData['accessToken'];
microsoftTeams.initialize();
if($scope.isAuthenticated){
displayConfiguration();
}
My manifest.json:
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.3/MicrosoftTeams.schema.json",
"manifestVersion": "1.3",
"id": "a15dcb92-35af-400e-ab9b-99efda40138f",
"version": "1.0.0",
"packageName": "com.iceScrum2",
"developer": {
"name": "Developer",
"websiteUrl": "https://www.icescrum.com",
"privacyUrl": "https://www.icescrum.com",
"termsOfUseUrl": "https://www.icescrum.com"
},
"description": {
"full": "iceScrum connector",
"short": "integration iceScrum with Microsoft Teams with a bot, a connector and a tab"
},
"icons": {
"outline": "icescrum-icon-32x32.png",
"color": "icescrum-icon-192x192.png"
},
"connectors": [
{
"connectorId": "a15dcb92-35af-400e-ab9b-99efda40138f",
"scopes": [
"team"
],
"configurationUrl": "https://icescrum.ngrok.io/icescrum/microsoft/setup/"
}
],
"name": {
"full": "iceScrum2",
"short": "iceScrum2"
},
"accentColor": "#FFFFFF",
"validDomains": [
"*.icescrum.com",
"icescrum.ngrok.io"
]
}
My microsoft Teams js lib was outdated (1.3.4). With the last version (1.4.1) it works well on Outlook and on Teams.
I tried to modified the original notification sample and I found that the old webit notification does not work any more.So I changed to chrome notification. Basically, I still reuse the background page like this:
"permissions": [
"notifications",
"http://*/*"
],
"options_page": "options.html",
"background": { "scripts": ["background.js"], "persistent": false },
Any the background.js is just like this:
console.log("Before create " + notID + " notification");
chrome.notifications.create("id"+notID++, options, creationCallback);
function creationCallback(ID) {
console.log("Succesfully created " + ID + " notification");
}
Looks like something is not configured right and I cannot see the notification. And I see the following log:
Before create 0 notification background.js:87
Succesfully created undefined notification background.js:92
Anything do I still miss here?
Thanks
Update: Here is the modified background.js
window.addEventListener('load', function() {
var opt = {
iconUrl: "48.png",
type: 'list',
title: 'Primary Title',
message: 'Primary message to display',
priority: 1,
items: [{ title: 'Item1', message: 'This is item 1.'},
{ title: 'Item2', message: 'This is item 2.'},
{ title: 'Item3', message: 'This is item 3.'}]
};
chrome.notifications.create('notify1', opt, function() { console.log('created!');console.log(chrome.runtime.lastError)});
});
Here is the completed manifest.json:
{
"name": "Notification Demo",
"version": "1.1",
"description":
"Shows off desktop notifications, which are \"toast\" windows that pop up on the desktop.",
"icons": {"16": "16.png", "48": "48.png", "128": "128.png"},
"permissions": [
"notifications",
"http://*/*"
],
"options_page": "options.html",
"background": { "scripts": ["background.js"]},
"manifest_version": 2,
// crbug.com/134315
"web_accessible_resources": [
"48.png"
]
}
It's likely there's an error going on if anything. We've recently started logging errors for unchecked chrome.runtime.lastError so try on a newer version of Chrome perhaps.
I am trying to capture tab by function
chrome.tabs.captureVisibleTab(..)
on my chrome extension on Mac OS X version 10.6.8 and Chrome version 19.0.1084.53 it works fine for google and other sites but does not capture tab for Youtube.com or from any tab which contains flash player embedded.
Captured tab from youtube.com appears black and no content is visible.
Below is my code -
background.html contains
..
chrome.browserAction.onClicked.addListener(function (tab) {
images = [];
chrome.windows.getCurrent(function (win) {
chrome.tabs.captureVisibleTab(win.id, { "format": "png" }, function (imgUrl) {
chrome.tabs.create({ url: imgUrl });
});
});
});
..
manifest.json contains
{
"name": "Moon",
"version": "1.0",
"manifest_version": 1,
"background_page": "background.html",
"description": "Moon",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs"
,"<all_urls>"
]
}
This is a Chrome bug with no known workaround.