Anmerkung zur Übersetzung : Der Originalartikel wurde geschrieben, bevor MV3 bekannt wurde. Trotzdem ist es (zumindest für den Moment) für MV3-Erweiterungen völlig relevant. Aus diesem Grund habe ich beschlossen, den Namen leicht zu ändern und "MV3" zu erwähnen, was dem Inhalt überhaupt nicht widerspricht. Wenn jemand nicht weiß: MV3 - das neue Format / Standard für Chrome-Erweiterungen, sollte im Januar 2021 eingeführt werden.
Dieser Artikel richtet sich an erfahrene Webentwickler und untersucht (und löst) das Problem der Verwendung von Redux im sogenannten. ereignisgesteuerte (ereignisgesteuerte) Erweiterungen von Chrome.
Spezifität ereignisgesteuerter Erweiterungen
Das ereignisgesteuerte Erweiterungsmodell wurde erstmals 2012 in Chrome 22 veröffentlicht. In diesem Modell wird das Hintergrundskript der Erweiterung (falls vorhanden) nur bei Bedarf (hauptsächlich als Reaktion auf Ereignisse) geladen / ausgeführt und aus dem Speicher entladen, wenn nichts unternommen wird.
In der Chrome-Entwicklerdokumentation wird dringend empfohlen, das ereignisgesteuerte Modell für alle neuen Erweiterungen zu verwenden und für vorhandene Erweiterungen mithilfe des persistenten Modells zu migrieren . Es gibt jedoch eine Ausnahme ( in MV3 ist sie nicht mehr relevant, daher ist der Übergang zu einem neuen Modell in MV3 obligatorisch). Es sieht jedoch so aus, als würden viele Erweiterungen immer noch das persistente Modell verwenden, auch wenn sie möglicherweise ereignisgesteuert sind. Natürlich wurden viele von ihnen zuerst veröffentlicht, bevor das ereignisgesteuerte Modell bekannt wurde. Und jetzt haben ihre Autoren einfach keinen Anreiz mehr, auf ein neues Modell umzusteigen. Dies ist einerseits (noch) optional, andererseits bedeutet dies, dass viele Änderungen erforderlich sind, nicht nur im Hintergrundskript, sondern auch in anderen Erweiterungskomponenten. Darüber hinaus verwenden viele bei der Entwicklung einen browserübergreifenden Ansatz .indem Sie vorgefertigte Erweiterungen für verschiedene Browser aus demselben Quellcode sammeln. Das ereignisgesteuerte Modell wird derzeit nur in Chrome unterstützt und unterscheidet sich erheblich von dem von anderen Browsern unterstützten persistenten Modell. Dies erschwert natürlich die browserübergreifende Entwicklung.
Einige der relativ neueren Chrome-Erweiterungen verwenden jedoch auch ein dauerhaftes Modell, obwohl sie ereignisgesteuert sein können. Letztendlich ist der Grund derselbe wie bei der Migration: Es gibt signifikante Unterschiede zwischen ereignisgesteuerten und persistenten Modellen, die sich hauptsächlich in der Art und Weise äußern, wie wir den Status der Erweiterung verwalten.
Das Redux-Problem
— , -. - ( .. ), , . 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
.
, :
Die Verwendung ähnelt der des ursprünglichen Redux, mit der Ausnahme, dass der Store-Ersteller in unserer Benutzeroberfläche in eine Funktion eingebunden und asynchron ausgeführt wird und anstelle des erstellten Stores ein Versprechen zurückgibt.
Die Standardnutzung der Schnittstelle sieht folgendermaßen aus:
Da die Syntax async/await
ab ES 2017 verfügbar ist, kann diese Schnittstelle wie folgt verwendet werden:
Der Quellcode ist auf Github verfügbar.
Auch diese Schnittstelle ist als Paket auf NPM verfügbar:
npm install reduxed-chrome-storage