Tabla de contenido
prefacio
En la actualidad, el navegador chrome ya ocupa la mayor cuota de mercado y es también el navegador con mejor experiencia integral, básicamente es el navegador utilizado por los desarrolladores.
En el proceso de usar Chrome, acumulé muchos marcadores, como máximo cerca de mil, y luego eliminé algunos gradualmente. Una vez, cuando revisé y limpié estos marcadores, descubrí que no era intuitivo, así que pensé en desarrollar un complemento de Chrome simple para contar estos marcadores de vez en cuando.
Este complemento también es relativamente simple, con las siguientes funciones: contar el número total de marcadores, contar el número de marcadores en cada carpeta, contar el número de marcadores de sitios de tecnología de uso común, los últimos marcadores agregados, los primeros marcadores agregados, etc.
El diagrama de visualización específico es el siguiente:
A través de esta extensión, me mantengo al tanto de los marcadores que agregué y los borro después de aprender.
Por lo tanto, este artículo utilizará este complemento simple para presentar cómo desarrollar un complemento de Chrome.
extensión de cromo
Un complemento de Chrome, también conocido como extensión, se desarrolla principalmente en base a la tecnología front-end. Es un tipo de programa de software utilizado para ampliar las funciones del navegador y se puede cargar y ejecutar en el navegador Chrome.
También puede abrir la interfaz de administración de extensiones en el navegador para ver todas las extensiones instaladas en el navegador actual.
Además de admitir WebAPI y JS-API de front-end básicos, la extensión también tiene otras capacidades, como ventanas de navegador, pestañas, menús contextuales, herramientas para desarrolladores, historial, solicitudes de descarga, marcadores y otras operaciones. Estas funciones correspondientes son manejadas por sus propios objetos de Chrome. Por ejemplo, los marcadores usarán el objeto chrome.bookmarks, que se usa para procesar específicamente operaciones y datos relacionados con marcadores. Otros incluyen el objeto de etiqueta de pestaña `chromes.tabs`, el objeto de historial `chromes.history`, etc., muchas API dedicadas para extensiones.
Hay dos tipos de extensiones de Chrome:
- Ventana emergente: después de hacer clic en el botón, aparecerá una página de ventana emergente, que se puede usar para operaciones interactivas.
- Programa de fondo: un programa de script que se ejecuta permanentemente en segundo plano y se cierra cuando se cierra el navegador.
En general, hay dos tipos de interfaz de usuario:
- Botones del navegador, Acciones del navegador, funciones adjuntas al navegador en su conjunto.
- Los botones de página, las acciones de página, las funciones adjuntas a una página de pestaña separada, solo se pueden usar en una página específica.
En el ejemplo de este artículo, el complemento de marcadores es una ventana emergente con un botón del navegador que se utiliza para organizar los marcadores . La extensión se presentará en su totalidad a continuación.
estructura de archivos
Primero, eche un vistazo a la estructura del directorio de archivos del complemento de marcadores:
De la figura anterior, puede ver que la estructura del archivo es relativamente simple:
- manifest.json: archivo de configuración de características y recursos para complementos
- popup.html: archivo de entrada de la página de la ventana del complemento, página de la ventana emergente
- bookmarks.js: código js correspondiente al procesamiento de funciones
- popup.css: código css
- images/icon.png: recurso de íconos para configurar complementos e íconos de botones
Estos archivos son los archivos más básicos necesarios para desarrollar complementos de Chrome, y también se pueden usar otros archivos, como archivos de recursos de internacionalización local, archivos de módulos, etc.
Dado que la función de nuestro complemento de marcador es relativamente simple, basta con utilizar estos pocos archivos básicos.
manifiesto.json
El archivo de configuración manifest.json se utiliza para proporcionar la información básica del complemento, como la versión, el icono, el título, el archivo de entrada, etc., como se muestra a continuación, que es la configuración básica del complemento de marcador.
{
"manifest_version": 3,
"version": "2.0",
"name": "mybookmarks",
"description": "a chrome extension for bookmarks",
"icons": {
"128": "images/icon.png",
"16": "images/icon.png"
},
"action": {
"default_title": "书签概览",
"default_popup": "popup.html"
},
"permissions": [
"bookmarks"
],
"host_permissions": [
"http://*/*",
"https://*/*"
]
}La versión de manifiesto V3 se usa aquí, en comparación con la versión V2:
- Acción agregada para reemplazar la anterior browser_action y page_action
- La configuración de content_security_policy ha cambiado, V3 usa el tipo de objeto en lugar de la cadena V2
- Se agregaron host_permissions para tratar específicamente con los permisos de host, ya no se mezclan con los permisos.
- V3 es compatible con Promise nativo y async/await
- V3 no permite el acceso a archivos js o wasm remotos
- V3 agrega declarativeNetRequestAPI para manejar solicitudes de red
- Los scripts de fondo de V3 fuerzan el uso de Service Workers
Desde la configuración del complemento de marcadores, puede ver:
- Versión del complemento, nombre, información de descripción.
- El ícono del complemento, al que se hace referencia desde images/icon.png en el archivo, personaliza un recurso de imagen adecuado, pero no admite imágenes SVG.
- El título del botón del complemento en el navegador, que se mostrará cuando el mouse se mueva sobre el botón.
- Archivo de página de entrada emergente del complemento, popup.html.
- La configuración de permisos del complemento debe procesar los marcadores del navegador de marcadores.
La figura anterior muestra la posición del botón del complemento de marcador en el navegador, el ícono del ícono y la descripción del mouse sobre el título predeterminado configurada a través del archivo manifest.json.
html y css
El archivo html del complemento establece la estructura de la página de la ventana emergente, al igual que la página html de front-end general, agrega elementos de etiqueta de página, importa archivos js y css, etc.
El código básico es el siguiente:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>书签概览</title>
<link rel="stylesheet" type="text/css" type href="./popup.css"></link>
</head>
<body>
<div id="app">
<div id="total"></div>
<div id="menus"></div>
<div id="sites">站点: </div>
<!-- ... -->
</div>
<script src="./bookmarks.js"></script>
</body>
</html>Nuestro código html de complemento presenta el archivo de estilo popup.css y el archivo de script bookmarks.js.
Lo mismo ocurre con los archivos css, que no son diferentes de los estilos de interfaz de usuario habituales que escribimos.
Cabe señalar que el código js solo se puede procesar mediante la importación de archivos de secuencias de comandos, y las secuencias de comandos incrustadas no se pueden usar en html; de lo contrario, se informará un error.
<script>
console.log(3333)
</script>Si usa el método anterior para agregar código js, no se ejecutará ningún código y habrá un mensaje de error de código no seguro:
Además, no se deben solicitar archivos js de tipo recurso de red.
js
Echemos un vistazo al código en el archivo js. Es esencialmente el mismo que el código habitual y admite la sintaxis es6. Por ejemplo, lea los elementos en la página de acuerdo con la identificación, como se muestra en el siguiente código:
const app = document.getElementById('app')
const totalEl = document.getElementById('total')Nuestro complemento se ocupa principalmente de los marcadores, y Chrome proporciona objetos de marcadores que se pueden usar:
chrome.bookmarks.getRecent(10000, (results) => {
totalEl.innerHTML = '总数：' + results.length
})El código anterior obtiene el número total de marcadores del navegador mediante el método getRecent del objeto de marcadores (aquí, el número total predeterminado de marcadores es inferior a 10 000 y se leen los últimos 10 000 marcadores).
El código anterior usa una función de devolución de llamada para obtener el resultado, y también podemos usar el método Promise para llamar:
chrome.bookmarks.getRecent(10000).then((results) => {
totalEl.innerHTML = '总数：' + results.length
})De esta manera, se puede obtener el número total de marcadores correspondientes, y otros marcadores se pueden clasificar de manera diferente, y se puede contar la información de marcador más reciente o más antigua, todo lo cual se puede procesar a través del objeto de marcador.
// 获取整个书签栏的树结构数据
chrome.bookmarks.getTree()
// 获取某个父节点下的所有子节点书签
chrome.bookmarks.getChildren(str)
// 根据条件搜索书签
chrome.bookmarks.search(str)A través de la operación del objeto marcador, básicamente podemos completar las estadísticas de marcadores y las funciones especiales de visualización de marcadores de nuestro complemento.
cargar complemento
En este punto, se puede usar el complemento de marcador simple. Necesitamos cargar el código del complemento en el navegador y abrir la interfaz de administración de extensiones del navegador.
Como se muestra en la figura anterior, haga clic en el botón Cargar la extensión descomprimida para cargar directamente la carpeta del código fuente para completar la carga e importación de la extensión.
mybookmarks 2.0 en la imagen de arriba es nuestro complemento de marcador, que se ha cargado correctamente y se puede usar.
depuración
Si el complemento se puede cargar, pero algunos códigos tienen errores, se mostrará un error y puede hacer clic para ver:
La depuración del código del complemento también es relativamente simple. Haga clic con el botón derecho en la página emergente para verificar y se abrirán las herramientas de desarrollo en la página del complemento, que es lo mismo que las herramientas de desarrollo en la página del navegador, y se puede realizar la depuración del código.
Abra las herramientas de desarrollo y cargue la página de entrada de la ventana emergente:
Resumir
Hasta ahora, nuestro complemento de marcadores se ha desarrollado y se puede cargar en el navegador para su uso.
Aunque la función es muy simple, también se basa en las diversas especificaciones desarrolladas por el complemento de Chrome. Si desea desarrollar funciones más complejas, debe verificar las diversas API proporcionadas en la especificación de desarrollo del complemento de Chrome. O usar la tecnología web front-end para expandir más funciones será una cuestión de rutina.