-1

我正在编写我的第一个 Chrome 扩展程序，但在设置和使用“选项”时遇到了障碍。我使用 Google 的文档来学习如何设置选项页面，并选择将其设置为我在扩展程序中的默认弹出窗口。

这是我的清单供参考：

{
    "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"]
    }
}

我的content.js页面包含以下内容：

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

它加载我的脚本文件（script.js）。在script.js内部有两种方法

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

选项.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"));
    }
});

当我尝试重新加载设置并将它们应用到我的内容脚本时，问题就出现了。具体来说，我无法在任何地方找到如何做到这一点。

4

1 回答 1

0

解决了

起初我认为这是一个消息问题，但事实并非如此。通过将以下内容添加到content.js，我能够检查我的设置的存储并从那里执行代码。

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);
});

然后，通过将foo()and分成两个脚本，我可以通过添加等来使content.jsbar()中的脚本注入具有选择性。if(fooOn){-inject foo()-}

对于其他面临类似问题的人

您可以使用内容脚本中storage.sync的API 调用访问保存到的选项。chrome.storage.sync.get()

var yourSetting;
chrome.storage.sync.get("yourSetting", function(result) {
    yourSetting = result.yourSetting;
});
于 2017-01-03T18:21:12.340 回答