Pestañas de Bootstrap en mi archivo HTML
<div class="tabbable-line"> <ul class="nav nav-tabs "> <li class="active"> <a href="#A" class="active" data-toggle="tab">A</a> </li> <li> <a href="#B" data-toggle="tab">B</a> </li> <li> <a href="#C" data-toggle="tab">C</a> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="A"> <h2>Atab</h2> </div> <div class="tab-pane" id="B"> <p>B tab</p> </div> <div class="tab-pane" id="C"> <p>C tab</p> </div> </div>Ya agregué el permiso de pestañas en el archivo manifest.json
Estoy llamando a los archivos jquery y bootstrap localmente.
Cuando estoy haciendo clic en cualquiera de las pestañas.
Recibo el siguiente error:
No se pudo iniciar 'unsafe:chrome-extension://I3444234444443/Index.html#A' porque el esquema no tiene un controlador registrado.
Puede usar bootstrap en la ventana emergente de extensión, pero parece que al ejemplo original le faltan algunos atributos requeridos. Compartiré un ejemplo de trabajo mínimo.
Este ejemplo supone tener dependencias de arranque ( que se pueden descargar aquí ), disponibles en el directorio raíz de la extensión. El proyecto de extensión debe contener los siguientes archivos:
* bootstrap.min.css * bootstrap.min.js * manifest.json * popup.htmlConfigure la ventana emergente en manifest.json:
{ "name": "My Extension", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "popup.html" } }Luego use bootstrap en popup.html:
<html> <head> <link href="bootstrap.min.css" rel="stylesheet"/> <style>body { width: 500px; height: 500px; padding: 1em; }</style> </head> <body> <ul class="nav nav-tabs"> <li class="nav-item"> <button class="nav-link active" data-bs-target="#tabs-a" data-bs-toggle="tab">Tab A</button> </li> <li class="nav-item"> <button class="nav-link" data-bs-target="#tabs-b" data-bs-toggle="tab">Tab B</button> </li> <li class="nav-item"> <button class="nav-link" data-bs-target="#tabs-c" data-bs-toggle="tab">Tab C</button> </li> </ul> <div class="tab-content"> <div class="tab-pane show active" id="tabs-a">Tab A content</div> <div class="tab-pane" id="tabs-b">Tab B content</div> <div class="tab-pane" id="tabs-c">Tab C content</div> </div> <script src="bootstrap.min.js"></script> </body> </html>Tenga en cuenta que en la sección principal de la ventana emergente (línea 4), he agregado estilos personalizados para asegurarme de que el ancho/alto de la ventana emergente sea fijo; de lo contrario, la ventana emergente se ajustará al contenido.
El archivo emergente es un archivo html, no puede solicitar index.html#A .