Skip to content

Rework extension so that controls are bound to page where they are easier to use instead of in the popup, rework html files to make use of react, unhide divs if all elements hidden#49

Draft
barrymun wants to merge 22 commits into
chris-mosley:mainfrom
barrymun:unhide-divs-if-all-elements-hidden
Draft

Rework extension so that controls are bound to page where they are easier to use instead of in the popup, rework html files to make use of react, unhide divs if all elements hidden#49
barrymun wants to merge 22 commits into
chris-mosley:mainfrom
barrymun:unhide-divs-if-all-elements-hidden

Conversation

@barrymun

@barrymun barrymun commented Jan 17, 2024

Copy link
Copy Markdown
Contributor

changes

  • completely reworking the extension so that the settings controls are bound to the page instead of in the popup
    • this means that we no longer have to deal with the popup context being reset every time it is loaded
    • settings are visible or invisible on the page (depending on the user's preferences) by using a toggle set in the bottom-right of the page (similar to the intercom chat widget)
    • popup is now more of an info display for the user
    • included instructions in the popup to show the user where the new controls are
  • all ui facing elements now make use of react instead of regular html
  • @mui is the chosen ui library
  • webpack build settings updated to handle these new pages
  • the page container is injected into the amazon.<whatever> page where an iframe renders the relevant component
  • webpack settings updated to include a plethora of new tools such as build analysers
  • webpack build size reduced to ~ 740kb (further improvement possible, but this is decent for now)
  • old ux of the extension has been preserved as much as possible with some new features such as a light/dark mode
  • unhide search results if all search results have been hidden by the extension

webpack build size analysis

webpack-build-size-analysis

…s as the settings can be retrieved using the getSettings function
…for simplicity, remove the name key from package.json and setting it in common/manifest.json, as package.json does not allow spaces in the text value
…ncies and config, adding temp files for comparison with older popup script, new utility functions, support for translations (i18n), working on chrome but not on firefox (issue with script-src directive)
…search result query selector (it was previously grabbing divs that were not search results), rename popup.tsx to controls.tsx, adding flash-message context and component
…lve one final issue with port disconnection errors in the extension, ensure we wait for the settings to exist in the use-settings context, remove getMessage function as it is no longer required (using next-i18n)
…his is now managed from a container bound to the page using the content script, the container can be toggled opened|closed using a toggle with the extension logo, popup is now more informational, adding light|dark mode, adding missing icons, rounded the corners of the icons for a cleaner look, various typings changes for webpack, additional installs, altering the post-build script slightly, updating the messages to handle new keys (added to all translations files)
… as opposed to everything in a particular lib, adding some webpack analyser tools
…on page load (transition applied immediately when it should be delayed)
@barrymun barrymun changed the title Unhide divs if all elements hidden Rework extension so that controls are bound to page where they are easier to use, rework html files to make use of react, unhide divs if all elements hidden Jan 20, 2024
@barrymun barrymun changed the title Rework extension so that controls are bound to page where they are easier to use, rework html files to make use of react, unhide divs if all elements hidden Rework extension so that controls are bound to page where they are easier to use instead of in the popup, rework html files to make use of react, unhide divs if all elements hidden Jan 20, 2024
…or directory structure so that it is cleaner, moving types into a @types directory at the same level as the src directory
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant