New to firefox development and trying my best to figure this out.
Say I want to call a function in tap_browser.js that will modify the DOM when the user clicks on the toolbar widget, how would I do this?
This is the code I have so far
require("toolbarwidget").ToolbarWidget({
toolbarID: "nav-bar", // <-- Place widget on Navigation bar
id: "tap-icon",
label: "Tap",
contentURL: data.url("favicon.png"),
contentScriptFile: [data.url("tap_browser.js")]
});
I'm currently using a library to create the toolbar widget here: https://github.com/Rob--W/toolbarwidget-jplib
I don't know too much SDK but I helped someone with something that does. Check this out:
var my_wid = widgets.Widget({
id: "my-widget",
label: "CLIIIICK",
content: "CLICK ME",
width: 100,
onClick: function()
{
require('sdk/window/utils').getMostRecentBrowserWindow().gBrowser.contentDocument.documentElement.innerHTML = 'hi';
}
});
what this does is it shows a panel with 0 width and height, you can put stuff in there, and when it shows it executes the onShow function to change the html of the current document. its not recommended to use innerHTML, addons arent accepted. Im just showing you a quick and dirty copy paste example. One that is different from the sdk doc page "Modifying the Page Hosted by a Tab"
Related
I'm working on some chrome/firefox extension and what I want to accomplish is as similar UX as possible between these two. I've already understood that while in chrome you can (through manifest.json) register to override chrome://newtab, in firefox it's not such an easy job. What I want to accomplish in firefox is that once user click on browser action button - it opens new tab with my local HTML page. This codes do just that:
var buttons = require('sdk/ui/button/action');
var tabs = require('sdk/tabs');
var wuntils = require('sdk/window/utils');
var handleClick = function (state) {
tabs.open({
"url": "./pages/index.html",
"isPinned": false
});
};
var button = buttons.ActionButton({
id: "mozilla-link",
label: "Visit Mozilla",
icon: {
"16": "./assets/logo.png",
"32": "./assets/logo.png",
"64": "./assets/logo.png"
},
onClick: handleClick
});
Problem with this approach is that once new tab is opened theres resource://.... URL in the address bar. I've noticed that some other extensions managed to remove it and keep address bar empty but if I try to change tab.url property it starts redirection loop...
Any ideas how to make it look like a new tab but keep address bar empty?
Thanks!
I created a basic DevExpress PhoneJS v13.2.5 app using the slideout navigation type. I can switch between views nicely using the slideout menu (URL hash changes). However, the back button doesn't seem to work. I expect that when I hit the back button, I would be taken to the previous view based on the URL hash. However, I am instead taken to the previous page. So, for example, if my history is as follows:
www.google.com
localhost:4633
localhost:4633/#home
localhost:4633/#foo
localhost:4633/#bar
And I hit the back button (doesn't matter if I'm using Chrome, Android, etc), I would expect to be taken back to localhost:4633/#foo. However, I am taken back to www.google.com. Sometimes, before I am taken to the previous page, I briefly see the URL change to localhost:4633/#root.
Has this happened to anyone else? Am I missing something in my app configuration? From everything I've read in the documentation, it should "just work." Here is my app init:
"use strict";
var MyApp = window.MyApp = {};
$(function () {
MyApp.app = new DevExpress.framework.html.HtmlApplication({
namespace: MyApp,
navigationType: "slideout",
navigation: [
{
title: "Home",
action: "#home",
icon: "home"
},
{
title: "Foo",
action: "#foo",
icon: "info"
},
{
title: "Bar",
action: "#bar",
icon: "info"
}
]
});
MyApp.app.router.register(":view", { view: "home" });
MyApp.app.navigate();
});
The Back button is available in each view in a stack except for the root view. If you create a link with MyApp.app.navigate('Foo') in your Home view, click on that link and go to the "Foo" page, then you can back in the Home page by pressing back button. Please see:
Navigation History For further detailed informations.
These are my first steps with the Firefox AddOn SDK. What I'm trying to create is a simple 'settings dialogue'. I thought about a html page containing forms for the values and a submit button. Following the first mozilla tutorials I created a widget:
var widget = require('widget').Widget({
label: 'Settings',
id: 'settings',
//panel: text_entry
contentURL: data.url('images/stgfavicon.ico'),
contentScriptFile: data.url('scripts/submit.js'),
onClick: function() {
tabs.open(data.url('forms/settings.html'));
}
});
But since settings.js is not the contentScriptFile I got no communication between settings.html and settings.js. Is it possible to get this done without some (complex looking) messaging system? And how to save the values best? A JSON file?
Some links/examples/API names would help me a lot. :)
That's because you're trying to attach your script to the widget (which is not an HTML file). You need to attach it to the actual html file after the tab opens.
tabs.open({
url: data.url('forms/settings.html'),
onOpen: function onOpen(tab) {
tab.attach({ contentScriptFile: data.url('scripts/submit.js'); });
}
});
I haven't tested that out so there may be an error.
You should also look at the simple-prefs module if these are settings that aren't going to be adjusted frequently.
I have a Firefox extension which adds a toolbar Widget with a panel which should display when the widget is clicked. Under certain circumstances, the panel should not show when the toolbar widget is clicked.
I am instantiating the toolbar and panel like so:
var popup = panel.Panel({
width: 310,
height: 400,
contentURL: self.data.url('panel.html'),
contentScriptFile: self.data.url('panel.js'),
// NOTE: You can't use the contentStyleFile option here.
});
var toolbarOptions = {
id: 'someid',
label: 'Some Label',
contentURL: self.data.url('icon-16.png'),
panel: popup
};
// There doesn't seem to be a way to remove the toolbar in PB mode.
var toolbar = widgets.Widget(toolbarOptions);
How can I cancel the panel opening from the widget click handler? It seems to always open no matter what logic I put in there.
toolbar.on('click', function() {
if (dontShowPanel()){
// I want to somehow cancel the panel opening at this point.
} else {
panel.show();
}
});
I have tried to return false; from the click hander which doesn't seem to work. I have also tried to call panel.hide(). That doesn't seem to work either.
I'm using version 1.10 of the add-on SDK.
Your click event handler is called before the panel shows up which means that you can still change the panel at this point. However, something that is non-obvious: changing the panel of the Widget object won't have any immediate effect, you need to change it for the WidgetView object (the widget instance in the particular browser window). That object is being passed as a parameter to the click event handler. So your toolbar options could look like this:
var toolbarOptions = {
id: 'someid',
label: 'Some Label',
contentURL: self.data.url('icon-16.png'),
onClick: function(view) {
if (dontShowPanel()){
view.panel = null;
} else {
view.panel = popup;
}
}
};
When you create the widget, you need to add the panel instance as a property:
var panel = require("panel").Panel({
width: 250,
height: 250,
contentURL: data.url('panel.html')
});
require("widget").Widget({
id: 'id',
label: 'my-label',
contentURL: data.url('http://www.mozilla.org/favicon.ico'),
panel: panel
});
Update: sorry I didn't understand the entire question. As far as I know there is no way to conditionally prevent show the panel based on the click event, in a way that will preserve the anchoring.
I'm trying to create a Firefox add-on using the online Add-On SDK.
I'm starting with something simple - I want to add a toolbar button that reads the current selected text.
The documentation for the Selection object makes this looks simple enough:
var selection = require("selection");
if (selection.text)
console.log(selection.text);
This doesn't seem to work for me, I just get null.
Here's my complete code:
var selection = require("selection");
require("widget").Widget({
id: "widgetID1",
label: "Test Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(event) {
console.log('selection.text = ' + selection.text);
}
});
I've also tried to create the selection object inside the onClick even, with the same effect.
I am able to use the select event to get notified on new selections, so I guess I can use that instead (and keep the value), but I wonder why the above code isn't working... What am I doing wrong?
The selection variable as defined will only have the selected text as long as it is in focus. Clicking on the widget icon takes focus away from the selected text, so it sees no text selected.
Thats why it works when used inside the listener function.
To confirm this, I tried logging its value when a toolbar button is pressed (using the toolbarbutton module), and it works. Pressing a toolbar button (presumably) does not steal focus.
Here's the code, and you can test it online too:
var selection = require("selection");
var tbb = require("toolbarbutton").ToolbarButton({
id: "test",
label: "test",
image: "http://www.mozilla.org/favicon.ico",
onCommand: function(event) {
console.log('selection = ' + JSON.stringify(selection)); // works!
}
});
Here is a solution using the select event:
var selection = require("selection");
var selectedText = '';
function selectionChanged(event){
//todo: check for selection.isContiguous
selectedText = selection.text;
}
selection.on('select', selectionChanged);
require("widget").Widget({
id: "widgetID1",
label: "Test Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(event) {
console.log('Selection: ' + selectedText);
}
});