La fuente personalizada no se utilizará en Chromebook pero funciona bien en Chrome (mac).
Tiene este “pequeño proyecto” donde inyecta un widget de clima en el calendario de Google. Desea usar una fuente de Google con el widget. Su intento con un paquete npm (compromisos anteriores) funcionó bien en Chrome (en una Mac), pero no en la tableta Chromebook en la que quiero usarlo.
Luego cambié la táctica para inyectar una etiqueta de enlace como esta
“`js
console.log (‘La extensión del widget del clima para el calendario de Google se está ejecutando’)
document.addEventListener (‘DOMContentLoaded’, function (evento) {
console.log ({evento})
})
const linkElement = document.createElement (‘link’)
linkElement.rel = ‘stylesheet’
linkElement.href = ‘https://fonts.googleapis.com/css?family=Gemunu+Libre’
document.head.appendChild (linkElement)
console.log ({linkElement})
const mainDiv = document.createElement (‘div’)
mainDiv.className = ‘weather-widget__main’
mainDiv.setAttribute (
‘style’,
position: absolute;
z-index: 1000;
right: 20px;
bottom: 20px;
background: linear-gradient (145deg, # 024acf0a, # 0721d74f);
opacidad: 70%;
relleno: 10px;
borde: 1px sólido # 0721d74f;
sombra de caja: 0px 0px 10px # 0721d74f;
radio de borde: 10px;
fuente: Gemunu Libre, Roboto;
)
document.body.appendChild (mainDiv)
…
esto también funciona en Chrome pero no en el Chromebook?
No es relevante, pero lo estoy escribiendo en TypeScript y usando vite con un complemento para construirlo. Si desea usarlo, debe hacer un archivo .env
.env
.env
VITE_API_KEY = & lt; su clave de API de OpenWeatherMap & gt;
VITE_LAT = & lt; su latitud & gt;
VITE_LON = & lt; su longitud & gt;
ejecute yarn build y cargue la carpeta dist como una extensión local en Chrome..
Establecer la fuente personalizada mediante estilos en línea en cada bloque parece hacer el truco👍
(Haciendo font-family: inherit; no funcionó)
davy.ai
Como experto en TI especializado en javascript, html, css, google-chrome-extension y chromebook, he encontrado un problema al intentar inyectar un widget meteorológico en Google Calendar usando una fuente de Google. Aunque mi primer intento con un paquete npm funcionó perfectamente en Chrome para Mac, falló en la tableta Chromebook que tenía previsto utilizar en mi proyecto. Más tarde, opté por inyectar un elemento de enlace para resolver el problema. Creé el elemento de enlace con
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gemunu+Libre">y lo agregué al elemento head. Sin embargo, esto también falló en el dispositivo Chromebook, a pesar de que funcionó bien en Chrome para Mac.Para resolver el problema, decidí establecer la fuente personalizada mediante un estilo en línea en cada bloque. Este método funcionó, a diferencia de usar
font-family: inherit, que no funcionó. Para aquellos interesados en replicar o probar mi solución, escribí mi código en TypeScript usando Vite y un plugin para la compilación. Deberá crear un archivo.envcon suclave de API de openweathermap,latitudylongitud. Después de esto, ejecuteyarn buildy para usar mi solución como una extensión local en Chrome, cargue la carpetadist.