Open popup onInstall, save a key and transfer it to background

Add-ons addons.mozilla.org
#1

I’m trying to port my working Chrome extension to FF, but fail on something - don’t know even on what.

The workflow of Chrome extension is:

  • Just after new installation a popup is opening (background.js + welcome.html + options.html in the iframe + options.js) and user fills an API key into a form. On submit the form input is saving and popup closes.

The content of background.js is

chrome.runtime.onInstalled.addListener(function (object) {
    if (chrome.runtime.OnInstalledReason.INSTALL === object.reason) {
        chrome.tabs.create({url:chrome.extension.getURL("welcome.html")}, function (tab) {
            console.log("New tab launched with instructions to use the extension");
        });
    }
});

The content of options.js is

function save_options() {
  var api = document.getElementById('wptk').value;
    chrome.storage.sync.set({
    savedApi: api,
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Success! API key saved!';
    setTimeout(function() {
      status.textContent = '';
    }, 15000);
  });
}

document.getElementById('save').addEventListener('click', save_options);

function restore_options() {  
    chrome.storage.sync.get({"savedApi": ''}, function(items) {
      document.getElementById('wptk').value = items.savedApi;
    });
}
document.addEventListener('DOMContentLoaded', restore_options);
  • If user loads any page in browser tab and clicks on extension button a new tab is opening with an url like
    https://example.com${encodeURIComponent(tab.url)}&k=${savedApi}

According content of background.js is

chrome.browserAction.onClicked.addListener(tab => {
  if (!tab.url) return;
  chrome.storage.sync.get('savedApi', ({savedApi}) => {
    chrome.tabs.create({
      url: `https://example.com${encodeURIComponent(tab.url)}&k=${savedApi}`,
      index: tab.index + 1,
      openerTabId: tab.id,
    });
  });
});

Related content of manifest.json is

 "background": {"scripts": ["background.js"],"persistent": false},
 "browser_action": {
 "default_icon": "icon-128.png",
 "default_title": "ext"
 },
 "options_page": "options.html",
 "options_ui": {
    "page": "options.html",
    "chrome_style": true,
	"open_in_tab": false
  },
 "name": "ext",
 "icons": {
     "16": "icon-16.png",
     "48": "icon-48.png",
     "128": "icon-128.png" },
 "web_accessible_resources":[
 "welcome.html"
 ],
 "permissions": [
     "tabs",
     "http://*/*",
     "https://*/*",
	 "storage"
 ],

The problem: on installing welcome.html isn’t opening and no url is opening on extension button click. I’m pretty newbie with FF extension - don’t know even how to debug this

#2

First off, I hope you’ll get to enjoy Firefox’s extensions APIs eventually.

Now you’ll probably want to check out https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension first, it barely affects your extension, but it still holds a lot of valuable information for someone coming from Chrome.

For example the “persistent” flag and the “chrome_style” property have no effect in Firefox.

Further, you should not have to make “welcome.html” web_accessible to open it in a tab.

You haven’t mentioned how exactly you’re installing your extension, but I’m assuming you’re using about:debugging (https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox) and it’s not showing any errors about the manifest (it shouldn’t from a quick glance, only warnings for the properties mentioned above and “options_page”).

If the extension is successfully loaded you can debug it with the techniques described on https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Debugging

If it is not properly loaded, check out the Browser Console for any errors.

As a complete side note, your browser action seems to be a page action, since it acts on the currently opened page, but that’s semantics (and many ad blockers and password managers have similar “inconsistencies” that are only partially explainable).