访问Chrome扩展程序中background.js中的用户选项

Question

I'm trying to access chrome.storage.sync where I store some user options in my background.js but the asynchronous nature of chrome.storage.sync.get is causing me issues. 我正在尝试访问chrome.storage.sync，我在background.js中存储了一些用户选项，但chrome.storage.sync.get的异步性质导致了我的问题。

If I try and use chrome.storage.sync.get within my chrome.webRequest.onBeforeRequest.addListener the callback isn't quick enough for the function to use it. 如果我尝试在chrome.webRequest.onBeforeRequest.addListener中使用chrome.storage.sync.get，则回调速度不足以让函数使用它。

I have tried adding the user options as a global variable within background.js but it appears to me that that value doesn't persist. 我已经尝试将用户选项添加为background.js中的全局变量，但在我看来，该值不会持久存在。

Anyone else using user options in background.js? 还有其他人在background.js中使用用户选项吗？

 function getoption(){ chrome.storage.sync.get({ radarpref: 'nothing', }, function(items) { console.log(items.radarpref); return items.radarpref; }); } var hold = getoption(); console.log (hold) //this returns hold value chrome.webRequest.onBeforeRequest.addListener( function(info) { //this doesn't work - yet console.log('i dont see the hold'); console.log(hold) //hold not returned when callback ran ...

Answer 1

If you need to synchronously use settings from any async storage - the best way to do it is to cache it. 如果您需要同步使用任何异步存储中的设置 - 最好的方法是缓存它。

You need to load the settings to the cache on background.js start and then you need to update cache each time chrome.storage.onChanged event triggered. 您需要在background.js start上将设置加载到缓存，然后每次触发chrome.storage.onChanged事件时都需要更新缓存。

Example how to do it: 示例如何做到：

manifest.js manifest.js

{
    "manifest_version": 2,
    "name": "Settings Online demo",
    "description": "Settings Online demo",    
    "applications": {
        "gecko": {
            "id": "852a5a44289192c3cd3d71e06fdcdb43b1437971@j2me.ws"
        }
    },
    "version": "0.0.1",
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "storage",
        "webRequest",
        "webRequestBlocking",
        "<all_urls>"
    ],
    "options_ui": {
        "page":"properties.html",
        "chrome_style": true
    }
}

Note that you need to have non-temporary application id if you need to work it on firefox, <all_urls> permission is needed to get access to any url request processing. 请注意，如果需要在firefox上使用它，则需要具有非临时应用程序ID，需要<all_urls>权限才能访问任何URL请求处理。

background.js background.js

((storage) => {
    let settings = (function(properties) {

        // Save settings
        this.set = (properties,ok) => {
            for(key in properties || {}){
                this[key]=properties[key];
            }
            storage.set(
                properties
            ,() => {
                ok(settings);
            });
        };

        //Default values processing
        for(key in properties || {}){
            this[key]=properties[key];
        }

        // Initial settings read
        storage.get(properties,(properties) => {
            for(key in properties){
                this[key]=properties[key];
            }
        });


        // Listen settings change and cache it
        chrome.storage.onChanged.addListener((msg) => {
            for(key in msg){
                this[key]=msg[key].newValue;
            }
        });

        return this;
    }).call({},{"property":"default","name":"me"})

    chrome.webRequest.onBeforeRequest.addListener(
      function(info) {
       // Update and persist settings
       settings.set({"lastRequest":info},()=>{console.log("Settings saved")});
       console.log('Catch', settings.name,settings.property);
    },{urls:["https://*/*"]});
})(chrome.storage.sync || chrome.storage.local);

Note that I use chrome.storage.sync || chrome.storage.local 请注意，我使用chrome.storage.sync || chrome.storage.local chrome.storage.sync || chrome.storage.local because some browsers (Opera, mobile browsers) do not support sync-storage, but support local storage. chrome.storage.sync || chrome.storage.local因为某些浏览器（Opera，移动浏览器）不支持同步存储，但支持本地存储。

And the property page to see how can property changes are processing: properties.html 以及属性页面，了解属性更改如何处理： properties.html

<html>
    <head>
        <script src="properties.js" type="text/javascript"></script>
    </head>
    <body>
        <label>Property:<input id="property" type="text"></label>
        <input id="save-properties" value="save" type="submit">
    </body>
