Find URL of current tab. Making a FireFox Browser add-on - firefox

I'm making a Firefox Browser Add-on and need to find the url of the current tab
I've tried this post Opening a URL in current tab/window from a Firefox Extension but it tells me that 'window' is not defined. (I think because I am making an add-on rather than an extension.)
Here's what I've tried to do:
var widgets = require('widget');
var tabs = require('tabs');
var widget1 = widgets.Widget({
id: "widget1",
label: "widget1",
contentURL: "http://www.mozilla.org/favicon",
onClick: function() {
console.log(tabs.url);
}
})
I've made a widget such that when I click it the url of the current tab should be 'console.log'ed.
Doesn't seem to happen! Keep getting "info: undefined" which clearly means that tabs.url isn't returning anything. But this seems to be the way to use it according to https://addons.mozilla.org/en-US/developers/docs/sdk/1.5/packages/addon-kit/docs/tabs.html
Anyone have any ideas?
Thanks,
Will

You're almost there:
const { ActionButton } = require("sdk/ui/button/action");
const clipboard = require("sdk/clipboard");
const tabs = require('sdk/tabs');
let button = ActionButton({
id: "my-button-id",
label: "Button Label",
icon: {
"32": "chrome://mozapps/skin/extensions/extensionGeneric.png"
},
onClick: function(state) {
let url = tabs.activeTab.url;
console.log("active tab url:", url);
require("sdk/notifications").notify({
title: "Active Tab's Url is "+url,
text: "Click to copy.",
onClick: function() {
clipboard.set(url);
}
});
}
});
You should check out the documentation on the tabs module.
Note: I've updated this code example to use the new ui modules available since Firefox 29 - the 'widget' module used in the original question was valid at the time but has since been deprecated and then removed.

Related

Display AboutDialog from GNOME Shell Extension

I'm trying to display a Gtk.AboutDialog from my GNOME Shell extension. I wrote the following function:
_showAbout: function() {
var authors = ["Ralf"];
// Create the About dialog
let aboutDialog = new Gtk.AboutDialog({ title: "About AboutDialogTest",
program_name: "MyExtension Version " + MySelf.metadata.version,
copyright: "AboutDialogTest \xa9 2018",
authors: authors,
website: "https://...",
website_label: "MyExtension Homepage",
comments: "GNOME Shell extension to test AboutDialog"
});
// Connect the Close button to the destroy signal for the dialog
aboutDialog.connect("response", function() {
aboutDialog.destroy();
});
aboutDialog.show();
}
Well, the about dialog is displayed, but not correctly. I can get the dialog to the front by clicking, but clicking on [x] doesn't close the dialog. The dialog can be closed by hitting ESC.
In syslog I see the following messages:
org.gnome.Shell.desktop[4033]: Gtk-Message: GtkDialog mapped without a transient parent. This is discouraged.
org.gnome.Shell.desktop[4033]: Window manager warning: Buggy client sent a _NET_ACTIVE_WINDOW message with a timestamp of 0 for 0xe0022c (About Abou)
I'm in a extension, so I have no "transient parent". At least I don't know how to get one.
Any idea what I have to do to display it properly?
Ok, I'll answer my own question.
From my understanding it is not possible to use a GTK dialog in a GNOME Shell extension. If a "About Dialog" is needed, roll your own using modaldialog.js.
This is not as cool as the GTK stuff, but at least something.
const St = imports.gi.St;
const Lang = imports.lang;
const Gio = imports.gi.Gio;
const ModalDialog = imports.ui.modalDialog;
const Clutter = imports.gi.Clutter;
const ExtensionUtils = imports.misc.extensionUtils;
const MySelf = ExtensionUtils.getCurrentExtension();
const MyAboutDialog = new Lang.Class({
Name: 'MyAboutDialog',
Extends: ModalDialog.ModalDialog,
_init: function() {
this.parent({ styleClass: 'extension-dialog' });
this.setButtons([{ label: "OK",
action: Lang.bind(this, this._onClose),
key: Clutter.Escape
}]);
let box = new St.BoxLayout({ vertical: true});
this.contentLayout.add(box);
let gicon = new Gio.FileIcon({ file: Gio.file_new_for_path(MySelf.path + "/icons/icon.png") });
let icon = new St.Icon({ gicon: gicon });
box.add(icon);
box.add(new St.Label({ text: "AboutDialogTest Version " + MySelf.metadata.version, x_align: Clutter.ActorAlign.CENTER, style_class: "title-label" }));
box.add(new St.Label({ text: "GNOME Shell extension to display an About Dialog.", x_align: Clutter.ActorAlign.CENTER }));
box.add(new St.Label({ text: "This program comes with absolutely no warranty.", x_align: Clutter.ActorAlign.CENTER, style_class: "warn-label" }));
box.add(new St.Label({ text: "Copyright © 2017-2018 BlahBlahBlah", x_align: Clutter.ActorAlign.CENTER, style_class: "copyright-label" }));
},
_onClose: function(button, event) {
this.close(global.get_current_time());
},
});
And call it like this:
_showAbout2: function() {
let dialog = new MyAboutDialog();
dialog.open(global.get_current_time());
},

