I have created an extension successfully and I am using an alert in extension.js to show the final message to the user when he clicks on the context menu but I want a customized popup window dialog box created using js and html instead of javascript alert.
Please help how can I do that. My extension works for the links on the webpages . when right button is clicked it shows the context menu and when clicked it throws the alert but I want to show a nice popup for the message.
The key is understanding the scopes in which your code is running. The context menu runs in the background scope and does not have direct access to the DOM of the active page. Hence, to implement a solution you must pass information from the background scope to the extension's page scope, and in that scope create the custom popup OR use Crossrider's notification plugin.
The following example demonstrates the implementation using the notification plugin:
extension.js:
appAPI.ready(function($) {
// Handler to receive messages
appAPI.message.addListener(function(msg) {
if (msg.type === 'show-notification')
showNotification(msg.notification);
});
function showNotification(data) {
// You can replace the notifier with your own custom code
appAPI.notifier.show({
'name':'my-notification-name',
'title':data.title,
'body':data.body,
'link':'http://example.com',
'theme':'default',
'position':'top-right',
'close':true,
'sticky':false,
'width':'400px',
'closeWhenClicked':true
});
}
});
Important: Do not forget to add the notification plugin to the extension.
background.js:
appAPI.ready(function($) {
appAPI.contextMenu.add(
"CustomMI",
"Custom menu item",
function (data) {
// Send message to active tab when context menu item selected
appAPI.message.toActiveTab({
type: 'show-notification',
notification: {
title: 'Context Menu Item',
body: '<b>Veiwing page</b>: '+data.pageUrl
}
});
}, ["all"]
);
});
[Disclosure: I am a Crossrider employee]
