使用 Permissions API 从 Firefox 中的 <select> onchange 处理程序请求权限

Question

我目前正在开发一个 Firefox 插件，它利用权限 API 根据需要根据 <select> 的值动态请求特定来源的权限，因为用户更改了值，而没有单独的提交按钮。当我调用browser.permissions.request 时，承诺立即被拒绝并出现错误：

permissions.request 只能从用户输入处理程序中调用

相关的 HTML 和 JS 代码如下。我想避免使用单独的保存按钮，但我不知道如何实现。有没有可能，如果有，怎么做？

<div id="domain-settings">
    Choose your preferred domain:
    <select>
        <option>example.com</option>
        <option>one.example.com</option>
        <option>other.example.com</option>
    </select>
</form>

const settings = { domain: 'example.com' };
const $select = $('#domain-settings').find('select');
$select.on('change',function(e){
    e.stopPropagation();
    const oldValue = settings.domain;
    const perm = { origins: [ `https://${$select.val()}/` ] };
    browser.permissions.contains(perm)
        .then(result => {
            if (result)
                someFunction();
            else browser.permissions.request(perm)
                .then(granted => {
                    if (granted)
                        someFunction();
                    else $select.val(oldValue);
                });
        })
})();

Answer 1

几天前，当我在我的代码库中重新发现这个错误时，我不知何故偶然发现了this question，甚至不记得我在这里发布过它。这个问题的答案几乎相同，但就我而言，问题在于我在尝试请求之前检查了许可，事实证明，这是完全没有必要的。

同样的解释也适用于这里。 Firefox 没有将处理程序识别为来自用户输入，因为它被链接在一个 Promise 调用中，这会破坏它可以用来验证这一点的调用堆栈。如果 permissions.request 调用被链接在任何 Promise 之后，它将不会通过此验证。

我的解决方案：删除 permissions.contains 支票。现在一切正常。

const settings = { domain: 'example.com' };
const $select = $('#domain-settings').find('select');
$select.on('change',function(e){
    e.stopPropagation();
    const oldValue = settings.domain;
    const perm = { origins: [ `https://${$select.val()}/` ] };
    browser.permissions.request(perm)
        .then(granted => {
            if (granted)
                someFunction();
            else $select.val(oldValue);
        });
})();