Question

我正在编写我的第一个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- }

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

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

Answer 1

解决

起初我认为这是一个消息问题，但事实并非如此。通过将以下内容添加到 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()和bar()分成两个脚本，我可以通过添加if(fooOn){-inject foo()-}等来选择性地在 content.js 中注入脚本。

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

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

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

将选项应用于Chrome扩展程序中的其他脚本

1 个答案:

解决

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