Este artículo tiene como objetivo descifrar el sistema CNC. Si necesita desarrollar en profundidad, puede ir al sitio web oficial de Chrome para aprender.
El funcionario proporciona una demostración para modificar el color de fondo de la página web. Puede hacer clic para descargar. Si tiene problemas con la descarga, puede ir a github.
Este artículo enumerará algunas descripciones de conceptos de uso común, incluidas 5 comparaciones de tipo js, 6 núcleos, comunicación de mensajes y algunos Inyección dinámica, envasado y liberación.
Al final de este artículo, enumeraré una demostración de
demostración de Chrome que convierte la página en modo oscuro. El efecto de demostración es el siguiente:
A través del efecto de visualización anterior, encontrará que hay un pequeño detalle, es decir, cuando la página de la pestaña jd.com, el complemento se resaltará y el color de otras páginas de pestañas se atenuará. ¿Cómo se logra esto? La siguiente demostración será Todos para analizar
¿Qué es un complemento de Chrome?
El verdadero nombre del complemento de Chrome del que habla este artículo debería ser la extensión de Chrome (Extensión de Chrome). El complemento real se refiere a la extensión de la función del navegador de nivel inferior, que puede requerir una cierta comprensión del código fuente de Chrome para desarrollarse.
Los complementos de Chrome en este artículo hacen referencia a algunos complementos de extensión de Chrome que utilizamos a diario.
Las extensiones son pequeños programas de software que personalizan la experiencia de navegación. Permiten a los usuarios adaptar la funcionalidad y el comportamiento de Chrome a las necesidades o preferencias individuales. Se basan en tecnologías web como HTML, JavaScript y CSS.
Copiar código Chrome Extension es personalizar la experiencia de navegación Pequeño programa de software. Permiten a los usuarios personalizar las características y comportamientos de Chrome según sus necesidades o preferencias personales. Se basa en tecnologías web como HTML, JavaScript y CSS.
¿Por qué estudiar el desarrollo de Chrome Extension?
El desarrollo de Chrome Extension nos ayudará a personalizar nuestro propio navegador, mejorar algunas funciones del navegador, fortalecer nuestra capacidad de aprendizaje y también tener algunos otros aspectos de nuestro negocio.
Las habilidades no son aplastantes, más puntos, tal vez tendrá más puntos técnicos cuando busque la próxima empresa.
6 núcleos
Los 6 conceptos principales incluyen formato de manifiesto, gestionar eventos, diseñar interfaz de usuario, secuencias de comandos de contenido, declarar permisos y advertir a los usuarios, dar opciones a los usuarios
Formato de manifiesto: documentos oficiales
Cada descifrado del sistema CNC tiene un archivo de manifiesto en formato JSON, denominado manifiesto. json, proporciona información importante.
Se utiliza para configurar toda la configuración relacionada con el complemento, que debe colocarse en el directorio raíz del proyecto.
La configuración simple es la siguiente
{
"nombre": "TimeStone",
"manifest_version": 2,
"versión": "1.0",
"descripción": "TimeStone extension",
"page_action": {
"default_icon": "images / icon.png ”,
“ default_title ”:“ TimeStone plugin ”,
“ default_popup ”:“ html / home.html ”
},
“ background ”: {
“ scripts ”: [“ js / background.js ”]
},
“ options_page ” : "Html / options.html",
"Homepage_url": "https://juejin.im/user/5940a1d2fe88c2006a44b609",
"permisos": [
"pestañas",
"almacenamiento",
"activeTab"
]
} La
configuración del código de copia se introduce de la siguiente manera:
[Nota] debe estar en negrita Logotipo, se recomienda resaltar
manifest_version-must be, solo puede ser 2
name-plugin name
version-version number
description-description
icons-icon
homepage_url-plugin homepage, jaja, generalmente lo configuro como la página de inicio de mis nuggets
background-background JS o residente permanente Página de fondo, hay dos formas de especificar "fondo":
{
// 2 formas de especificar, si especifica JS, generará automáticamente una página de fondo
"página": "background.html"
// "scripts": ["js / background.js ”]
}
Copie el código
browser_action, page_action, app-display en la esquina superior derecha del navegador, solo puede elegir una de las tres" browser_action ":
{
" default_icon ":" img / icon.png ",
// cuando el icono está suspendido Título, opcional
"default_title": "Este es un complemento de Chrome de ejemplo",
"default_popup": "popup.html"
}
"page_action":
{
"default_icon": "img / icon.png",
"default_title": " Soy pageAction ",
"Default_popup": "popup.html"
}
Copiar
configuración de permisos de permisos de complementos de código "permisos":
[
"contextMenus", // haga clic con el botón derecho en el menú
"pestañas", // etiqueta
"notificaciones", // notificación
"webRequest", / / solicitud web
"del webRequestBlocking",
"almacenamiento", // enchufe almacenamiento local
]
, copiar el código
web_accessible_resources - página de recursos plug-ins lista común se puede acceder directamente, sin ajuste no se puede acceder directamente
chrome_url_overrides - que cubre la página por defecto del navegador
options_ui - plug-in de configuración Página escribiendo omnibox: registre
una palabra clave en la barra de direcciones para proporcionar sugerencias de búsqueda, solo puede establecer una palabra clave "omnibox": {"palabra clave": "rick"}
Copiar código
default_locale-default language
devtools_page-devtools página de entrada, preste atención solo a Apunta a un archivo HTML, no a un archivo JS
Administrar eventos con scripts de fondo: documento oficial
Chrome Ex es un programa basado en eventos que se utiliza para modificar o mejorar la experiencia del navegador Chrome. Los eventos son disparadores del navegador, como navegar a una nueva página y eliminar marcadores O cierre la pestaña. La extensión monitorea estos eventos en su script de fondo y luego responde de acuerdo con las instrucciones especificadas.
Las páginas de fondo se cargan cuando es necesario y se descargan cuando está inactivo. Algunos ejemplos de eventos incluyen:
La extensión se instala primero o se actualiza a una nueva versión.
La página de fondo está escuchando el evento y el evento ha sido enviado.
Enviar mensajes con secuencias de comandos de contenido u otras extensiones.
Otra vista en el programa (como una ventana emergente) llama a runtime.getBackgroundPage.
Los scripts de fondo efectivos permanecerán inactivos hasta que el evento escuche el fuego, responda a los comandos especificados y luego se desinstale.
Las secuencias de comandos de fondo de registro (secuencias de comandos de fondo de registro)
se configuran en manifest.json de la siguiente manera
{
"nombre": "Extensión de prueba impresionante",
...
"fondo": {
"secuencias de comandos": ["js / background.js"],
"persistente ": Falso
},
...
}
Copiar extensión de inicialización de código
Escuche el evento runtime.onInstalled, use este evento para establecer el estado o realizar una inicialización. Por ejemplo, el menú contextual.
chrome.runtime.onInstalled.addListener (function () {
chrome.contextMenus.create ({
“id”: “sampleContextMenu”,
“title”: “Sample Context Menu”,
“contextts”: [“selection”]
});
} );
Copie el código para configurar el oyente para
construir un script de fondo alrededor de los eventos de los que depende la extensión. La definición de eventos relacionados funcionalmente puede suspender los scripts de fondo hasta que se activen estos eventos y evitar que las extensiones pierdan desencadenantes importantes.
El oyente debe estar registrado sincrónicamente desde la página.
chrome.runtime.onInstalled.addListener (function () {
chrome.contextMenus.create ({
“id”: “sampleContextMenu”,
“title”: “Sample Context Menu”,
“contextts”: [“selection”]
});
} );
// Esto se ejecutará cuando se cree un marcador.
Chrome.bookmarks.onCreated.addListener (function () {
// do something
});
Copiar código No registre escuchas de forma asincrónica, ya que no se activarán correctamente.
chrome.runtime.onInstalled.addListener (function () {
// ERROR! Los eventos deben registrarse sincrónicamente desde el inicio de
// la página.
chrome.bookmarks.onCreated.addListener (function () {
// hacer algo
});
} ); La
extensión del código de copia puede eliminar al oyente de su script de fondo llamando a removeListener. Si se eliminan todos los oyentes del evento, Chrome ya no cargará scripts de fondo para el evento.
chrome.runtime.onMessage.addListener (función (mensaje, remitente, respuesta) {
chrome.runtime.onMessage.removeListener (evento);
});
Copiar código para filtrar eventos
Utilice API que admitan filtros de eventos para limitar a los oyentes a situaciones de preocupación prolongada. Si la extensión está escuchando el evento tabs.onUpdated, intente usar el evento webNavigation.onCompleted con un filtro, porque la API de pestañas no admite filtros.
chrome.webNavigation.onCompleted.addListener (function () {
alert (“¡Este es mi sitio web favorito!”);
}, {url: [{urlMatches: 'https://www.google.com/'}]});
Copie el código en respuesta al evento Después de
que se active el evento, hay un oyente que puede activar la función. Para reaccionar a los eventos, construya la respuesta deseada dentro del evento de escucha.
chrome.runtime.onMessage.addListener (function (message, callback) {
if (message.data == "setAlarm") {
chrome.alarms.create ({delayInMinutes: 5})
} else if (message.data == "runLogic ”) {
Chrome.tabs.executeScript ({archivo: 'logic.js'});
} más if (message.data ==“ changeColor ”) {
chrome.tabs.executeScript (
{code: 'document.body.style.backgroundColor = "orange"'});
};
});
Copie el código para desinstalar el script de fondo. Los
datos deben guardarse regularmente para evitar la pérdida de información importante y causar que la extensión se bloquee y no reciba onSuspend. El uso de la API de almacenamiento puede ayudar a realizar esta tarea.
chrome.storage.local.set ({variable: variableInformation});
Si la extensión usa mensajería, asegúrese de que todos los puertos estén cerrados. La secuencia de comandos de fondo no se desinstalará hasta que se cierren todos los puertos de mensajes. Escuchar el evento runtime.Port.onDisconnect proporcionará información sobre cuándo se cierra un puerto abierto. Use runtime.Port.disconnect para cerrarlos manualmente.
chrome.runtime.onMessage.addListener (function (message, callback) {
if (message == 'hello') {
sendResponse ({greeting: 'welcome!'})
} else if (message == 'goodbye') {
chrome. runtime.Port.disconnect ();
}
});
Copie el código monitoreando cuando la entrada extendida aparece y desaparece del administrador de tareas de Chrome, puede observar la vida del script de fondo.
Haga clic en el menú de Chrome, desplace el mouse sobre más herramientas y seleccione "Administrador de tareas" para abrir el Administrador de tareas.
Después de unos segundos de inactividad, el script de fondo se desinstalará solo. Si necesita limpiar el último minuto, escuche el evento runtime.onSuspend.
chrome.runtime.onSuspend.addListener (function () {
console.log ("Unloading.");
chrome.browserAction.setBadgeText ({text: ""});
});
Copie el código Sin embargo, en comparación con el persistente, debería preferirse Tiempo de ejecución de datos. No permite tanta limpieza como sea posible, y no ayuda en caso de un choque.
Diseño de la interfaz de usuario: documento oficial La
interfaz de usuario extendida debe ser útil y mínima. Al igual que la extensión en sí, la interfaz de usuario debe personalizar o mejorar la experiencia de navegación sin distraerlo.
Activar extensiones en todas las páginas
Cuando las funciones de extensión están disponibles en la mayoría de los casos, use browser_action.
Registre browser_action
{
"nombre": "My Awesome browser_action Extension",
...
"browser_action": {
...
}
...
} al
copiar la declaración de código en el archivo manifest.json, el icono permanece en color, lo que indica que la extensión está disponible para los usuarios.
La
llamada insignia de Agregar una insignia es mostrar algo de texto en el icono y mostrar una pancarta de color sobre el icono del navegador, que contenga hasta cuatro caracteres. Solo pueden ser utilizados por extensiones declaradas por "browser_action" en su manifiesto.
Establezca el texto de la insignia llamando y establezca el color del banner llamando. chrome.browserAction.setBadgeText chrome.browserAction.setBadgeBackgroundColor
Active la extensión en la página seleccionada
Use page_action cuando la función de la extensión solo esté disponible en las circunstancias definidas.
Registre page_action {
“name”: “My Awesome page_action Extension”,
…
“page_action”: {
…
}
…
} en manifest.json
Copie el código "page_action" Solo cuando la extensión esté disponible para los usuarios, la declaración hará que el color del icono sea diferente. Se mostrará en escala de grises.
Defina las reglas para activar extensiones
Al llamar al oyente runtime.onInstalled de chrome.declarativeContent en el script de fondo, defina las reglas para cuándo se pueden usar extensiones. La extensión de ejemplo de operación de página a través de URL establece una condición de que la URL debe contener "g". Si se cumplen las condiciones, la extensión llama. declarativeContent.ShowPageAction ()
[Nota]: Aquí está la respuesta cuando la página de pestañas jd.com, el complemento se resaltará, y el color de otras páginas de pestañas se
atenuará chrome.runtime.onInstalled.addListener (function () {
// Reemplazar todas las reglas ...
chrome.declarativeContent.onPageChanged.removeRules (undefined, function () {
// Con una nueva regla ...
chrome.declarativeContent.onPageChanged.addRules ([
{
// Eso se activa cuando la URL de una página contiene una 'g' ...
condiciones: [
new chrome.declarativeContent.PageStateMatcher ({
pageUrl: {urlContains: 'jd.com'},
})
],
// Y muestra la acción de la página de la extensión.
acciones: [new chrome.declarativeContent.ShowPageAction ()]
}
]);
});
});
copiar código
Habilitar o deshabilitar extensiones La
extensión usa "page_action" para activar y desactivar dinámicamente pageAction.hide llamando a pageAction.show y.
La muestra MAPPY expande la dirección de la página web escaneada y muestra la ubicación emergente en el mapa estático. Dado que la extensión depende del contenido de la página, no hay forma de declarar reglas para predecir qué páginas serán relevantes. Por el contrario, si la dirección se encuentra en la página, llamará a pageAction.show para cambiar el ícono e indicar que la extensión está disponible en la pestaña.
chrome.runtime.onMessage.addListener (function (req, sender) {
chrome.storage.local.set ({'address': req.address})
chrome.pageAction.show (sender.tab.id);
chrome.pageAction. setTitle ({tabId: sender.tab.id, title: req.address});
});
copiar código
Proporcionar iconos de extensión Las
extensiones necesitan al menos un icono para representarlo. Aunque se puede aceptar cualquier formato compatible con WebKit, incluidos BMP, GIF, ICO y JPEG, los iconos proporcionados en formato PNG pueden proporcionar los mejores efectos visuales.
Especificar iconos de la
barra de herramientas Los iconos específicos de la barra de herramientas se registran en los campos de la lista browser_action o page_action en manifest.json "default_icon". Fomentar la inclusión de múltiples tamaños para acomodar espacios de 16 ángulos. Se recomienda usar al menos 16x16 y 32x32 tamaños.
{
"Name": "Mi page_action impresionante la extensión",
...
"page_action": {
"default_icon": {
"16": "extension_toolbar_icon16.png",
"32": "extension_toolbar_icon32.png"
}
}
...
}
copiar el código todos los iconos Debe ser cuadrado, de lo contrario puede deformarse. Si no se proporciona ningún icono, Chrome agregará un icono genérico a la barra de herramientas.
Cree y registre otros iconos: use los otros iconos de los siguientes tamaños fuera de la barra de herramientas.
Tamaño del
icono Uso del icono
Icono web 16x16 en página extendida
Las computadoras con Windows 32x32 generalmente requieren este tamaño. Proporcionar esta opción evitará que la distorsión de tamaño se reduzca en 48x48 opciones.
48x48 que se
muestra en la página de administración de extensiones
128x128
mostrado en la instalación y Chrome Webstore
{
"Nombre": "My Awesome Extension",
...
"iconos": {
"16": "extension_icon16.png",
"32": "extension_icon32.png",
"48": "extension_icon48.png",
"128" : "Extension_icon128.png"
}
...
}
复制 代码
Otras funciones de IU
Popup
es un archivo HTML, cuando el usuario hace clic en el icono de la barra de herramientas, se mostrará en una ventana especial. Una ventana emergente funciona de manera muy similar a una página web; puede contener enlaces a hojas de estilo y etiquetas de script, pero no permite JavaScript en línea.
La ventana emergente de muestra de Evento de agua de bebida muestra las opciones de temporizador disponibles. El usuario establece una alarma haciendo clic en uno de los botones provistos.
Ejemplo de segundo 15 minutos 30 minutos Cancelar alarma Copiar el código de configuración anterior puede estar en vivo en browser_action o page_action {"name": "Drink Water Event", ... "browser_action": {"default_popup": "popup.html"}. ..} Copiar código también puede establecer dinámicamente la ventana emergente llamando a o. browserAction.setPopup, pageAction.setPopup chrome.storage.local.get ('igned_in ', function (data) {if (data.signed_in) {chrome.browserAction.setPopup ({popup:' popup.html '});} else {chrome.browserAction.setPopup ({popup: 'popup_sign_in.html'});}}); Copie el código de información sobre herramientas: al pasar el mouse sobre el icono del navegador, utilice la información sobre herramientas para proporcionar a los usuarios una breve descripción o instrucciones.
La información sobre herramientas se ha registrado en browser_action o page_action en el campo "default_title".
{
“Nombre”: “Tab Flipper”,
…
“browser_action”: {
“default_title”: “Presione Ctrl (Win) / Command (Mac) + Shift + Right / Left para voltear pestañas”
}
...
}
Copie el contenido de Tooltips también Puede actualizar browserAction.setTitle y pageAction.setTitle.
Chrome.browserAction.onClicked.addListener (function (tab) {
chrome.browserAction.setTitle ({tabId: tab.id, title: "Estás en la pestaña:" + tab .id});
});
Copiar código Los usuarios de
Omnibox
pueden llamar a funciones extendidas a través de la caja multifunción. Incluya el campo "omnibox" descifrado por el sistema CNC en la lista y especifique la palabra clave. La nueva extensión de muestra de búsqueda de etiquetas en la columna URL usa "NT" como palabra clave.
{
“Name”: “Omnibox New Tab Search”,
…
“omnibox”: {“keyword”: “nt”},
“default_icon”: {
“16”: “newtab_search16.png”,
“32”: “newtab_search32.png "
}
...
}
