Conocimiento básico
1. Estructura de archivo enchufable
1.1. manifest.json
Cada extensión, aplicación web instalable y skin tiene un archivo manifiesto de formato JSON que almacena información importante relacionada con el complemento.
Un ejemplo de configuración básica:
{"Nombre": "Browser Action Demo", "Versión": "1.0", "Permisos": ["Tabs", "http: //*/*", "https: //*/*"], "Browser_action": {"default_title": "Switch Light", "Default_icon": "Icon.png", "predeterminado:" predeterminado: "predeterminado:": predeterminado: ": predeterminado: predeterminado:" "PopUp.html"}, "Background": {"Page": "Background.html"}, "Manifest_version": 2}1.2. ventana emergente
La ventana emergente del complemento, el default_popup en BROWSER_ACTION en la configuración anterior es esta página.
1.3. Página de fondo
La mayoría de las aplicaciones incluyen una página de fondo para realizar las funciones principales de la aplicación.
1.4. Scripts de contenido
El script de contenido puede habilitar la interacción entre la aplicación y la página web, que se refiere a los scripts de JavaScript que pueden ejecutarse dentro de las páginas que han sido cargadas por el navegador. Puede pensar en el script de contenido como parte de una página web, no parte de la aplicación en la que se encuentra.
2. Interacción entre archivos
La función en la página de fondo se puede llamar directamente en la ventana emergente.
El script de contenido puede leer y modificar el árbol DOM de la página web actual, pero no puede modificar el árbol DOM de la página de fondo (fondo) de la aplicación que se encuentra.
Interacción entre el script de contenido y la aplicación: puede enviarse mensajes entre sí
3. Inyect JS (Content Scripts) Archivo en la página web:
Método 1: Configurar en el archivo manifest.json:
"Content_Scripts": [{"coincide": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jQuery.js", "myscript.js"]}],Método 2, a través de Executescript ()::
Inyecte los scripts de JavaScript en la página para ejecutar.
chrome.tabs.executescript (entero tabid, detalles del objeto, devolución de llamada de función) chrome.tabs.executescript (tabid, {archivo: "Func.js", allframes: true});Apariencia de ui
1. Acción del navegador:
Agregue un icono a la derecha de la barra de direcciones de la barra de herramientas de Chrome principal.
Nota: las aplicaciones empaquetadas no pueden usar acciones del navegador
1.1. Configuración en manifest.json
Registre la acción del navegador:
{"Nombre": "My Extension", ... "Browser_action": {"default_icon": "Images/icon19.png", // opcional "default_title": "Google Mail", // opcional; Se muestra en ToolTip "default_popup": "popup.html" // opcional}, ...}1.2. Descripción del elemento de configuración
(1) default_icon
Icono 19 * 19px
Modifique el campo Default_icon en el manifiesto de Browser_Action o llame al método seticon ().
chrome.browseraction.Seticon (detalles del objeto)
Establezca el icono de acción del navegador. El icono puede ser una ruta hacia una imagen o información de píxeles extraída de un elemento de lona. Ya sea que se trate de la ruta del icono o el iMagedata de lienzo, se debe especificar esta propiedad.
(2) default_title
Modifique el campo Default_title en el manifiesto BROWSER_ACTION o llame al método settitle (). Puede especificar una cadena localizada para el campo Default_title; Haga clic en Internacionalización para ver los detalles.
chrome.browseraction.settitle (detalles del objeto)
Establezca el título de acción del navegador, esto se mostrará en ToolTiP.
(3) Insignia
Las acciones del navegador pueden mostrar opcionalmente una insignia: mostrar algún texto en el icono. Las insignias pueden simplemente actualizar alguna información de indicación de estado de extensión pequeña para la acción del navegador.
Debido a que el espacio de la insignia es limitado, solo admite menos de 4 caracteres.
Para establecer el texto y el color de la insignia, puede usar setBadgetExt () y setBadgeBackgroundColor () respectivamente.
chrome.browseraction.setBadgetext (detalles del objeto)
Establezca el texto de la insignia de la acción del navegador, y la insignia se muestra en el icono.
setbadgebackgroundcolorchrome.browseraction.setbadgebackgroundcolor (detalles del objeto)
Establezca el color de fondo de la insignia.
(4) default_popup
Consejos emergentes de burbujas
Modifique el campo Default_Popup en el manifiesto de Browser_Action para especificar el archivo HTML o llamar al método setPopup ().
chrome.browseraction.setPopup (detalles del objeto)
Establece un HTML que se muestra en la ventana emergente al hacer clic en las acciones del navegador.
1.3. Consejos
Para la mejor pantalla, siga los siguientes principios:
Confirme que las acciones del navegador solo se usan en escenarios donde la mayoría de los sitios web tienen requisitos funcionales.
Confirme que las acciones del navegador no se usan en algunas páginas web que tienen funciones. Utilice las acciones de la página para este escenario.
Asegúrese de que el tamaño de su icono debe ocupar tanto como el espacio de 19x19 píxeles. El icono de la acción del navegador debe verse más grande y pesado que el icono de la acción de la página.
No intente imitar los íconos de llave de Google Chrome, su rendimiento puede ser problemático bajo diferentes temas, y la extensión debería ser más llamativa.
Intente usar el canal alfa y suavizar los bordes de sus iconos, porque muchos usuarios usan temas, sus iconos deben funcionar bien en varios fondos.
No sigas mostrando tu ícono, es muy ofensivo.
2. Haga clic con el botón derecho en el menú
Puede elegir agregar un elemento de menú de clic derecho para diferentes tipos de objetos (como imágenes, enlaces, páginas).
Puede agregar múltiples elementos del menú de clic derecho según sea necesario. Múltiples elementos del menú de clic derecho agregados en una extensión se combinarán automáticamente por Chrome y se colocan en el menú secundario del nombre de extensión correspondiente.
El menú de clic derecho puede aparecer en cualquier documento (o cuadros en el documento) o incluso en un archivo local (como el archivo: // o chrome: //). Si desea controlar la visualización del menú de clic derecho en diferentes documentos, puede especificar DocumentRlPatterns al llamar a Create () y Update ().
2.1. Configuración en manifest.json
Declare el permiso "ContentMenus" en el manifiesto. Al mismo tiempo, debe especificar un icono de 16x16 para usar como el logotipo del menú de clic derecho. Por ejemplo:
{"Nombre": "My Extension", ... "Permisos": ["ContextMenus"], "Icons": {"16": "icon-bitty.png", "48": "icon-small.png", "128": "icon-large.png"}, ...}3. Notificaciones de escritorio
Notifique al usuario que algo importante ha sucedido. Las notificaciones de escritorio se mostrarán fuera de la ventana del navegador. La siguiente imagen muestra el efecto de las notificaciones. En diferentes plataformas, el efecto de visualización de las notificaciones será ligeramente diferente.
Use directamente una pequeña pieza de código JavaScript para crear notificaciones y, por supuesto, también se puede hacer a través de una página HTML separada en el paquete de extensión.
3.1. Configuración en manifest.json
{"Nombre": "Mi extensión", ... "Permisos": ["Notificaciones"], ...}3.2. Interactuar con la página extendida:
Use getBackgroundPage () y getViews () para crear interacciones en notificaciones y páginas de extensión
// Llame al método de página extendido en la notificación ... chrome.extension.getBackgroundPage ().
4. Omnibox
La interfaz de aplicación Omnibox le permite registrar una palabra clave con la barra de direcciones de Google Chrome, que también se llama Omnibox.
El campo de palabras clave Omnibox debe incluirse en el manifiesto. Se requiere un icono con píxeles de 16x16 para especificar para que se muestre en la barra de direcciones cuando el usuario ingrese una palabra clave.
4.1. Configuración en manifest.json
{"Nombre": "Extensión Omnibox de Aaron", "Versión": "1.0", "Omnibox": {"Palabra clave": "Aaron"}, "iconos": {"16": "16-Full-Color.png"}, "Background_page": "Background.html"}Chrome crea automáticamente iconos con 16x16 píxeles en modo en modo gris. Debe proporcionar una versión a todo color del icono para que pueda usarse en otros escenarios.
5. Página de opciones
Para que los usuarios configuren sus extensiones, es posible que deba proporcionar una página de opción. Si proporciona una página de opción, se proporcionará un enlace en la página de administración de extensiones Chrome: // Extensiones. Haga clic en el enlace Opciones para abrir su página de opciones.
5.1. Configuración en manifest.json
{"Nombre": "My Extension", ... "Options_page": "Opciones.html", ...}6. Sobrescribir páginas específicas
Usando páginas alternativas, puede reemplazar algunas páginas específicas en Chrome de forma predeterminada y usar páginas proporcionadas por la extensión.
6.1. Configuración en manifest.json
{"Nombre": "My Extension", ... "Chrome_url_overrides": {"Pagetoverride": "myPage.html"}, ...}7. Acciones de página
Use acciones de página para colocar el icono en la barra de direcciones.
Si desea que el icono de extensión sea siempre visible, use la acción del navegador.
Las aplicaciones empaquetadas no pueden usar acciones de página.
7.1. Configuración en manifest.json
{"Nombre": "My Extension", ... "Page_Action": {"Default_icon": "icons/foo.png", // opcional "default_title": "do acción", // opcional; Se muestra en ToolTip "default_popup": "popup.html" // opcional}, ...}7.2. Descripción del elemento de configuración
Al igual que las acciones del navegador, las acciones de la página pueden tener iconos, mensajes rápidos y ventanas emergentes. Pero no hay insignia
Use los métodos show () y ocultar () para mostrar y ocultar acciones de página. Por defecto, la acción de la página está oculta. Cuando desee mostrar, debe especificar la página de pestañas donde se encuentra el icono. El icono permanecerá visible hasta que la página de pestaña se cierre o comience a mostrar una URL diferente (como: el usuario hace clic en una conexión)
7.3. Consejos
Use la acción de la página solo para unas pocas páginas;
No lo use para la mayoría de las páginas, use acciones del navegador en su lugar si la funcionalidad lo requiere.
No siempre dejes que los íconos aparezcan en animaciones cuando esté bien, será muy molesto.
8. Tema
El tema es una extensión especial que se puede usar para cambiar la apariencia de todo el navegador. El tema es similar a la extensión estándar, pero el tema no puede contener el código JavaScript o HTML.
8.1. Configuración en manifest.json
{"Versión": "2.6", "Nombre": "Camo Theme", "Tema": {"Images": {"theme_frame": "Images/thema_frame_camo.png", "theme_frame_overlay": "Images/thema_frame_stripe.png", "thema_toolbar": "Images/thicle_camo.png", ",", ",". "thema_ntp_background": "Images/thema_ntp_background_norepeat.png", "thema_ntp_attribution": "Images/attribution.png"}, "colores": {"marco": [71, 105, 91], "ToolBar": [207, 221, 192], "ntp_text": [20, 40, 0], 0], "ntp" ntpning "," ntp "ntpin", "ntp" ntphin : [36, 70, 0], "ntp_section": [207, 221, 192], "button_background": [255, 255, 255]}, "tints": {"botones": [0.33, 0.5, 0.47]}, "Propiedades": {"ntp_background_alignment": "Inftor