feat: support passing additional permissions to the iframe (#911)

Author: RihanArfan

docs/content/2.module/0.guide.md

@@ -59,6 +59,21 @@ nuxt.hook('devtools:customTabs', (tabs) => {
 })
 ```
 
+### Iframe Permissions
+
+By default, iframes have `clipboard-write` and `clipboard-read` permissions enabled. You can add additional permissions using the `permissions` option:
+
+```ts
+const view: ModuleIframeView = {
+  type: 'iframe',
+  src: '/url-to-your-module-view',
+  // Additional permissions to allow in the iframe
+  permissions: ['camera', 'microphone', 'geolocation'],
+}
+```
+
+These permissions will be merged with the default ones and set on the iframe's `allow` attribute.
+
 Learn more about [DevTools Utility Kit](/module/utils-kit).
 
 ## Lazy Service Launching

docs/content/2.module/1.utils-kit.md

@@ -39,6 +39,21 @@ addCustomTab(() => ({
 }))
 ```
 
+The iframe view supports the following options:
+
+- `src`: URL of the iframe
+- `persistent`: Whether to persist the iframe instance when switching tabs (default: `true`)
+- `permissions`: Additional permissions to allow in the iframe (merged with default `clipboard-write` and `clipboard-read`)
+
+```ts
+const view: ModuleIframeView = {
+  type: 'iframe',
+  src: '/url-to-your-module-view',
+  persistent: true,
+  permissions: ['camera', 'microphone'],
+}
+```
+
 ### `refreshCustomTabs()`
 
 A shorthand for call hook `devtools:customTabs:refresh`. It will refresh all custom tabs.

packages/devtools-kit/src/_types/custom-tabs.ts

@@ -68,6 +68,13 @@ export interface ModuleIframeView {
    * @default true
    */
   persistent?: boolean
+  /**
+   * Additional permissions to allow in the iframe
+   * These will be merged with the default permissions (clipboard-write, clipboard-read)
+   *
+   * @example ['camera', 'microphone', 'geolocation']
+   */
+  permissions?: string[]
 }
 
 export interface ModuleVNodeView {

packages/devtools/client/components/IframeView.vue

@@ -23,7 +23,7 @@ const box = reactive(useElementBounding(anchor))
 onMounted(() => {
   const view = props.tab.view as ModuleIframeView
   const isPersistent = view.persistent !== false
-  const allowedPermissions = ['clipboard-write', 'clipboard-read']
+  const allowedPermissions = ['clipboard-write', 'clipboard-read', ...(view.permissions || [])]
 
   if (iframeCacheMap.get(key.value) && isPersistent) {
     iframeEl.value = iframeCacheMap.get(key.value)!