Getting html of current page

I'm creating a Firefox addon using jetpack (jpm with node.js) to extend the Firefox developer tools to allow editing the current page's html. (I know this feature already exists; just trying to learn the ropes).
What API do I use to access the current page's HTML? I see that there is a Debugger.Source but I'm not sure if this is correct. If so, how do I retrieve this data?
As the first answer suggests, you can get at the html source using a content script injected the page. For example, here's a very simple approach that uses the tabs module to attach a content script into the current page:
const self = require('sdk/self');
const tabs = require('sdk/tabs');
let { ActionButton } = require("sdk/ui/button/action");
let button = ActionButton({
id: "my-button-id",
label: "Get HTML Source",
icon: {
"16": "chrome://mozapps/skin/extensions/extensionGeneric.png",
"32": "chrome://mozapps/skin/extensions/extensionGeneric.png"
},
onClick: (state) => {
let worker = tabs.activeTab.attach({
contentScript: 'self.port.emit("htmlSrc", {head: document.head.outerHTML, body: document.body.outerHTML});'
});
worker.port.on('htmlSrc', (result) => {
worker.destroy(); // clean up
let src = "<html>\n"+ result.head + "\n" + result.body + "\n</html>";
require('sdk/clipboard').set(src, 'text');
});
}
});
Direct access via SDK is impossible, but you can use content scripts to read and modify the page.

How to create a toolbar on firefox?

I need to create two toolbar on Firefox : one is horizontal on top and the other vertical on right side of the browser. But the sdk lib to firefox dont have resources to do it. Any sugestion ?
This might help, pretty simple guide laid out for easy reading:
http://www.borngeek.com/firefox/toolbar-tutorial/
Since version 1.15 the Addon SDK allows you to create toolbars and add buttons to it. I don't think it's possible to create a vertical toolbar, only horizontal ones.
There's a nice example on how to do it in the Addon SDK official repository:
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const { Toolbar } = require("sdk/ui/toolbar");
const { Frame } = require("sdk/ui/frame");
const { Button } = require("sdk/ui/button");
let button = new Button({
id: "button",
label: "send!",
icon: "./favicon.ico",
onClick: () => {
frame.postMessage({
hello: "content"
});
}
});
let frame = new Frame({
url: "./index.html",
onAttach: () => {
console.log("frame was attached");
},
onReady: () => {
console.log("frame document was loaded");
},
onLoad: () => {
console.log("frame load complete");
},
onMessage: (event) => {
console.log("got message from frame content", event);
if (event.data === "ping!")
event.source.postMessage("pong!", event.source.origin);
}
});
let toolbar = new Toolbar({
items: [frame],
title: "Addon Demo",
hidden: false,
onShow: () => {
console.log("toolbar was shown");
},
onHide: () => {
console.log("toolbar was hidden");
}
});
Also, there's an older SO thread explaining how to do it on older versions of the Addon SDK and for XUL-based addons.
The code above only works on Firefox Australis (upcomming version 29.0). You can use a Jetpack module like toolbarwidget-jplib by Rob--W.
So you can add widgets on the navigation bar:
require("toolbarwidget").ToolbarWidget({
toolbarID: "nav-bar", // <-- Place widget on Navigation bar
id: "mozilla-icon",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico"
});

