-
Install Node 8.9.4+ (e.g. using node version manger)
-
Clone the repo, install dependencies, start the dev environment:
git clone https://github.com/mozilla/FirefoxColor.git cd FirefoxColor npm install npm start
This will start a webpack-dev-server instance at port 8080 and start a watcher that will rebuild the browser extension with every file change.
-
In Firefox 57 + open
about:debugging
and load thebuild/extension/manifest.json
file. -
Visit
http://localhost:8080
to see the web-based theme editor - changes should be relayed through the temporarily installed add-on and alter the browser theme
Note: If you have problems seeing the editor at http://localhost:8080/
on
your computer, it's possible that you already have some other service using
port 8080. You can change the port that Firefox Color uses for local development:
- For Linux & OS X:
PORT=9090 npm start
- For Windows:
.\node_modules\.bin\cross-env PORT=9090 npm start
This example switches to port 9090, but you can supply a different port as needed.
Deploying a development release consists of pushing to the development
branch
on this repo. Production release process is TBD.
The script npm run release:dev
in package.json
takes care of the following:
-
Set
ADDON_URL
andSITE_URL
vars to point at mozilla.github.io/FirefoxColor -
Build the site
-
Build & sign the add-on
-
Copy the signed add-on into the site
-
Deploy the site to Github Pages
Signing depends on WEB_EXT_API_KEY
and WEB_EXT_API_SECRET
environment
variables being set for use by web-ext sign
. Deployment depends on
GH_TOKEN
being set with a personal access token from GitHub. These
are currently configured in CircleCI to support deployment after successful
test runs.
-
Links to docs and calls-to-action to learn & make more complex themes
-
Make editor local only to extension? Only show preview on web?
-
Social sharing buttons
-
Pre-made curated themes (via link?)
-
Tweak build & release for prod where add-on & site will be at different URLs and neither on github
- Further reading for themes
- Other addons for managing & creating themes
- An example of a more complex dynamically changing theme
- Dynamic theme with colors based on favicon
- Theme API
- Hacks post on Theme API
- theme.getCurrent()
- Useful for other webextensions to match current theme colors with their own UIs
- Maybe pre-load web page with current theme?
- https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/theme/getCurrent