{"id":18118082,"url":"https://github.com/mozilla/firefoxcolor","last_synced_at":"2025-04-04T08:09:47.420Z","repository":{"id":37734397,"uuid":"110296952","full_name":"mozilla/FirefoxColor","owner":"mozilla","description":"Theming demo for Firefox Quantum and beyond","archived":false,"fork":false,"pushed_at":"2024-06-25T20:48:03.000Z","size":33024,"stargazers_count":460,"open_issues_count":122,"forks_count":95,"subscribers_count":24,"default_branch":"master","last_synced_at":"2024-10-29T11:01:01.453Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://color.firefox.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mozilla.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-10T22:04:49.000Z","updated_at":"2024-10-29T10:49:51.000Z","dependencies_parsed_at":"2023-02-17T09:46:07.189Z","dependency_job_id":"63292f30-278c-49a5-8ee8-854e6acbd4ed","html_url":"https://github.com/mozilla/FirefoxColor","commit_stats":{"total_commits":584,"total_committers":42,"mean_commits":"13.904761904761905","dds":0.6147260273972603,"last_synced_commit":"2738144bb995d5c3dd0fd604f0e9c9a746103363"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mozilla%2FFirefoxColor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mozilla%2FFirefoxColor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mozilla%2FFirefoxColor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mozilla%2FFirefoxColor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mozilla","download_url":"https://codeload.github.com/mozilla/FirefoxColor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247142074,"owners_count":20890653,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-01T05:08:32.421Z","updated_at":"2025-04-04T08:09:47.401Z","avatar_url":"https://github.com/mozilla.png","language":"JavaScript","readme":"# Firefox Color\n\n[![CircleCI](https://circleci.com/gh/mozilla/FirefoxColor.svg?style=svg)](https://circleci.com/gh/mozilla/FirefoxColor)\n\n## Get Started\n\n1. Install Node 14+ (e.g., using [node version manger][nvm])\n\n1. Clone the repo, install dependencies, start the dev environment:\n   ```\n   git clone https://github.com/mozilla/FirefoxColor.git\n   cd FirefoxColor\n   npm ci\n   npm start\n   ```\n\n   This will start a webpack-dev-server instance at port 8080 and start a\n   watcher that will rebuild the browser extension with every file change.\n\n1. To activate the extension:\n\n   1. Find the XPI for the environment:\n\n      - Locally: `npm run package` which adds an addon.xpi to the root of the project\n\n      - DEV / STAGE: Visit the dev or stage version of the website and click on \"Get Firefox Color\" (i.e., open testing.html) and use one of the referenced XPI files\n\n   2. Now load the XPI (from the previous step) to the browser by one of the following ways:\n\n      - Go to `about:debugging` and click on \"Load Temporary Add-on...\" and add the xpi\n\n      - (or) Go to `about:config` and add setting `xpinstall.signatures.required` and set to `false`. Next drag and drop the XPI to the browser. Note you must use Beta, Dev or Nightly browser with this approach.\n\nnotes:\n\nTo debug the background file, go to `about:debugging` and click the \"Inspect\" button\n\nTo toggle the add-on on and off or remove, you can go to `about:addons`\n\n\n4. Visit `http://localhost:8080` to see the web-based theme editor - changes\n   should be relayed through the temporarily installed add-on and alter the\n   browser theme\n\n[nvm]: https://github.com/creationix/nvm\n\n**Note:** If you have problems seeing the editor at `http://localhost:8080/` on\nyour computer, it's possible that you already have some other service using\nport 8080. You can change the port that Firefox Color uses for local development:\n\n* For Linux \u0026 OS X: `PORT=9090 npm start`\n* For Windows: `.\\node_modules\\.bin\\cross-env PORT=9090 npm start`\n\nThis example switches to port 9090, but you can supply a different port as\nneeded.\n\n## Environment variables\n\nThere are a few environment variables used in building the site and extension\nthat are handy to know about:\n\n- `PORT` - (default: `8080`) Port at which the webpack dev server will start up\n- `NODE_ENV` - (default: `production`) setting to `development` will enable some features for development work\n- `SITE_URL` - (default: `http://localhost:8080`) the URL where the web app is hosted\n- `SITE_ID` - (default: empty string) the ID of the site for the extension - e.g. \"\", \"local\", \"stage\", \"dev\"\n- `DOWNLOAD_FIREFOX_UTM_SOURCE` - host name used in metrics when the button to download Firefox is clicked\n- `LOADER_DELAY_PERIOD` - (default: `2000`) delay in ms used for web site loader, can be set to `0` during development to make the site appear faster but with visual glitches\n\n## Build \u0026 Release\n\nDeploying a development release consists of pushing to the `development` branch\non this repo. Production release consists of pushing to the `production` branch.\n\nUpon push, CircleCI will run the following steps, as defined in the `.circleci/config.yml` file:\n\n* Run gen-environment.sh to define the `SITE_URL` and `ADDON_URL` applicable to the current branch.\n\n* Run code linter\n\n* Build the site for the current branch\n\n* Build the add-ons for all build targets (development, stage, release).\n\n* Run tests on the current branch.\n\nWhen pushed to the development branch, `npm run deploy` is run to deploy the site to Github Pages.\nThe stage and and production branches are updated by a push to an AWS S3 bucket.\n\nThe build includes unsigned xpi files for all branches. To finalize the deployment, the unsigned\nxpi file for the production branch should be uploaded to AMO by an AMO admin\n(who is allowed to upload an add-on with \"Firefox\" in the name).\n\nDeployment for the development branch depends on\n[`GH_TOKEN` being set with an access token from GitHub][ghtoken].\nThe stage and production branches rely on AWS tokens, managed by ops. These\nare currently configured in CircleCI to support deployment after successful\ntest runs.\n\n[ghtoken]: https://github.com/settings/tokens\n\n## Build, test and publish add-on\nThe script `npm run xpi` in `package.json` generates unsigned xpi files, which\nare added to `build/web` (and published to the root of `SITE_URL` by CircleCI),\non all branches (development, stage, production). These XPIs can be loaded at\n`about:debugging` for manual testing.\n\n- `firefox-color-dev-unsigned.xpi` - test with Development (testing only).\n- `firefox-color-stage-unsigned.xpi` - test with Stage (testing only).\n- `firefox-color-unsigned.xpi` - test with Production (release candidate).\n\nAfter passing QA, the XPI can be published by manually uploading it to AMO.\nEvery release requires a version bump, because version numbers cannot be reused.\n\n### Environment list\n\n| Environment | Github Branch                                                           | URL                                     |\n|-------------|-------------------------------------------------------------------------|-----------------------------------------|\n| Development | [development](https://github.com/mozilla/FirefoxColor/tree/development) | https://mozilla.github.io/FirefoxColor/ |\n| Stage       | [stage](https://github.com/mozilla/FirefoxColor/tree/stage)             | https://color.stage.mozaws.net/         |\n| Production  | [production](https://github.com/mozilla/FirefoxColor/tree/production)   | https://color.firefox.com/              |\n\n## UI to install the addon:\n\n* Coming from AMO\n  - The user clicks on the \"Install\" button and after granting permissions, a new tab opens to the addon's home page.\n\n* Coming from the addon's home page:\n  The user can click on the \"Get Firefox Color\" button which will direct the user to a page from where the add-on can be installed, usually AMO.\n\n\n## Notes\n\n- Further reading for themes\n  - Other addons for managing \u0026 creating themes\n    - https://addons.mozilla.org/en-US/firefox/collections/ntim/theming-extensions/\n  - An example of a more complex dynamically changing theme\n    - https://github.com/mdn/webextensions-examples/tree/master/dynamic-theme\n  - Dynamic theme with colors based on favicon\n    - https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/\n  - Theme API\n    - https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/theme\n  - Hacks post on Theme API\n    - https://hacks.mozilla.org/2017/12/using-the-new-theming-api-in-firefox/\n  - theme.getCurrent()\n    - Useful for other webextensions to match current theme colors with their own UIs\n    - Maybe pre-load web page with current theme?\n    - https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/theme/getCurrent\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmozilla%2Ffirefoxcolor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmozilla%2Ffirefoxcolor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmozilla%2Ffirefoxcolor/lists"}