Note de traduction : l'article original a été écrit avant que MV3 ne soit connu. Néanmoins, il est totalement pertinent pour les extensions MV3 (du moins pour le moment). Par conséquent, j'ai décidé de changer légèrement son nom, en ajoutant la mention "MV3", ce qui ne contredit pas du tout le contenu. Si quelqu'un n'est pas au courant: MV3 - le nouveau format / standard pour les extensions Chrome, devrait être introduit en janvier 2021.
Cet article, destiné aux développeurs Web expérimentés, examine (et résout) le problème de l'utilisation de Redux dans le soi-disant. extensions de Chrome basées sur les événements.
Spécificité des extensions événementielles
Le modèle d'extension événementielle est apparu pour la première fois dans Chrome 22 en 2012. Dans ce modèle, le script d'arrière - plan de l' extension (le cas échéant) est chargé / exécuté uniquement lorsque cela est nécessaire (principalement en réponse à des événements) et déchargé de la mémoire lorsqu'il ne fait rien.
La documentation pour les développeurs Chrome conseille vivement d'utiliser le modèle événementiel pour toutes les nouvelles extensions et de migrer pour les extensions existantes à l'aide du modèle persistant . Il y a cependant une exception ( dans MV3 ce n'est plus pertinent, y compris donc le passage à un nouveau modèle dans MV3 est obligatoire). Mais il semble que de nombreuses extensions utilisent toujours le modèle persistant, même si elles peuvent être basées sur des événements. Bien sûr, beaucoup d'entre eux ont été publiés pour la première fois avant que le modèle événementiel ne soit connu. Et maintenant, leurs auteurs ne sont tout simplement pas incités à passer à un nouveau modèle. D'une part, c'est (encore) optionnel, mais d'autre part, cela signifie la nécessité de nombreux changements, non seulement dans le script d'arrière-plan, mais aussi dans d'autres composants d'extension. De plus, beaucoup utilisent une approche multi-navigateurs lors du développement.en collectant des extensions prêtes à l'emploi pour différents navigateurs à partir du même code source. Le modèle événementiel n'est actuellement pris en charge que dans Chrome et est très différent du modèle persistant pris en charge par d'autres navigateurs. Naturellement, cela complique le développement entre navigateurs.
Cependant, certaines des extensions Chrome relativement récentes utilisent également un modèle persistant et peuvent être basées sur des événements. En fin de compte, la raison est la même que dans le cas de la migration: il existe des différences significatives entre les modèles événementiels et persistants, qui s'expriment principalement dans la façon dont nous gérons l'état d'extension.
Le problème 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
.
, :
Son utilisation est similaire à celle du Redux original, sauf que dans notre interface, le créateur du magasin est enveloppé dans une fonction et exécuté de manière asynchrone, renvoyant une promesse au lieu du magasin créé.
L'utilisation standard de l'interface ressemble à ceci:
De plus, avec la syntaxe async/await
disponible à partir de ES 2017, cette interface peut être utilisée comme ceci:
Le code source est disponible sur Github.
Cette interface est également disponible sous forme de package sur NPM:
npm install reduxed-chrome-storage