- Chrome & Firefox extension that replaces new tab page with widgets and fresh image every day.
- Live example: https://hello-extension.netlify.com
- Chrome store link: https://chrome.google.com/webstore/detail/hello/olenfgbgcphkaipfeohfjpagibimmpke
- Firefox store link: https://addons.mozilla.org/en-US/firefox/addon/hello-new-tab/
- install
npm ci - run in development mode
npm run start - run tests, type check and prettier check
npm run validate - build
npm run build
- check if
CHANGELOG.mdis properly filled and date is updated - up versions in
CHANGELOG.md,package.jsonandmanifest.json - make commit with message
prepare VERSION_NUMBER - run
node ./scripts/release.js - go to https://github.com/Hurtak/hello/actions/ and download the release tag build artifacts
hello-src.zipandhello-build.zip - Chrome
- go to https://chrome.google.com/webstore/devconsole
- upload new version
hello-build.zip
- Firefox
- go to https://addons.mozilla.org/en-US/developers/addon/hello-new-tab/versions/submit/
- and upload new version
hello-build.zip Do You Need to Submit Source Codeanswer yes and uploadhello-src.zip
- Chrome CSP
- Because of Chrome plugins CSP policy we cannot have inline scripts unless we mention their sha256+base64 value in
manifest.jsonincontent_security_policyfield. Create React App includes some inline scripts by default so we would either need to have some build pipeline that extracts these scripts value and ads its sha256+base64 into manifest.json or we could useINLINE_RUNTIME_CHUNK=falseenvironment variable that puts these scripts into external file. - Another inline script is
window.GLOBAL_PERF_TIMESTAMP = Date.now();that is used for performance measuring. This one is added manually intomanifest.json. Side note:performance.timeOriginseemed to return wrong timings, investigate further in the future
- Because of Chrome plugins CSP policy we cannot have inline scripts unless we mention their sha256+base64 value in
- Create React App does not support testing files that have name
test.ts, only files with*.test.tsor*.spec.tspatterns, so we go around this by calling testsspec.test.ts - Global state is available in dev mode on
window._state. - Bing API does not provide CORS headers, so we have
./hello-cors-proxyproject that proxies the requests.s
wicg-inert- remove polyfill, once supported by browsers
- Icon by Alice Noir with slight modifications by me.
- chrome store
- images without settings button
- hotkeys (esc) do not work when input is focused
- show changelog somewhere in menu
- decimal places in age configurable
- animations
- use react-spring
- animate view transitions
- animate menu height
- also menu bugs
- no when menu height content is extended, it lags behind content
- when menu height content is collapsed, it happens instantly
- animate text appear/disappear in menu
- background image switching seems slow and buggy sometimes
- conditional updated is broken when we change clocks showSeconds prop, overall behavior seems strange investigate!
- add calendar widget?
- add another image providers?
- images
- try to load image from cache, if it is there display it, if not only then display offline fallback
- bing image of the day
- download once a hour, not on every page view?
- when downloaded and it is new one, should we immediately switch to new one, or on next page view?