翻訳ノート：元の記事はMV3が知られる前に書かれました。それにもかかわらず、それはMV3拡張に完全に関連しています（少なくとも今のところ）。そこで、内容に全く矛盾のない「MV3」を付け加えて、少し名前を変えることにしました。誰も知らない場合：MV3は、2021年1月に導入されるChrome拡張機能の新しいフォーマット/標準です。
この記事は、経験豊富なWeb開発者を対象としており、いわゆるReduxの使用に関する問題に対処（および解決）します。Chromeのイベント駆動型（イベント駆動型）拡張機能。
イベント駆動型拡張機能の特異性
イベント駆動型拡張モデルは、2012年にChrome 22で最初に登場しました。このモデルでは、拡張のバックグラウンドスクリプト（存在する場合）は、必要な場合にのみ（主にイベントに応答して）ロード/実行され、何もしないときにメモリからアンロードされます。
Chrome開発者のドキュメントでは、すべての新しい拡張機能にイベント駆動型モデルを使用し、永続モデルを使用して既存の拡張機能に移行することを強くお勧めします。ただし、例外が1つあります（MV3では関連性がなくなったため、MV3での新しいモデルへの移行が必須です。）。ただし、イベント駆動型である場合でも、多くの拡張機能が引き続き永続モデルを使用しているようです。もちろん、それらの多くは、イベント駆動型モデルが知られる前に最初にリリースされました。そして今、彼らの作者は単に新しいモデルに切り替える動機を持っていません。これは（まだ）オプションですが、一方で、バックグラウンドスクリプトだけでなく、他の拡張コンポーネントでも多くの変更が必要であることを意味します。さらに、多くの場合、開発時にクロスブラウザアプローチを使用します。同じソースコードからさまざまなブラウザ用の既製の拡張機能を収集する。イベントドリブンモデルは現在Chromeでのみサポートされており、他のブラウザでサポートされている永続モデルとは大きく異なります。当然、これはクロスブラウザの開発を複雑にします。
ただし、比較的新しいChrome拡張機能の一部も永続モデルを使用しており、イベント駆動型である可能性があります。最終的に、理由は移行の場合と同じです。イベント駆動型モデルと永続型モデルの間には大きな違いがあり、主に拡張機能の状態を管理する方法で表現されます。
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
.
, :
その使用法は元のReduxの使用法と似ていますが、インターフェイスではストア作成者が関数にラップされて非同期で実行され、作成されたストアの代わりにpromiseが返される点が異なります。
インターフェイスの標準的な使用法は次のようになります。
また、async/await
ES 2017以降で利用可能な構文により、このインターフェイスは次のように使用できます。
ソースコードはGithubで入手できます。
また、このインターフェイスはNPMのパッケージとして利用できます。
npm install reduxed-chrome-storage