firefox extension works through sdk but not when installed in browser - compatibility issue?

Question

---Update----

After experimenting more with this, I've determined that the contentScript I have written is not the problem here. For example, if I reduce the extension to merely:

var buttons = require('sdk/ui/button/action');
var data = require("sdk/self").data;
var self = require("sdk/self");


var button = buttons.ActionButton({
id: "library-link",
label: "External Resource Locator",
icon: self.data.url("icon-16.png"),
  });

The button will still appear when I run the extension through the SDK, but will not appear when I install the xpi in a current firefox browser (version 38, on some platforms). This problem seems to be occurring at a very basic level in their design process.

---

I am trying to write a simple extension for firefox which appends a form to the current page and posts data to another site. It can be called by an action button or through a context menu item.

I have been developing with the add-on sdk and it is working perfectly when I use cfx run to test it. However, after doing cfx xpi and installing the extension into my firefox browser, it does not work at all. The action button and context menu item do not appear, and although the extension shows up under add-ons -> extensions as installed and enabled, none of the images packaged with the xpi will display.

I am not sure what could be causing this, and my code is fairly brief, so I will add my entire main.js:

var buttons = require('sdk/ui/button/action');
var data = require("sdk/self").data;
var contextMenu = require("sdk/context-menu");
var self = require("sdk/self");

var menuItem = contextMenu.Item({
                            label: "Look for selected text in the Library of Babel",
                            context: contextMenu.SelectionContext(),
                             contentScript: 'self.on("click", function () {' +
                            'var text = window.getSelection().toString();' +
                            'var formext = document.createElement("form");' +
                            'formext.setAttribute("method", "POST");' +
                            'formext.setAttribute("action", "https://libraryofbabel.info/resourcelocator.cgi");' +
                            'var hiddenField = document.createElement("input");' +
                            ' hiddenField.setAttribute("type", "hidden");' +
                             'hiddenField.setAttribute("name", "extension");' +
                            ' hiddenField.setAttribute("value", window.getSelection().toString());' +
                            ' formext.appendChild(hiddenField);' +
                            ' document.body.appendChild(formext);' +
                            ' formext.submit();' +
                            '});',
                            image: self.data.url("icon-16.png")
                            });

var button = buttons.ActionButton({
id: "library-link",
label: "External Resource Locator",

icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: function() {
 require("sdk/tabs").activeTab.attach({
                              contentScriptFile: data.url("form.js")
                               });
                              }
                              });

I've noticed that when I run cfx xpi the automatically generated install.rdf file says the maximum version for compatibility is 30.0. However, I have also found that on some computers running versions of firefox up to and including 38 it will work perfectly. Is there anything in this code which would prevent compatibility with newer versions of firefox? I will add the ContentScriptFile in case that may be responsible:

function getSelectedText() {
var text = "";
if (window.getSelection) {
    text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
    text = document.selection.createRange().text;
}
return text;
}

var bodytext = document.getElementsByTagName("BODY")[0];
var formext = document.createElement("form");
formext.setAttribute("method", "POST");
formext.setAttribute("action", "https://libraryofbabel.info/resourcelocator.cgi");
//formext.setAttribute("target","_blank");

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "extension");
hiddenField.setAttribute("value", getSelectedText() || document.body.innerHTML); // take selected text OR bodytext

formext.appendChild(hiddenField);
document.body.appendChild(formext);
formext.submit();

Answer 1

1. Open context menu on the toolbar where your icon would be, select Customize.... In the opened window, can you see your icon in "Additional tools and features"? If yes, then it means firefox remembered the icon's absence while you were developing the addon. You can put the icon to the toolbar manually. I believe regular users will not face this problem.
2. Change your em:maxVersion manually in install.rdf

3. Configure your firefox as described in Setting up an extension development environment, namely, at least these:

   • javascript.options.showInConsole = true to have addon errors shown in F12 console
   • javascript.options.strict = true to have even more warnings in the console
   • extensions.logging.enabled = true to have installation/update problems in the console.

   After that, restart firefox and see if you can get anything useful from console. Disable other addons to remove the noise.

4. Try to backup and remove the entire firefox's profile folder, to have firefox 100% clean. Does it help? If yes, that narrow the problem to something in profile.
5. Try to change all identifiers of your addon (including addon name, ID, description, button id and description, etc), thus making a new duplicate addon. Does that help? If yes, that most likely means firefox has remembered some settings for your addon while you played with it.