Applying options to other scripts in Chrome extension

Question

I'm writing my first Chrome extension and have hit a brick wall when it comes to setting and using "options." I've used Google's documentation to learn how to set up an options page and have opted to set it as my default popup in the extension.

Here's my manifest for reference:

{
    "manifest_version": 2,

    "name": "MyExtension",
    "description": "MyDescription",
    "version": "0.0",
    "options_page": "options.html",
    "browser_action": {
        "default_icon": "on.png",
        "default_popup": "options.html",
        "default_title": "Manage Tools!"
    },

    "permissions": [
    "storage",
    "tabs",
    "activeTab",
    "https://ajax.googleapis.com/"
],

    "content_scripts": [{
        "matches": ["specialURL.com*"],
        "js": ["jquery-3.1.1.min.js", "content.js"]
}],

    "web_accessible_resources": [
    "script.js"
],
    "background": {
        "scripts": ["background.js"]
    }
}

My content.js page contains the following:

  var s = document.createElement('script');
  s.src = chrome.extension.getURL('script.js');
  s.onload = function() {
        this.remove();
  };
  (document.head || document.documentElement).appendChild(s);

which loads my script file (script.js). Inside of script.js there are two methods

function foo() { -code- }
function bar() { -code- }

options.js:

function save_options() {
    var alltoggle = document.getElementById('alltoggle').checked;
    var footoggle = document.getElementById('footoggle').checked;
    var bartoggle = document.getElementById('bartoggle').checked;
    chrome.storage.sync.set({
        allsetting: alltoggle,
        foosetting: footoggle,
        barsetting: bartoggle
    }, function () {
        // Update status to let user know options were saved.
        var status = document.getElementById('status');
        status.textContent = 'Options saved.';
        setTimeout(function () {
            status.textContent = '';
        }, 750);
    });
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
    // Default to true
    chrome.storage.sync.get({
        allsetting: true,
        foosetting: true,
        barsetting: true
    }, function (items) {
        document.getElementById('alltoggle').checked = items.allsetting;
        document.getElementById('footoggle').checked = items.foosetting;
        document.getElementById('bartoggle').checked = items.barsetting;
    });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);
document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('#alltoggle').addEventListener('change', allHandler);

    // Turn on/off all features 
    function allHandler() {
        $("input:checkbox").prop('checked', $(this).prop("checked"));
    }
});

The problem comes in when I try to load settings back and apply them to my content scripts. Specifically, I can't find how to do that anywhere.

Answer 1

Solved

At first I thought this was a messages issue, but it wasn't. By adding the following to content.js I was able to check storage for my settings and execute code from there.

var fooON;
chrome.storage.sync.get("foosetting", function(result) {
    fooON = result.foosetting;
    //confirm
    console.log(result.foosetting);
});
var barON;
chrome.storage.sync.get("barsetting", function(result) {
    barON = result.barsetting;
    //confirm
    console.log(result.barsetting);
});

Then, by separating foo() and bar() into two scripts I could make the script injection in content.js selective by adding if(fooOn){-inject foo()-} etc.

For others facing similar issues

You can access options saved to storage.sync by using the chrome.storage.sync.get() API call in your content scripts.

var yourSetting;
chrome.storage.sync.get("yourSetting", function(result) {
    yourSetting = result.yourSetting;
});