Nota de traducción : El artículo original se escribió antes de que se conociera MV3. Sin embargo, es completamente relevante para las extensiones MV3 (al menos por el momento). Por lo tanto, decidí cambiar levemente su nombre, agregando la mención de "MV3", que no contradice en absoluto el contenido. Si alguien no lo sabe: MV3 , el nuevo formato / estándar para las extensiones de Chrome, debería presentarse en enero de 2021.
Este artículo, dirigido a desarrolladores web experimentados, aborda (y resuelve) el problema de usar Redux en el llamado. Extensiones impulsadas por eventos ( impulsadas por eventos) de Chrome.
Especificidad de las extensiones impulsadas por eventos
El modelo de extensión controlado por eventos apareció por primera vez en Chrome 22 en 2012. En este modelo, el script de fondo de la extensión (si lo hubiera) se carga / ejecuta solo cuando es necesario (principalmente en respuesta a eventos) y se descarga de la memoria cuando no hace nada.
La documentación para desarrolladores de Chrome recomienda encarecidamente utilizar el modelo basado en eventos para todas las extensiones nuevas y migrar las extensiones existentes mediante el modelo persistente . Sin embargo, hay una excepción ( en MV3 ya no es relevante, por lo que la transición a un nuevo modelo en MV3 es obligatoria). Pero parece que muchas extensiones todavía usan el modelo persistente, incluso si pueden estar controladas por eventos. Por supuesto, muchos de ellos se lanzaron por primera vez antes de que se conociera el modelo impulsado por eventos. Y ahora sus autores simplemente no tienen ningún incentivo para cambiar a un nuevo modelo. Por un lado, esto es (todavía) opcional, pero por otro lado, significa la necesidad de muchos cambios, no solo en el script de fondo, sino también en otros componentes de extensión. Además, muchos utilizan un enfoque de navegador cruzado al desarrollar.mediante la recopilación de extensiones listas para usar para diferentes navegadores desde el mismo código fuente. El modelo basado en eventos actualmente solo es compatible con Chrome y es significativamente diferente del modelo persistente compatible con otros navegadores. Naturalmente, esto complica el desarrollo de varios navegadores.
Sin embargo, algunas de las extensiones de Chrome relativamente más nuevas también usan un modelo persistente y pueden estar controladas por eventos. En última instancia, el motivo es el mismo que en el caso de la migración: existen diferencias significativas entre los modelos impulsados por eventos y los persistentes, que se expresan principalmente en la forma en que gestionamos el estado de extensión.
El problema de Redux
— , -. - ( .. ), , . Redux.
Redux — , , . Redux .
, " " — Redux, . ( ), . , Webext Redux, . - - - . .
(persistent) , , . (, ) , . , , Webext Redux.
- , , , , . , , .. ( ). .
, chrome.storage
/ / . ( ) , chrome.storage
, API , .
API chrome.storage
, — . — , , " ".
, , -, . , , .
— API chrome.storage
Redux, Redux. , chrome.storage
, . , Redux - . - chrome.storage
Redux, , Redux chrome.storage
).
— Redux- chrome.storage
, chrome.storage
Redux. API chrome.storage
Redux, (store) Redux. createStore
Store
( Redux). :
, , Store
. ReduxedStorage
.
getState
subscribe
, .. chrome.storage
: get
onChanged
. , Store
, . , get
chrome.storage
ReduxedStorage
, onChanged
, . . getState
. subscribe
: - , onChanged
.
getState
subscribe
, chrome.storage
Store.dispatch
. set
, Redux, Redux , , dispatch
. - dispatch
ReduxedStorage
. . Redux , , Redux. , .
, , - . , , . , dispatch
, , "" createStore
, "" Store.dispatch
, dispatch
. , , , chrome.storage
, . chrome.storage.onChanged
, .
: chrome.storage:get
, . chrome.storage:get
, ( ). , init
, , , chrome.storage:get
. init
Redux, , , chrome.storage
.
ReduxedStorage
:
: chrome.storage
(this.key
), () chrome.storage.onChanged
, chrome.storage:get
. , , .. chrome.storage
.
, , - , this.state
, chrome.storage:set
, . . Redux dispatch
this.state
, , .. this.state
. , . 2- dispatch
this.state
, - chrome.storage:set
. , .
, dispatch
, Redux. ( 100 ), . — . dispatch
:
, , . Redux. , Redux, middleware, Redux Thunk. Redux Thunk , , . :
delayAddTodo
'ADD_TODO'
1 .
dispatch
, this.buffStore.getState
this.buffStore.subscribe
. this.buffStore.subscribe
1 dispatch
, this.buffStore
null
( 100 dispatch
). dispatch
, .. , subscribe
.
, , .. , , Redux. , — , - , delayAddTodo
. , , Redux dispatch
. , this.buffStore
, , lastStore
. , this.buffStore
, lastStore
subscribe
. , subscribe
lastStore
, this.buffStore
, " "). subscribe
, / lastStore
, .
, , ..:
-
this.areaName
,this.key
/ . - , API
chrome.storage
, ,WrappedStorage
.
, :
Su uso es similar al del Redux original, excepto que en nuestra interfaz el creador de la tienda está envuelto en una función y se ejecuta de forma asincrónica, devolviendo una promesa en lugar de la tienda creada.
El uso estándar de la interfaz se ve así:
Además, con la sintaxis async/await
disponible a partir de ES 2017, esta interfaz se puede utilizar así:
El código fuente está disponible en Github.
Además, esta interfaz está disponible como paquete en NPM:
npm install reduxed-chrome-storage