Create cross-browser WebExtension plugin and then integrate devias-kit inside -- 2

I am looking for a skilled developer with experience in creating cross-browser WebExtension plugins (from scratch, or by taking the existing boilerplate as a basis). The plugin must be written in JavaScript, NodeJs and support most popular browsers.

The essence of the task:

Phase 1:
Уou need to add a button (let's call it show-dashboard-button) next to the cart button (top right, see screenshot) on redbubble.com.
State of button is always disabled except if user stays on `Products Search` or `Designer's shop` pages (seems like this pages have such url-template):

1. https://www.redbubble.com/shop/{QUERY}{HTTP_GET_PARAMS}
2. https://www.redbubble.com/people/{USERNAME}/shop{HTTP_GET_PARAMS}

{QUERY}, {USERNAME}, {HTTP_GET_PARAMS} -- is just placeholders for some text (or params) in url

for example
https://www.redbubble.com/shop/Cats
https://www.redbubble.com/shop/?query=Cats&ref=search_box
https://www.redbubble.com/people/nikury/shop
https://www.redbubble.com/people/nikury/shop?artistUserName=nikury&iaCode=all-departments&sortOrder=trending

If user clicks on this show-dashboard-button, plugin should render devias-kit's dashboard (all its reactjs-components tree) on top of redbubble page's content. It means that all dashboard functionality should work the same way as part of plugin as it works in standalone project (standalone project preview https://mui.com/store/previews/devias-kit/) - even navigating between dashboard pages from left dashboard's menu and so on. Sample Devias-kit's source codes available in attachments (I'll give you Devias Kit Pro to work with after awarding).

So main goal is to integrate Devias-Kit Pro to work as browser-plugin (and then add simple info in dashboard pages -- more details below).

Phase 2:
Add 'close button' (let's call it close-dashboard-button) to dashboard reactjs components tree (view attached image). When we click on this 'close-dashboard-button' plugin should stops render this dashboard components tree and that's why user sees original redbubble web-page's content again (no original page content reloading needed).

In other words when you click on the show-dashboard-button, a dashboard have to be displayed/rendered. By clicking on close-dashboard-button it hides the dashboard and show original redbubble's page (with show-dashboard-button visible)

Phase 3:
Add settings page with such options:
1) User (Text, default to `John`)
2) Dashboard Theme (enum of Dark/Light, default to `Light`)

Store its values to global redux store (e.g. with webext-redux).
Render this options' values to dashboard as text (e.g. "UserName is `John`", "Theme is `Dark`" depending on real values of settings) -- in any position

If we change this options on settings page we should see this changes in dashboard immediately (So we can know that redux store really synchronized across all plugin's scripts).

Redux store state (so and all stored settings) should be available after browser re-openning.

Phase 4:
1) Along with settings options rendered in Phase 3 we need to render actual redbubble's url we stay on (let's name it rb-url), we can see it in a browser address-bar. So we need to render its' value as a text, like so: "URL is `https://www.redbubble.com/people/nikury/shop`"
2) Also we need to request asynchronously this rb-url (with fetch-function or something like that available in devias-kit utils wrappers or nodejs) and when this request finished we need to display fetched content size in bytes as text, like so:

"Size of web-page is {SIZE}bytes."

{SIZE} - is placeholder for real size of web-page from fetch-results

Async web-page requesting should be done with redux-toolkit slices (I'll give you full source-code of Devias-Kit PRO where async features already integrated, and some samples are available)

PS: I split task description by phases just for simplicity to explain mine goals (nothing else)

---
Required characteristics:

Supported browsers:
Firefox (must)
Chrome (must)
Opera (preferable)

Required packages:
reactjs, webpack, webext-redux (or similar if there is better), and so on (mostly required by dashboard)

npm scripts should contain standard scripts list useful for future development and releasing, signing and uploading it to webstore (planed to use GitHub workflow). Plugin build should be done in the same way as devias dashboard do it (seems like it use webpack).
For me it mostly means that in release build no readable plugin content should be available to end-user (so it should be webpacked/minified/obfuscated or something like that). In other words even with the power of browser-development-console user couldn't see readable plugin source-code.

An example of a desired useful set of npm scripts for plugin can be found here (just example):

https://github.com/alexroldugin/bebop/blob/use_global_redux_store/package.json

As boilderplate you can get this project https://github.com/alexroldugin/bebop (if you can upgrade it's packages list to actual versions) or some another useful modern plugin-development boilerplate (please, offer your options) based on webpack, reactjs and so on. Also you can create plugin from scratch (or based on devias-kit sources) if it's better for you.

Requirements:
- Experience in developing cross-browser WebExtension plugins for Chrome and Firefox
- Proficiency in integrating external libraries like devias-kit.
- Skills in cross-browser plugin development
- Skills in reactjs, redux, webpack, redux-toolkit
- Strong knowledge of JavaScript, HTML, and CSS.