angular/devtools
AleksanderBodurri a910c8328a build(devtools): migrate to manifest v3 (#47575)
Previously we built DevTools for all browsers with version 2 of the manifest file format.

This commit includes a number of refactors and API additions that will enable us to build DevTools with version 3 of the manifest file format.

The manifest v3 build of Angular DevTools has been tested on Chrome, Edge, and Safari.

Notably, the Firefox version of Angular DevTools remains as a manifest v2 build. Firefox does not yet support manifest v3 in it's latest stable release. When Firefox makes this transition, a follow up PR will update the Firefox manifest file to version 3.

Because Firefox still needs v2, we need to keep some old v2 APIs around in our background page (service worker in v3) that will execute conditionally based on if the extension was built for v2 or v3. This is determined with the chrome.runtime.getManifest().manifest_version API.

PR Close #47575
2022-10-11 22:47:22 +00:00
..
cypress refactor(devtools): run tslint --fix on devtools codebase 2022-01-26 16:35:31 -05:00
docs refactor(devtools): remove support for v11 and older versions of Angular (#45883) 2022-05-05 15:28:42 -07:00
projects build(devtools): migrate to manifest v3 (#47575) 2022-10-11 22:47:22 +00:00
src build: simplify sass consumption of Angular CDK/Material in devtools (#46642) 2022-07-01 10:20:51 -07:00
tools build: update dev-infra packages and account for build-tooling split from ng-dev (#46976) 2022-08-02 09:37:37 -07:00
.gitignore refactor(devtools): prepare codebase for migration to angular/angular repo 2021-11-21 20:23:18 -05:00
BUILD.bazel build: simplify sass consumption of Angular CDK/Material in devtools (#46642) 2022-07-01 10:20:51 -07:00
CONTRIBUTING.md build: clean up references to old master branch (#45856) 2022-05-04 16:23:33 -07:00
cypress.json refactor(devtools): bring the angular devtools directory into the root bazel workspace 2022-01-26 16:35:31 -05:00
DEVELOPING.md feat(devtools): renaming shell-chrome (#44952) 2022-04-12 18:41:37 +00:00
packages.bzl refactor(devtools): bring the angular devtools directory into the root bazel workspace 2022-01-26 16:35:31 -05:00
README.md docs: simplify the DevTools readme and add publishing instructions (#45905) 2022-05-09 13:58:06 -07:00
tsconfig.json refactor(compiler-cli): remove enableIvy options (#47346) 2022-09-06 11:33:48 -07:00
tsconfig.spec.json refactor(devtools): prepare codebase for migration to angular/angular repo 2021-11-21 20:23:18 -05:00
tslint.json build(devtools): disable the "Rebase PR on target branch" circleci job so that the PR that merges the unrelated history of rangle/angular-devtools can be successfully merged into angular/angular 2022-01-26 16:35:30 -05:00

Angular DevTools

Angular DevTools is a browser DevTools extension for debugging and profiling Angular applications.

Installing and Running locally

To setup your local development environment for Angular DevTools, perform the following steps:

git clone git://github.com/angular/angular
cd angular
yarn
yarn run devtools:devserver

Publish Angular DevTools

To publish Angular DevTools to Firefox or Chrome stores:

  1. Update the version of the corresponding manifest file. Currently, Angular DevTools uses different versioning compared to the rest of the packages within the monorepo.
  • manifest.chrome.json for Chrome
  • manifest.firefox.json for Firefox
  1. Build the extension:
  • yarn devtools:build:chrome for Chrome
  • yarn devtools:build:firefox for Firefox
  1. Find the extension production assets in dist/bin/devtools/projects/shell-browser/src/prodapp relative to the root of the Angular monorepo
  2. Zip the files in the directory
  3. Upload them to the corresponding store

Firefox

  1. Go to the Firefox Addons page
  2. For email enter devrel@angular.io
  3. Find the password on Valentine
  4. Setup Google Authenticator with the 2FA QR code. You can find the QR code on Valentine

Chrome Web Store

  1. Go to the extension page
  2. Make sure your email is part of the Google Group we use for publishing the extension
  3. Navigate to "Developer Dashboard"
  4. Enter your account credentials
  5. You should be able to change the publisher to "Angular"