I want open/show my panel widget by click on my context-menu item to send some data from the dom position click to my panel.
I'm open for lot of solutions !
I don't know if this works but try it out, its sdk style
var panels = require("sdk/panel");
var self = require("sdk/self");
var panel = panels.Panel({
contentURL: self.data.url("panel.html")
});
var cm = require("sdk/context-menu");
cm.Item({
label: "Edit Image",
context: cm.SelectorContext("img"),
contentScript: 'self.on("click", function () {' +
' self.postMessage(null);' +
'});',
onMessage: function (msg) {
panel.show({
//position: button //set position to some anchor
});
}
});
Related
When I click the button,
the kendo popup pops up, and I want to know the option to move the popup in the browser.
draggable: {
containment: "#editor-form"
},
The draggable option does not move it.
$("#add").on("click", function(){
var start = new Date();
start.setSeconds(0);
start.setMinutes(start.getMinutes()+5);
var end = new Date ( start );
start.setSeconds(0);
end.setMinutes(start.getMinutes() + 30 );
var event = {
scheduleId: 0,
title: "",
start: start,
end: end
} ;
editEvent( event );
});
function editEvent( event ){
currentEvent = new kendo.data.ObservableObject(event);
kendo.bind(editor, currentEvent); //Bind the editor container (uses MVVM)
editor.data("kendoDialog").open();
}
:
:
In such case I would rather use Window Kendo widget that is draggable by default - https://demos.telerik.com/kendo-ui/window/index.
I created a small little HelloWorld extension and was able to get it to work in Firefox 31 (which TorBrowser is based on). However I'm unable to get it to work in TorBrowser. Any idea why that might be and how I can fix? This is my main.js
var contextMenu = require("sdk/context-menu");
var menuItem = contextMenu.Item({
label: "Log Selection",
context: contextMenu.SelectionContext(),
contentScript: 'self.on("click", function () {' +
' var text = window.getSelection().toString();' +
' self.postMessage(text);' +
'});',
onMessage: function (selectionText) {
console.log(selectionText);
}
});
The context menu item shows up in FF but not TB.
Had to add "permissions": {"private-browsing": true} to the package.json
https://tor.stackexchange.com/questions/6293/sidebar-for-custom-addon-broken-in-tbb
I wanted to create a firefox add-on, which will display a form to user.
I am started with SDK isntallaion and documentation. I am able to create a toggle button which will open a panel to user.
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require('sdk/panel');
var self = require('sdk/self');
var button = ToggleButton({
id: 'btn-sc',
label: 'Test Addon',
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleChange
});
var panel = panels.Panel({
contentURL : self.data.url("./panel.html"),
onHide : handleHide
});
function handleChange(state){
if(state.checked){
panel.show({
position: button
});
}
}
function handleHide(){
button.state('window', {checked:false});
}
How do I add more buttons and textbox to this panel?
Create them with HTML in panel.html. If you don't have a panel.html file yet, place it in the data folder. Style with CSS, listen for clicks with JS. It's just a normal webpage.
Helo, i try to develop a (my first) firefox add-on. It should show a panel at several defined url with some content. This works if i click on widget-symbol fine. Now i want, that the panel is displayed if the user loads the page.
panel.show(); displays the panel centered. I would like to map/anchor the panel to the widget, so that the panel ist displayed in the rigth bottom corner.
The solutions https://gist.github.com/azu/4413137 and Mozilla "Jetpack" Add-On: Anchor Panel to Widget did'nt work for me. (SDK 1.13.2 with Add-On Builder)
My code:
thePanel = panel.Panel({
width: 320,
height: 170,
contentScriptFile: [self.data.url('jquery.js'), self.data.url('panel.js')],
contentScriptWhen: "ready",
contentScript: "SOMESCRIPT",
contentURL: self.data.url('thecontent.html'),
onMessage: function (item) {
console.log('message : "' + item + '"');
tabs.open(item);
}
});
var widget = widgets.Widget({
id: "my-id",
label: ".de",
panel: thePanel,
contentURL: self.data.url("favicon.ico"),
onClick: function() {
/*blabla*/
}
});
tabs.on('ready', function(tab) {
check_content(); // loads thecontent.html for panel content
thePanel.show(); // Shows panel at center
});
Someone can help me?
thePanel = panel.Panel({
width: 320,
height: 170,
contentScriptFile: [self.data.url('jquery.js'), self.data.url('panel.js')],
contentScriptWhen: "ready",
contentScript: "SOMESCRIPT",
contentURL: self.data.url('thecontent.html'),
onMessage: function (item) {
console.log('message : "' + item + '"');
tabs.open(item);
}
});
var widget = widgets.Widget({
id: "my-id",
label: ".de",
//panel: thePanel,
contentURL: self.data.url("favicon.ico"),
onClick: function(view) {
/*This will work*/
view.panel = thePanel;
/*This will work*/
}
});
Instead of using panel.show(), use view.panel = thePanel;
I am designing a firefox extension, and I want to add a button near the address bar. And then I need to attach a bookmarklet to that button.
Someone can tell me what APIs do I have to use to create that button and to add the bookmarklet ?
Here's an example that uses Erik Vold's toolbarbutton library to add a button near the addressbar:
const data = require("self").data;
const tabs = require("tabs");
exports.main = function(options) {
var btn = require("toolbarbutton").ToolbarButton({
id: 'my-toolbar-button',
label: 'Add skull!',
image: data.url('skull-16.png'),
onCommand: function() {
if (typeof(tabs.activeTab._worker) == 'undefined') {
let worker = tabs.activeTab.attach({
contentScript: 'self.port.on("sayhello", function() { alert("Hello world!"); })'
});
tabs.activeTab._worker = worker;
}
tabs.activeTab._worker.port.emit("sayhello");
}
});
if (options.loadReason === "install") {
btn.moveTo({
toolbarID: "nav-bar",
forceMove: false // only move from palette
});
}
};
You can also see this as a runnable example on the Add-on Builder site:
https://builder.addons.mozilla.org/addon/1044724/latest/