Desarrollo y uso compartido de complementos de Google de tres enlaces con un solo clic de Nuggets

¡Acostúmbrate a escribir juntos! Este es el primer día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

prefacio

El complemento de Google es un complemento desarrollado con tecnologías front-end como html, js y css para mejorar las funciones del navegador. Los complementos que los programadores pueden usar a diario incluyen HackBar, Vue.js devtools. Con la ayuda de los complementos de Google, podemos crear fácilmente nuestras propias páginas web "personalizadas" y navegadores "personalizados".

Durante las vacaciones de Qingming y la situación epidémica en casa, pasé un día en casa y desarrollé un complemento de Google para Nuggets basado en vue3. La dirección de origen del complemento está aquí ~

A través de este artículo, puede aprender a usar vue3.x+ts para desarrollar páginas de complementos de Google (de hecho, es lo mismo que el desarrollo de negocios normal) y adquirir algunos conocimientos básicos sobre el desarrollo de complementos de Google.

Comienzo

Veamos primero el efecto de interacción:

Ordene los siguientes puntos de función interactivos:

1. Haga clic en el icono del complemento para controlar el colapso o la expansión de la barra lateral;
2. El botón de cambio en la barra lateral se usa para controlar si el complemento está habilitado;
3. Los usuarios pueden optar por activar los tres comportamientos de Me gusta, Favorito y Seguir de acuerdo con sus propias preferencias (el valor predeterminado es un clic tres veces y el Me gusta no se puede cancelar);
4. Cuando el complemento esté habilitado, ingrese al artículo de Nuggets y haga clic en Me gusta, puede lograr el efecto de tres enlaces con un solo clic.
5. El estado de los datos del complemento se guarda y la página se actualiza sin perderla

Después de que la función esté clara, podemos comenzar a diseñar ~

El complemento de Google requiere que haya uno en el directorio manifest.json, podemos configurar uno en él background.jspara monitorear el clic del usuario en el ícono del complemento, monitorear la nueva pestaña del usuario, etc., y background.jssiempre se ejecutará en segundo plano.

Luego configuramos otro content.js, que content.jspuede compartir el DOM con la página web y operar el DOM, pero no comparte el js de la página web.Podemos realizar el desarrollo de la barra lateral inyectando iframe en la página e inyectar js para realizar el js lógica que activa tres conexiones con un solo clic.

comienzo

Después de ordenar los puntos de función y diseñar el esquema, puede comenzar a codificar.La estructura del proyecto es la siguiente:

El contenido de la barra lateral es un formulario. Aunque es muy simple, utilicé la pila de tecnología convencional de vue3.x++ vite2.x( NaiveUIuna pequeña prueba ~).

Pasaré el cambio de valor del formulario del reloj y luego comunicaré el mensaje de cambio de valor a otras partes.

La lógica principal de la barra lateral es la siguiente:

export const useAppOn = () => {
  const isAppOn = ref(false)

  watch(isAppOn, newVal => {
    const params = {
      from: iframePart,
      to: backgroundPart,
      key: appOnKey,
      value: newVal
    }
    chrome.runtime?.sendMessage(chrome.runtime.id, params)

    window.parent?.postMessage({
      from: iframePart,
      to: injectPart,
      key: appOnKey,
      value: newVal,
    }, '*')

    chrome.storage?.local.set({ [appOnKey]: newVal })
  })

  chrome.storage?.local.get([appOnKey], res => {
    if (res[appOnKey]) {
      isAppOn.value = !!res[appOnKey]
    }
  })

  return {
    isAppOn,
  }
}
复制代码

background.jsLa lógica de seguimiento es la siguiente:

chrome.runtime.onMessage.addListener(({ from, to, key, value }) => {
  if (from === iframePart && to === backgroundPart && key === appOnKey) {
    if (value === true) {
      // balabala
    } else {
      // yy
    }
  }
})
复制代码

inject-page.jsLa lógica de seguimiento es la siguiente:

window.addEventListener('message', ({ data: { from, to, key, value, initData } }) => {
    if (from === contentPart && to === injectPart && initData) {

      // 初始化数据
    } else if (from === iframePart && to === injectPart && key === appOnKey) {

      // 启动或停止插件
    } else if (from === iframePart && to === injectPart && key === checkItemsKey) {
      // ......
    }
  }, false)
复制代码

La conclusión es que la comunicación de datos de cada parte se logra a través chrome.runtime.sendMessageo a través window.parent.postMessagede,

Después de que el js inyectado pueda obtener los datos, puede simular el comportamiento de una tecla y tres conexiones de acuerdo con los datos del formulario.

const $agreeBtn = document.querySelector('.article-suspended-panel .panel-btn')
  $agreeBtn?.addEventListener('click', () => {
    if ($agreeBtn.className.includes('active') || !pageConfig.isAppOn) {
      // 取消点赞行为就不往下走
      // 未开启插件就不往下走
      return
    }

    if (pageConfig.formData.follow) {
      follow()
    }
    // ......
  })
  
  function follow() {
    const $followBtn = document.querySelector<HTMLElement>('.article-area .follow-button')
    if (!$followBtn.className.includes('followed')) {
      $followBtn.click()
    }
  }
复制代码

Después de escribir el código, al empaquetar, debe compilar ts en js y manifest.jsoncopiar los íconos en el directorio dist

import { exec } from 'child_process'

function main() {
  exec('tsup')
  exec('cp -r chrome/icons dist')
  exec('cp -r chrome/manifest.json dist')
}

main()
复制代码

Problemas encontrados en el proceso de desarrollo, puntos de atención

1. Después de actualizar el código y volver a empaquetar, debe hacer chrome://extensions/clic en el botón Actualizar.

2. Después de instalar o actualizar el complemento, la página web debe actualizarse para que se pueda reinyectar el último js.

3. window.postMessageAl enviar datos de objetos, se informará un error y, en su lugar, se pasará la cadena json.

4. Es necesario especificar el complemento de Google Manifest version. Actualmente lo estoy usando Manifest version 2, pero ya no se recomienda v2 y se abandonará en 2023. Para la versión v3, puede ver esta guía de migración

5. La comunicación de datos de cada parte del complemento será problemática y fácil de confundir.Podemos juzgar pasando los tres valores de from, to y key para evitar confusiones.

6. inject-page.js, iframeEspere hasta que la página se cargue antes de inyectar, de lo contrario, si inyecta al principio, no podrá obtener información de dom como el botón Me gusta

enlaces relacionados

• Nuggets con un clic tres
• Materiales de aprendizaje complementarios

Los complementos de Google son herramientas que, cuando se usan correctamente, pueden ayudarnos a personalizar la funcionalidad, ahorrar tiempo y aumentar la eficiencia. Todavía hay muchas cosas sobre los complementos de Google que este artículo no ha cubierto. Este artículo es solo un punto de entrada. Si los lectores sienten que han ganado algo después de leer este artículo, ¡felicite al autor! ! ! Un clic en tres enlaces, ¡esta vez seguro! ! !