I have a configurable option where one option requires an extra permission (scripting) and I'm trying to prompt the user to add it on selecting the configuration option.The function chrome.permission.request needs to be called during a user gesture. This SO answer shows how to do it in response to a button click, but I'm having trouble adapting it the solution to this specific context.
I've tried launching it directly from the select form on change like so:
<select bind:value={$config.search_handler} onchange={() => { console.log('onchange'); chrome.permissions.request( { permissions: ['scripting'] }, (granted) => { if (granted) { console.log('granted'); } else { console.log('not granted'); } } ); }}><option value={SearchTool.SidePanel}> Search/Manage stacks via sidepanel</option><option class="overlay_select" value={SearchTool.Overlay}> Search/Manage stacks via overlay</option>however, the onchange code never seems to be called ( log statement never appears, nor do the granted/notgranted statements).
I've tried calling it from within the script section of the component
<script lang="ts">...document .getElementById('search_tool_config') ?.addEventListener('change', () => { if ($config.search_handler === SearchTool.Overlay) { chrome.permissions.request({ permissions: ['scripting'] }, (result) => { if (result) { console.log('Permission granted'); } else { console.error('Permission not granted'); } }); } });</script>This also never Prompts me and the messages never get logged
I've tried adding the event listener in index.ts where the svelte component is mounted, the code is almost the same as above, and also doesn't seem to work.
So how can I request permissions in a way that will register, while using a select form or some way of indicating mutually exclusive selections?
Full code is here