</html>

properties.js properties.js

((storage) => {
    let saveOptions = () => {
        let property = document.getElementById("property").value;

        storage.set({
            "property": property
        },() => {
            window.close();
        });
    }

    let restoreOptions = () => {
        storage.get({
            "property": "default"
        }, (properties) => {
            document.getElementById("property").value = properties.property;
        });
        document.getElementById("save-properties").addEventListener("click", saveOptions);
    }
    document.addEventListener("DOMContentLoaded", restoreOptions);
})(chrome.storage.sync || chrome.storage.local);

That's all :) 就这样：）

PS> This solution has a weak point: if your app is settings-sensitive and can't work with default settings, or you need to be sure that you're using custom settings on start - you need to delay background.js start while settings are not loaded. PS>这个解决方案有一个弱点：如果您的应用程序设置敏感且无法使用默认设置，或者您需要确保在启动时使用自定义设置 - 您需要延迟background.js启动时设置未加载。 You may to it with callback or with promise: 你可以回调或承诺：

background.js - wait while settings will be loaded with callback background.js - 等待设置将加载回调

((storage) => {
    let settings = (function(properties) {

        // Update settings
        this.set = (properties,ok) => {
            for(key in properties || {}){
                this[key]=properties[key];
            }
            storage.set(
                properties
            ,() => {
                ok(settings);
            });
        };

        //Default values processing
        for(key in properties || {}){
            this[key]=properties[key];
        }

        // Listen settings change and cache it
        chrome.storage.onChanged.addListener((msg) => {
            for(key in msg){
                this[key]=msg[key].newValue;
            }
        });

        // Initial settings read
        storage.get(properties,(properties) => {
            for(key in properties){
                this[key]=properties[key];
            }
            mainLoop();
        });

        return this;
    }).call({},{"property":"default","name":"me"})

    let mainLoop = () => {

        //.. all you settings-sensitive code
        chrome.webRequest.onBeforeRequest.addListener(
          function(info) {
            // Update settings and persist it       
            settings.set({"lastRequest":info},()=>{console.log("Settings saved")});
           console.log('Catch', settings.name,settings.property);
        },{urls:["https://*/*"]});
    };

})(chrome.storage.sync || chrome.storage.local);

background.js - wait while settings will be loaded with promise background.js - 等待设置将加载promise

((storage) => {
    let settings = ((properties) => {

        this.set = (properties) => {
            for(key in properties || {}){
                this[key]=properties[key];
            }
            return new Promise((ok,err) => {
                storage.set(
                    properties
                ,() => {
                    ok(settings);
                });
            });
        };

        return new Promise((ok,err) => {
            //Default values processing
            for(key in properties || {}){
                this[key]=properties[key];
            }

            // Listen settings change and cache it
            chrome.storage.onChanged.addListener((msg) => {
                for(key in msg){
                    this[key]=msg[key].newValue;
                }
            });

            // Initial settings read
            storage.get(properties,(properties) => {
                for(key in properties){
                    this[key]=properties[key];
                }
                ok(this);
            });
        });
    }).call({},{"property":"default","name":"me"}).then((settings) => {
        //.. all you settings-sensitive code

        chrome.webRequest.onBeforeRequest.addListener(
          function(info) {
            // Update settings and persist it       
            settings.set({"lastRequest":info}).then(()=>{console.log("Settings saved")});
            console.log('Catch', settings.name,settings.property);
        },{urls:["https://*/*"]});
    }).catch(()=>{});

})(chrome.storage.sync || chrome.storage.local);

Read more 阅读更多

Storage specs/firefox: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage 存储规格/ firefox： https ： //developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage
Storage spect/chrome: https://developer.chrome.com/apps/storage 存储光谱/镀铬： https ： //developer.chrome.com/apps/storage
Permission requests/firefox: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions 权限请求/ firefox： https ： //developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions

访问Chrome扩展程序中background.js中的用户选项

问题描述

1 个解决方案

解决方案1
2 2018-10-24 13:46:21

访问Chrome扩展程序中background.js中的用户选项

问题描述

1 个解决方案

解决方案1 2 2018-10-24 13:46:21

解决方案1
2 2018-10-24 13:46:21