How to remove an event listener?

I use the Mozilla's Add-on Builder. I am looking for a way to remove an event listener in a contentScript. I use the port way to communicate between add-on script code and the content script code.
The problem is the callback on event "response" is called more than once. I want it to be called once and declared in the callback of the event show.
Can someone help me with that?
main.js code:
var Panel = require("panel").Panel;
var popup_panel = Panel({
width: 286,
height: 340,
contentURL: require("self").data.url("popup.html"),
allow: { script: true },
contentScriptWhen: "end",
contentScriptFile : [
require("self").data.url("test.js")
],
onShow: function(){
this.port.emit("show");
var pan = this;
this.port.on("hide", function(){pan.hide();});
}
});
var Widget = require("widget").Widget;
var widget = Widget({
id: "mozilla-icon",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: popup_panel
});
popup_panel.port.on("get", function(){
popup_panel.port.emit("response");
});
Content script (test.js):
self.port.on("show", function(){
console.log("show");
function response(){
console.log("reponse called");
}
self.port.emit("get");
self.port.once("response", response);
self.port.removeListener("response", response);
});
full source code
Finally I found the problem. It is a bug in the add-on kit. In the file api-utils/lib/content/content-worker.js in the function removeListener the index is always -1.
The parameter given in the indexOf is the name of the event and it search a function. It is incorrect.
So to solve the problem I replace the line let index = listeners[name].indexOf(name); by let index = listeners[name].indexOf(callback);.
EDIT
The bug has been fixed. It will publish in the version 1.10 see here

"sessionstore-state-read" observer not working

Im currently making a firefox extension that will let you choose what tabs you want to reopen after startup, instead of opening everything (it opens about:sessionrestore page). My JS code looks like this:
Edit: code updated with working version
chrome.manifest
component {xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx} components/myextension.js
contract #example.com/MyExtension;1 {xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}
category profile-after-change MyExtension #example.com/MyExtension;1
components/myextension.js
Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
const CI = Components.interfaces, CC = Components.classes, CR = Components.results;
// class declaration
function MyExtension () {}
MyExtension.prototype = {
classDescription: "My Firefox Extension",
classID: Components.ID("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"),
contractID: "#example.com/MyExtension;1",
QueryInterface: XPCOMUtils.generateQI([CI.nsIObserver]),
// add to category manager
_xpcom_categories: [{
category: "profile-after-change"
}],
observe: function(aSubject, aTopic, aData)
{
var obs = CC["#mozilla.org/observer-service;1"].getService(CI.nsIObserverService);
switch (aTopic)
{
case "profile-after-change":
obs.addObserver(this, "sessionstore-state-read", false);
break;
case "sessionstore-state-read":
aSubject.QueryInterface(CI.nsISupportsString);
let newData = { windows: [{ tabs: [{ entries: [{
url: "about:sessionrestore",
formdata: { "#sessionData": aSubject.data }
}] }] }] };
aSubject.data = JSON.stringify(newData);
break;
default:
throw Components.Exception("Unknown topic: " + aTopic);
}
}
};
if (XPCOMUtils.generateNSGetFactory)
var NSGetFactory = XPCOMUtils.generateNSGetFactory([EmbarrassedObserver]);
else
var NSGetModule = XPCOMUtils.generateNSGetModule([EmbarrassedObserver]);
It works fine with sessionstore-state-write (commented lines), but i want to do it with the sessionstore-state-read event, cuz i dont want to edit what it writes to the disk. The problem is, when i change to the read event, my observer stops working. My guess is i register the observer too late (after the session is read), so i tried to register it as soon as possible (when the extension is first loaded, insted of window load event), but it still wont work. Any idea how to get it working?
You need to write your extension as an XPCOM component that listens to the profile-after-change notification (the first notification that extensions are allowed to listen to). Then your component will be able to listen to the sessionstore-state-read notification.

Resources