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

我目前正在使用Firefox插件，该插件使用Permissions API根据需要根据<select>的值动态请求特定来源的权限，因为用户更改了该值，而没有单独的提交按钮。当我调用browser.permissions.request时，promise将立即被拒绝，并显示以下错误:



相关的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);
                });
        })
})();

最佳答案

几天前，当我在我的代码库中重新发现此bug时，以某种方式偶然发现了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);
        });
})();

关于javascript - 从Firefox中的<select> onchange处理程序使用Permissions API请求权限，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49894618/