prefacio
Las extensiones de Chrome (también comúnmente llamadas complementos) también son programas de software, desarrollados utilizando la pila de tecnología web (HTML, CSS y JavaScript). Permite a los usuarios personalizar la experiencia de navegación de Chrome. Los desarrolladores pueden optimizar la experiencia agregando funciones o efectos especiales. Por ejemplo: herramientas de eficiencia, agregación de información, etc. Puede ver una amplia variedad de extensiones en Chrome Store. Por ejemplo, algunas extensiones de traducción, extensiones de formato JSON, etc. han mejorado mucho nuestra eficiencia de desarrollo o trabajo. Este artículo tiene como objetivo ayudarlo a comprender los conceptos básicos y el proceso de desarrollo del desarrollo de extensiones de Chrome. Y finalmente desarrolle una extensión de extracción de color de fondo para profundizar la impresión de la extensión de Chrome. Este artículo se basa en Manifest V3 y la mayor parte del contenido está traducido de https://developer.chrome.com/docs/extensions/mv3/. Al final, las funciones extendidas que queremos implementar son las siguientes:
concepto basico
Manifiesto
El manifiesto de la extensión es el único archivo requerido y el nombre del archivo debe ser manifest.json. El manifiesto debe colocarse en el directorio raíz de la extensión. Registra metadatos importantes, definiciones de recursos, declaraciones de permisos e identifica qué archivos se ejecutan en segundo plano y en la página.
Trabajador del servicio
El usuario extendido de Service Worker maneja y escucha los eventos del navegador. Como saltar a una nueva página, eliminar marcadores, cerrar pestañas, etc. Puede usar todas las API de Chrome, pero no puede interactuar directamente con las páginas web (se requieren secuencias de comandos de contenido para interactuar con las páginas web).
Guiones de contenido
Content Script puede ejecutar JavaScript en el contexto de la página web. También es posible leer y modificar el DOM de la página en la que se inyectan. Content Script solo puede usar parte de la API de Chrome. Se puede acceder al resto indirectamente a través de Service Workers.
Ventanas emergentes y páginas
Las extensiones pueden contener varios archivos HTML, como ventanas emergentes, opciones de página, etc., que pueden acceder a las API de Chrome.
Desarrollar una extensión simple
Desarrollemos una extensión simple de Hello Extensions .
Crear archivo manifest.json
Cree un nuevo directorio y cree un archivo manifest.jsoncon el nombre .
mkdir hello_extension
cd hello_extension
touch manifest.jsonmanifest.jsonAgregue el siguiente código al :
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}El archivo JSON anterior describe la función y la configuración de la extensión. Por ejemplo, la acción describe el ícono de la extensión que debe mostrarse en Chrome y la página que aparece después de hacer clic en el ícono. Puede descargar el ícono aquí a su directorio y luego cambiar el nombre al configurado manifest.jsonen default_icon.
crear archivo html
También se configura uno en la acción anterior default_popup, y luego creamos un archivo hello.htmlllamado y agregamos el siguiente código.
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>extensión de carga
Cargue extensiones sin empaquetar en modo de desarrollo.
Escríbelo en la barra de direcciones del navegador Chrome
chrome://extensions. También se puede abrir de las siguientes dos maneras.
Activa el modo desarrollador
Haga clic para cargar la extensión desempaquetada
Después de seleccionar nuestra carpeta, se mostrará en la página de extensión
extensión fija
Haga clic en Anclar y nuestra extensión se puede mostrar en la barra de herramientas. Luego hacemos clic en el icono para que aparezca la página correspondiente.
extensión de recarga
Volvamos al código y cambiemos el nombre de la extensión a "¡Hola Extensiones del mundo!"
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}Después de guardar, vuelva a la página de la extensión, haga clic en Actualizar y podrá ver que el nombre ha cambiado. 
¿Necesito recargar la extensión cada vez que hago un cambio? Puede consultar la siguiente tabla.
| Extensiones | ¿Necesitas recargar |
|---|---|
| el manifiesto | Sí |
| Trabajador del servicio | Sí |
| Guiones de contenido | Sí (más la página de host) |
| la ventana emergente | No |
| Página de opciones | No |
| Otras páginas HTML de extensión | No |
Ver registros y errores de la consola
Registros de la consola
Durante el desarrollo, puede depurar su código a través de los registros de la consola del navegador. En el código anterior agregar<script src="popup.js"></script>
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>Cree un archivo popup.jsllamado y agregue el siguiente código:
console.log("This is a popup!")Próximo:
extensión de actualización
abrir la ventana emergente
ventana emergente con clic derecho
Seleccione Inspeccionar
Cambie a la pestaña Consola en las herramientas para desarrolladores.
Registros de errores
A continuación modificamos popup.js, quitamos una comilla
console.log("This is a popup!) // ❌ 错误代码Después de actualizar, y luego haga clic para abrir la extensión, puede ver que aparece el botón de error. 
Haga clic en el botón de error para ver la información específica del error.
Estructura extendida del proyecto
Hay muchas formas de expandir la estructura del proyecto, pero manifest.jsonel archivo debe estar ubicado en el directorio raíz, el siguiente es un ejemplo de estructura.
Guión de contenido
Content Script se ejecuta en el contexto de la página web. A través del DOM estándar, Content Script puede leer los detalles de la página a la que accede el navegador, modificarla y pasar esta información a la extensión principal.
Capacidad para comprender el script de contenido
Content Script puede usar directamente parte de la API de Chrome, como:
i18n
almacenamiento
tiempo de ejecución:
conectar
obtenermanifiesto
obtenerURL
identificación
onConnect
enMensaje
enviar mensaje
Otros pueden implementarse mediante el envío de mensajes. Content Script puede acceder a los archivos en la extensión después de declararlos como recursos accesibles en la Web. Content Script se ejecuta en un entorno independiente y puede modificar su entorno de JavaScript sin entrar en conflicto con páginas u otros Content Scripts extendidos.
<html>
<button id="mybutton">click me</button>
<script>
var greeting = "hello, ";
var button = document.getElementById("mybutton");
button.person_name = "Bob";
button.addEventListener(
"click",
() => alert(greeting + button.person_name + "."),
false
);
</script>
</html>
Inyección de script de contenido
Hay tres métodos de inyección de Content Script, a saber, declaración estática, declaración dinámica e inyección de programación. La declaración estática es relativamente simple, solo necesita content_scriptsconfigurar . Tenga en cuenta que matchesel campo para indicar qué páginas deben ejecutar el script Content Script.
"content_scripts": [
{
"matches": ["https://*.google.com/*"],
"css": ["styles.css"],
"js": ["content-script.js"]
}
],El escenario de uso principal de la declaración dinámica es cuando matchesno está claro. La inyección de programación debe usarse en respuesta a eventos o en algunas ocasiones específicas.Nuestro ejemplo final usa declaraciones estáticas.
Trabajador del servicio
Las extensiones de Chrome son programas basados en eventos que modifican o mejoran la experiencia de navegación del navegador Chrome. Los eventos son activados por el navegador, como navegar a una nueva página, eliminar un marcador o cerrar una pestaña. La extensión escucha estos eventos a través de scripts en Service Worker. Luego ejecute instrucciones específicas. El Service Worker se carga cuando es necesario y se descarga cuando se va a dormir. Por ejemplo:
La extensión se instala por primera vez o se actualiza a una nueva versión
Se dispara un evento extendido
Content Script u otra extensión envió un mensaje
Una vez que se carga Service Worker, Service Worker seguirá ejecutándose mientras haya eventos. Una vez inactivo durante 30 segundos, el navegador lo detiene. Service Worker permanece inactivo hasta que se produce un evento que escucha, momento en el que ejecuta el detector de eventos correspondiente, luego se inactiva y se descarga.
Los registros de Service Worker se pueden ver aquí
Registrar trabajador de servicio
"background": {
"service_worker": "background.js"
},Inicializar la extensión
chrome.runtime.onInstalled.addListener(function (details) {
console.log("onInstalled event has been triggered with details: ", details);
// 检查安装、更新或卸载的原因
if (details.reason == "install") {
// 在安装扩展时执行的代码
} else if (details.reason == "update") {
// 在更新扩展时执行的代码
} else if (details.reason == "uninstall") {
// 在卸载扩展时执行的代码
}
});
configurar el monitor
/**
* 注意需要声明权限
*/
chrome.bookmarks.onCreated.addListener(function (id, bookmark) {
console.log(
"Bookmark created with title: " +
bookmark.title +
" and url: " +
bookmark.url
);
});
filtrar eventos
/**
* 注意需要声明 webNavigation 权限
*/
chrome.webNavigation.onCompleted.addListener(() => {
console.info("The user has loaded my favorite website!");
});
Todos los eventos se imprimen cuando no se filtran. Diferentes eventos corresponden a diferentes funciones, y debe seleccionar el evento apropiado para monitorear.
Service Worker se comunica con Content Script
Podemos pasar el evento de hacer clic en la pestaña extendida chrome.tabs.sendMessagey registrarlo en el Content Script chrome.runtime.onMessage.addListenerpara recibirlo .
Desarrollo de extensión de extracción de color
Con base en los puntos de conocimiento anteriores, debemos implementar las siguientes funciones: 1. Haga clic en el botón de extensión en la barra de navegación para que aparezca un panel que muestre los detalles 2. Haga clic con el mouse en el elemento de página en la página actual para mostrar el fondo correspondiente color en el panel emergente 3. Haga clic para copiar El botón puede copiar el color de fondo del elemento actual
Aquí solo enumeramos el código central de la siguiente manera:
configuración de manifiesto
{
"manifest_version": 3,
"name": "EasyColor",
"description": "Chrome extension for obtaining color in an easy way",
"version": "0.0.1",
"action": {
"default_icon": "images/icon-48.png"
},
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css": ["css/styles.css"],
"js": ["scripts/content.js"],
"run_at": "document_start"
}
],
"web_accessible_resources": [
{
"resources": ["/pages/panel.html"],
"matches": ["http://*/*", "https://*/*"]
}
]
}Haga clic en el botón de extensión en la barra de navegación para abrir un panel de visualización
Primero, service_workeren , definimos un background.js para escuchar el evento de clic de extensión y enviarlo a content_scripts.
chrome.action.onClicked.addListener(function (tab) {
//open pages
chrome.tabs.sendMessage(tab.id, {
action: "EVENT_PANEL_OPEN",
});
});Escuche EVENT_PANEL_OPENel evento y agregue un iframe a la página actual para mostrar el panel.
chrome.runtime.onMessage.addListener((req, sender, sendResp) => {
const data = req;
if (data.action === "EVENT_PANEL_OPEN") {
let easyPanel = document.getElementById(easyPanelId);
if (easyPanel == null) {
easyPanel = document.createElement("iframe");
easyPanel.id = easyPanelId;
easyPanel.src = chrome.runtime.getURL("../pages/panel.html");
easyPanel.style.width = "100%";
easyPanel.style.height = "100%";
easyPanel.style.borderRadius = "20px";
easyPanel.style.border = "none";
const container = document.createElement("div");
container.id = easyContainerId;
container.style.width = "200px";
container.style.height = "250px";
container.style.position = "fixed";
container.style.top = "10px";
container.style.right = "10px";
container.style.zIndex = "10000";
container.style.boxShadow = "3px 2px 22px 1px rgba(0, 0, 0, 0.24)";
container.style.borderRadius = "20px";
container.appendChild(easyPanel);
document.body.appendChild(container);
}
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener(
"click",
function (e) {
e.stopPropagation();
e.preventDefault();
return false;
},
true
);
}
});Haga clic para mostrar el color correspondiente
Agregue un evento de clic a content_scripts para obtener el color de fondo del elemento actual y luego páselo al iframe para mostrarlo.
document.addEventListener("mousedown", function (e) {
let easyPanel = document.getElementById(easyPanelId);
if (easyPanel == null) {
return;
}
const cpStyle = window.getComputedStyle(e.target);
easyPanel.contentWindow.postMessage(
{
type: "computedStyle",
data: JSON.stringify({
color: cpStyle.color,
backgroundColor: cpStyle.backgroundColor,
}),
},
"*"
);
});Lo anterior es el código central del complemento de selección de color del elemento que implementamos. Para obtener más detalles, consulte: https://github.com/yangpeng7/ChromeExtensionBestPractice
recursos de referencia
https://developer.chrome.com/docs/extensions/mv3/
- FIN -
Acerca de Qi Wu Troupe
Qi Wu Troupe es el equipo front-end más grande de 360 Group y participa en el trabajo de los miembros de W3C y ECMA (TC39) en nombre del grupo. Qi Wu Troupe otorga gran importancia a la capacitación de talentos. Hay varias direcciones de desarrollo, como ingenieros, profesores, traductores, personas de interfaz comercial y líderes de equipo para que los empleados elijan, y se complementan con la capacitación técnica, profesional, general y de liderazgo correspondiente. curso Qi Dance Troupe da la bienvenida a todo tipo de talentos destacados para que presten atención y se unan a Qi Dance Troupe con una actitud abierta y de búsqueda de talentos.
