什么是 redux-webext
redux-webext 是一款用于 Chrome/Edge 扩展程序开发的 Redux 库。它提供了开箱即用的处理扩展程序的各种异步操作的方法，例如更新标签页，搜索历史记录等。
使用 redux-webext 可以让开发人员更加专注于编写业务逻辑而非处理浏览器相关操作的代码。
安装
使用 npm 安装：
npm install redux-webext
创建 Redux Store
在使用 redux-webext 之前，需要先创建一个 Redux Store 实例。在创建之前，需要安装 redux 和 redux-webext 的 middleware：
npm install redux redux-webext
在创建 Store 时，需要传入 redux-webext 的 middleware，示例如下：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ---------------- -- ---------------------- - ---- --------------- ------ ----------- ---- ------------- -- ---- ----- - ------------ - ---------- ----- ---------------- - ------------------------- ----- ----- - ------------ ------------ --------------------------------- --
创建 Redux Action
在 redux-webext 中，Redux Action 应该返回一个 Promise，在 Promise 中进行异步操作，例如更新浏览器的标签页：
-- -------------------- ---- -------
------ -------- ---------------- ----------------- -
------ ---------- -- -
------ --- ----------------- ------- -- -
------------------------- ----------------- -- -- -
--------------------------
---
---
--
-在上述示例中，我们更新了标签页的信息，并返回了更新后的信息。这里涉及到 Chrome 扩展程序的相关 API，具体可以参考 chrome.tabs。
创建 Reducer
在 redux-webext 中，Reducer 可以保持不变，一般我们只需要定义一个空的 Reducer：
export default function rootReducer(state = {}, action) {
return state;
}创建 Background 页面
在 Chrome 扩展程序中，Background 页面用于处理扩展程序的各种事件及页面跳转等。在使用 redux-webext 后，我们可以将其作为一个 Provider 提供给 App 使用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ - ---------------- -- ---------------------- - ---- ---------------
------ ----------- ---- -------------
------ --- ---- --------
----- ---------------- - -------------------------
----- ----- - ------------
------------
---------------------------------
--
----------------
--------- --------------
---- --
------------
-------------------------------
--示例代码
在这里给出一个简单的示例代码，实现了在浏览器地址栏输入搜索关键词后自动搜索并展示搜索结果。
创建 Redux Action
-- -------------------- ---- -------
------ ----- ------ - ---------
------ -------- ------------- -
------ ---------- -- -
------ --- ----------------- ------- -- -
----------------------- ----- ----- -- --------- -- -
---------- ----- ------- -------- ------- ---
-----------------
---
---
--
-创建 Reducer
-- -------------------- ---- -------
------ - ------ - ---- -------------
------ ------- -------- ----------------- - - -------- -- -- ------- -
------ ------------- -
---- -------
------ -
---------
-------- ---------------
--
--------
------ ------
-
-创建 App
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- - ---- --------------
------ - ------ - ---- -------------
-------- ----- -------- ------ -- -
----- ------- --------- - -------------
----- ------------- - ------- -- -
-----------------------------
--
----- ------------ - ------- -- -
-----------------------
--------------
--
------ -
-----
----- ------------------------
------ ----------- ------------- ------------------------ --
------- -----------------------------
-------
----
--------------------- -- -
--- ----------------
-- ----------------- ----------------
--------------
----
-----
---
-----
------
--
-
----- --------------- - ------- -- -
------ - -------- ------------- --
--
------ ------- ------------------------ - ------ --------创建 Background 页面
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ - ---------------- -- ---------------------- - ---- ---------------
------ ----------- ---- -------------
------ --- ---- -------------------
----- ---------------- - -------------------------
----- ----- - ------------
------------
---------------------------------
--
----------------
--------- --------------
---- --
------------
-------------------------------
--
------------------------------------------------ -- -
-------------------- ---- ------------ ---
---总结
使用 redux-webext 可以让开发人员更加专注于编写业务逻辑而非处理浏览器相关操作的代码。本文介绍了如何在 Chrome/Edge 扩展程序中使用 redux-webext，通过一个实例代码演示了如何获取浏览器历史记录并实现搜索功能。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cbe