Firefox extension fails on accessing local storage

Question

I have a Chrome extension I'm trying to adapt to FF. When I try to access local storage, the code is failing. There is no JS error in the console. I am new to FF, so the problem is probably basic. Why is execution stopping on var gettingItem = browser.local.storage.get();

Also, when I load my extension in FF, I don't see an options menu like I do in Chrome. How do I open the options pane?

My manifest:

{
    "manifest_version": 2,
    "name": "My name's mod",
    "short_name": "Mod",
    "version": "1.2.0",
    "description": "Make the ",
    "web_accessible_resources": [
        "base-theme.css",
        "light-theme.css",
        "wider-theme.css",
        "nobg-theme.css"
    ],
    "permissions": [
        "storage",
        "cookies",
        "*://forums.site.com/*"
    ],
    "content_scripts": [{
        "js": [
            "cg-mod.js",
            "cg-forum-class.js",
            "cg-forum-writer.js",           
            "cg-onload.js"
        ],
        "matches": ["https://forums.site.com/*", "http://forums.site.com/*" ]
    }],
    "icons": { 
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png" },
    "options_ui": {
        "page": "options.html",
        "chrome_style": true
    }
}

This is the first file being called:

//https://stackoverflow.com/questions/2400935/browser-detection-in-javascript
function IsChrome(){
    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
    return isChrome;
}

function IsFirefox()
{
    var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
    return isFirefox;
}

function GetStorage( callback ){    

    var defaultOptions = {
        Theme: 'wider',
        ShowSignatures: true,
        TheNewlyArrived: false,
        Kickstarter: false,
        Recruitment: false,
        Off: false
    };

    if( IsChrome() )
    {
        chrome.storage.sync.get( defaultOptions, function(items) {
            console.log( "Get Storage for Chrome");
            console.log( items );
            callback( items );
        }); 
    }else if( IsFirefox() ) {
        console.log("is firefox: "+ IsFirefox());
        //browser.storage.sync.get
        var gettingItem = browser.local.storage.get();
        console.log(gettingItem);
        console.log("THE PROBLEM IS HERE ^^");
/*      gettingItem.then((items) => {
            console.log( "Get Storage for Firefox");
            callback( items );
        }); */
    }
}

Then in my onload file, I have this:

/*
Run these commands on startup.
*/

// link the custom CSS as a stylesheet to give it higher priority
function Onload( storage )
{
    console.log( "storage: ");
    console.log( storage );

    // If off is true, they don't want to load the extension...
    if( storage.Off )
        return;

    var link = document.createElement('link');
    if( IsChrome() ){
        link.href = chrome.extension.getURL( 'base-theme.css' );        
    } else if( IsFirefox() ) {
        link.href = browser.extension.getURL( 'base-theme.css' );       
    }
    link.type = 'text/css';
    link.rel = 'stylesheet';
    document.getElementsByTagName("head")[0].appendChild(link);

    var link = document.createElement('link');
    if( IsChrome() ){
        link.href = chrome.extension.getURL( storage.Theme +'-theme.css');
    } else if( IsFirefox() ) {
        link.href = browser.extension.getURL( storage.Theme +'-theme.css');
    }
    link.type = 'text/css';
    link.rel = 'stylesheet';
    document.getElementsByTagName("head")[0].appendChild(link);

    if( ! storage.ShowSignatures )
        ForumWriter.ToggleVisibility( 'Signature' );
}

console.log("get storage pre");
// Call the Google values through a callback
GetStorage( Onload );   
console.log("get storage post"); 

The console reads:

Name says hello! (proves the files are loading in the right oder)
get storage pre  
is firefox: true

Answer 1

The problem comes from this line:

browser.local.storage.get()

You've mixed it up a bit, local is a property of storage, and storage a property of browser.

browser.storage.local.get()

But looking at your chrome implementation, you seem to want to access the sync storage instead...

browser.storage.sync.get()

Also. I'd really like to point out that you are doubling your code base and that should be avoided, to ease future maintenance. I suggest you this snippet of code:

var client;
if( IsChrome() ){
    client= chrome;        
} else if( IsFirefox() ) {
    client = browser;       
}

So then you can replace all the snippets that look like this

if( IsChrome() ){
    link.href = chrome.extension.getURL( 'base-theme.css' );        
} else if( IsFirefox() ) {
    link.href = browser.extension.getURL( 'base-theme.css' );       
}

With

link.href = client.extension.getURL( 'base-theme.css' );