chrome extension: desktop notification from a background script - macos

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.

Related

Why doesn't this Firefox extension code work with prompt or alert for contextMenus?

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?

Having Difficulty Displaying Web Frame with Task Module - Microsoft Bot Framework

I have followed the microsoft documentation.
From it, I understand that "I can run my own custom HTML/JavaScript code" and make it display on teams with Task Module.
I have done everything recommended my card is showing blank each time invoke the task module.
I'm using the BotBuilder-Sample Node JS SDK
teamsTaskModuleBot.js file contains
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
const {
TeamsActivityHandler,
MessageFactory,
CardFactory,
} = require("botbuilder");
class TeamsTaskModuleBot extends TeamsActivityHandler
{
constructor ()
{
super();
// See https://aka.ms/about-bot-activity-message to learn more about the message and other activity types.
this.onMessage(async (context,next) =>
{
const card = this.getHeroCardMenu();
const message = MessageFactory.attachment(card);
await context.sendActivity(message);
// By calling next() you ensure that the next BotHandler is run.
await next();
});
this.onMembersAdded(async (context,next) =>
{
const card = this.getHeroCardMenu();
const message = MessageFactory.attachment(card);
await context.sendActivity(message);
// By calling next() you ensure that the next BotHandler is run.
await next();
});
}
getHeroCardMenu ()
{
return CardFactory.heroCard(
"Task Module Invocation from Hero Card",
null, // No images
[
{
type: "invoke",
title: "Open",
value: {type: "task/fetch"},
},
]
);
}
handleTeamsTaskModuleFetch (context,taskModuleRequest)
{
// taskModuleRequest.data can be checked to determine different paths.
return {
task: {
type: "continue",
value: {
url: "https://botiframe.netlify.app/index.html",
height: "medium",
width: "medium",
title: "Task Module Bot",
fallbackUrl: "https://botiframe.netlify.app/index.html"
},
},
};
}
}
module.exports.TeamsTaskModuleBot = TeamsTaskModuleBot;
My manifest.json file
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
"manifestVersion": "1.5",
"version": "1.0.0",
"id": "208a91ef-baa9-460d-bf8d-7c7bc2f475e0",
"packageName": "com.dipolediamond.taskmodule",
"developer": {
"name": "dipoleDiamond Ltd",
"websiteUrl": "https://www.dipolediamond.com",
"privacyUrl": "https://www.dipolediamond.com/blog",
"termsOfUseUrl": "https://www.dipolediamond.com/contact"
},
"icons": {
"color": "icon-color.png",
"outline": "icon-outline.png"
},
"name": {
"short": "Task Module Bot",
"full": "Simple Task Module Bot"
},
"description": {
"short": "Test Task Module Sample Bot",
"full": "Simple Task Module Sample Bot"
},
"accentColor": "#FFFFFF",
"bots": [
{
"botId": "208a91ef-baa9-460d-xxxx-xxxxxxx",
"scopes": ["personal", "team", "groupchat"],
"supportsFiles": false,
"isNotificationOnly": false
}
],
"permissions": ["identity", "messageTeamMembers"],
"composeExtensions": [
{
"botId": "208a91ef-baa9-460d-xxxx-xxxx",
"canUpdateConfiguration": true,
"commands": [],
"messageHandlers": [
{
"type": "link",
"value": {
"domains":"www.botiframe.netlify.app"
]
}
}
]
}
],
"validDomains": ["www.botiframe.netlify.app"]
}
Before showing your web content, Teams does some basic validation of the end address. This requires, as you've done, that the domain be registed with validDomains and domains sections. However, when I visit the site, I'm getting a certificate error, so it's likely that Teams is blocking your site for that reason. Are you able to get that resolved (custom domain, or cert matching domain (the cert is for *.netlify.com, but your site is running on netlify.app)? Try that first.

Firefox addon requires additional refresh to work

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);

browser.runtime.sendMessage API send large data slowly on Firefox extension

I use browser.runtime.sendMessage API of firefox extension (firefox 54- 64 bit) send message has large binary data from contentscript to background.
Send message very slowly and make firefox is not responding in 3-5s depending on the data size that contentscript send. Then it works normally and background receive message.
On chrome sendMessage API work quickly and very very smooth.
How can I fix it in firefox?
browser.runtime.sendMessage(tab.id, { name: "sendScreen", data: { screen: screen} })
screen value in object is binary data (array with length ~ 1135609).
In background.js I add listener message:
browser.runtime.onMessage.addListener (message, sender, sendResponse);
Manifest file:
{
"name": "abc",
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "icons/icon_19.png",
"default_popup": "login.html",
},
"content_scripts": [
{
"web_accessible_resources": [
"js/contentscripts/Browser.js",
],
"js": [
"js/contentscripts/ContentScript.js"
],
"matches": [
"file://*/*",
"http://*/*",
"https://*/*"
],
"run_at": "document_end",
"all_frames": true
},
{
"js": [
"js/contentscripts/Browser.js",
],
"matches": [
"file://*/*",
"http://*/*",
"https://*/*"
],
"run_at": "document_start",
"all_frames": true
}
],
"icons": {
"16": "icons/icon_16.png",
"19": "icons/icon_19.png"
},
"incognito": "spanning",
"permissions": [
"activeTab",
"tabs",
"http://*/*",
"https://*/*",
"<all_urls>"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
If the bug 1356546 mentioned didn't resolve the issue then file a new firefox bug.
Otherwise you can try to split your data up as was mentioned in comments, that wouldn't reduce the overall time, but it might reduce the affect on UX, or just don't support Firefox until they fix their webextensions bugs.

Firefox extension not showing icons

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"
}

Resources