PWA a rozšíření do nejrošířenějších prohlížečů, které zobrazuje historická data cen na největších českých a slovenských e-shopech vč. Reálné slevy.
PWA and browser extension shows historical prices for biggest czech and slovak e-commerce websites.
We are using package.json
scripts
(run yarn run
for a list) for project automation.
If you only want to build the Firefox extension, it is enough to install Docker and follow the guide in the next step.
You will need:
nvm
for Node.js version management)yarn
(we use Workspaces. You can't use npm
. Sorry)jq
(for Extension distribution)We have installation scripts for Debian and macOS. See scripts
folder for installation scripts for your system.
On debian run bash ./scripts/install-debian-tools.sh
- this will use apt-get to install jq
.
On macOS run bash ./scripts/install-macos-tools.sh
- this will use homebrew to install jq
, nvm
and pulumi
.
Install Docker for your OS (all OSes are supported) and then execute the following command from the root of the project:
./scripts/build-firefox-extension-dockerized.sh
Execution of this command might take a while. Built extension will be placed in the dist
folder.
All extensions (except Safari version) will be built to ./dist
folder by calling the npm build
script.
Firefox supports Dark and Light themes for action icons, and we are optimizing action icons for these.
Chrome doesn't support action icons theming via manifest.json
so we use background.js
script to
add support for themes programmatically. We are removing background.js
script, and
its entry in manifest, in the build step with other unnecessary files.
Content script content.js
is written in ESM, but ESM is not widely supported in content scripts.
So we use simple bundle script yarn build:extension
to convert ESM to IIFE bundle.
To build Firefox extension run yarn build:firefox
. It will create extension-dist
folder
for development time and packaged extension in ./dist
folder.
To build Chrome extension run yarn build:chrome
. It will create package in ./dist
folder.
yarn build:extension
to get latest bundle script, domains (eshops) permissions and current version for Safariyarn start:safari
> Product > Archive > Distribute App** Use autosigning feature and use the TopMonks s.r.o Apple developer team account. If this fails with missing private key, download one named "itunes Mac App Distribution mac_app.cer" from TopMonks 1Password.
To check the current version in package.json
, manifest.json
and about.html
run
./version.sh
Update to new version run
./version.sh x.y.z
For seamless development experience we have yarn watch:extension
script with incremental builds
on source files changes.
We also have convenient script yarn start:chrome
and yarn start:firefox
to start browsers with
an already registered extension and automatic reloading on changes.
For visual testing at scale, there is ./scripts/screenshotter.mjs
. This will run Chrome with an installed extension
and take a screenshot of embedded widget on every supported e-shop. You can find resulting pictures in ./screenshots
folder.
The Release process of the extension is fully automated. To start the release process, you have to:
./version.sh
to see the current version and then bump it with ./version.sh x.y.z
extension-x.y.z
,
where x.y.z
is the version you set in the previous step. Website has its own Blendid configuration.
Start www.hlidacshopu.cz
development with the following command:
op run --env-file=.env --no-masking -- yarn start:www.hlidacshopu.cz
Sites can automatically upload images to Cloudinary and generate Cloudinary URLs.
Cloudinary needs to be properly configured. Our Cloudinary credentials are stored in 1password team vault Hlidac shopu
.
Use 1password CLI to get credentials
and set them as environment variables:
op run --env-file=.env --no-masking -- yarn build:www.hlidacshopu.cz
If this step is skipped, you will get the following error:
cloudinaryUrl Unknown cloud_name
You can enable Cloudinary aut-upload by setting cloudinary: true
in task-config.json
file. You can also configure
source and destination paths in path-config.json
file. By default, will be uploaded everything in cloudinary
directory.
Auto-uploader will generate images.json
data file, that will be loaded into Nunjucks context via collections: ["images"]
setting in task-config.json
file.
We have implementation of helpers to generate Cloudinary URLs. One cloudinaryUrl
filter for Nunjucks templates
that should work in conjunction with generated images.json
. Usage should be as follows:
<img src="https://github.com/topmonks/hlidac-shopu/raw/trunk/{{ images["picture.png"]["public_id"] | cloudinaryUrl(width=300, height=240) }}" alt="">
You can use all supported transformations in JS SDK, for more details see Cloudinary JS SDK.
cd lib
npm login
npm publish --access public --tag latest
yarn up @hlidac-shopu/lib -i
© 2018-2024 TopMonks s.r.o.; Licensed under EPL-2.0