Migrate extension to Manifest V3 and add dark mode theme option#394
Open
eevmanu wants to merge 7 commits into
Open
Migrate extension to Manifest V3 and add dark mode theme option#394eevmanu wants to merge 7 commits into
eevmanu wants to merge 7 commits into
Conversation
…ce worker entry points - Upgrade 'fs-extra' to ^10.1.0 and replace legacy 'node-sass' with Dart 'sass' to fix build compatibility. - Update 'lib/release-script/release-script.js' to use standard Node.js 'fs.createWriteStream' due to fs-extra updates. - Combine 'backend' and 'omnibox' webpack entry points into a single 'background' bundle for MV3 compatibility.
…for MV3 worker compatibility - Rewrite 'Storage.load' and 'Storage.save' using 'Promise' and 'chrome.storage.local' since 'localStorage' is not accessible within MV3 background service workers. - Add a fallback and migration path to load and save legacy options from 'localStorage' when available.
…ure to Manifest V3 - Upgrade manifest_version to 3 and increase minimum_chrome_version to 88. - Register the merged 'assets/background.js' as background service_worker instead of scripts array. - Split host permissions from permissions into host_permissions block. - Update 'web_accessible_resources' format to match the new MV3 object array schema. - Adapt 'GET_OPTIONS' messenger listener to handle asynchronous Promise resolution. - Migrate all 'chrome.extension.getURL' calls to recommended 'chrome.runtime.getURL' API.
- Add a dropdown selector '#optionsTheme' to 'options.html' to let users toggle the options page theme. - Define default 'optionsTheme' configuration as 'dark'. - Support setting and saving the theme choice asynchronously, dynamically toggling '.dark-mode' and '.light-mode' classes on body. - Design complete SCSS styling rules for options page dark mode, including customized background, headers, buttons, and custom CodeMirror syntax coloring. - Implement optionsTheme reset handler in reset button event binding.
There was a problem hiding this comment.
Pull request overview
This PR modernizes the extension toward Manifest V3 compatibility and updates build/runtime pieces accordingly (background/service worker wiring, storage API usage, and dependency updates).
Changes:
- Migrates the extension manifest to Manifest V3 (service worker background, storage permission, MV3-style
web_accessible_resources, updated minimum Chrome version). - Switches options persistence from
localStoragetochrome.storage.localand updates callers to use async load/save. - Consolidates background-related webpack entries and updates build/docs (Sass tooling, README instructions).
Reviewed changes
Copilot reviewed 16 out of 17 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Regenerated lockfile reflecting updated dependency graph and integrity metadata. |
| webpack.config.js | Merges backend + omnibox into a single background bundle entry. |
| README.md | Updates build/load-from-source instructions and clarifies MV3 build output location. |
| package.json | Updates fs-extra, replaces node-sass with a sass alias, and adds sass. |
| lib/release-script/release-script.js | Updates zip output stream creation for newer fs-extra. |
| lib/build-extension-webpack-plugin/build-extension.js | Adds MV3-style web_accessible_resources entry for generated theme CSS files. |
| extension/styles/options-custom.scss | Adds dark/light options-page styling (dark-mode class driven). |
| extension/src/options.js | Updates options load/save flow to async and wires the options theme selector. |
| extension/src/omnibox.js | Updates URL generation to chrome.runtime.getURL for MV3. |
| extension/src/json-viewer/viewer/render-extras.js | Updates options link to chrome.runtime.getURL for MV3. |
| extension/src/json-viewer/storage.js | Moves persistence to chrome.storage.local with Promise-based API and migration path. |
| extension/src/json-viewer/options/defaults.js | Adds default optionsTheme. |
| extension/src/json-viewer/options/bind-reset-button.js | Updates reset flow to async save with error handling. |
| extension/src/json-viewer/load-css.js | Updates URL generation to chrome.runtime.getURL for MV3. |
| extension/src/backend.js | Updates GET_OPTIONS handler to async Storage.load with return true. |
| extension/pages/options.html | Sets default body class and adds the options theme select control. |
| extension/manifest.json | Migrates to MV3 (service worker, permissions/host_permissions, MV3 web_accessible_resources). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
eevmanu
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrate the extension from Manifest V2 to Manifest V3 (MV3) to comply with modern browser extension standards. This includes transitioning the background script and omnibox listener into a unified service worker, refactoring storage access to use asynchronous
chrome.storage.local, and introducing a dark and light mode selector to the options page with updated themes.Detailed Changes
Extension Architecture (Manifest V3 Migration)
manifest_versionto3inmanifest.json.backend.jswith background service worker registration.backgroundservice worker bundle via Webpack config.chrome.extension.getURLwith modernchrome.runtime.getURLin omnibox routing.Storage & Options Layer (Asynchronous Transition)
storage.jsfrom synchronouslocalStorage(which is unavailable in MV3 background workers) to the asynchronouschrome.storage.localAPI.storage.jsthat automatically reads, parses, and migrates existing settings fromlocalStoragetochrome.storage.localwhen available.Storage.load()andStorage.save()to return Promises.trueon Chrome message listeners to allow asynchronous responses.UI Improvements (Dark Mode Support)
optionsTheme) to the extension options page..dark-modebody classes.Build System & Documentation
node-sassto modernsass(Dart Sass).fs-extrato^10.1.0.fs.createOutputStreamcall with standardfs.createWriteStreamin the release scripts.README.mdwith instructions on building and loading the modern Manifest V3 extension.