Codebase

Navigate the Codebase using the tree view. Use the filters to highlight where various files are grouped to aid understanding.

Getting Started Commands

docker compose up --build: Start the Docker container and build the application.

VERSION=<EXTENSION_VERSION> ./bin/package_extension.sh: Package the extension with the specified version.

npm run build: Build the application using Webpack.

./bin/run_tests.sh: Execute the unit tests for the application.

npm test: Run the tests using Karma in single-run mode with ChromeHeadlessNoSandbox.

git pull: Update the local repository by pulling the latest changes.

git checkout master: Switch to the master branch.

git tag -a vX.Y.Z -m "tl;dr changelog.": Create a new annotated tag for the release with a changelog message.

git push origin vX.Y.Z: Push the newly created tag to the remote repository.

Navigate to the GitHub releases: Access the releases section on GitHub.

git diff v0.2.0..v0.3.0: Compare the changes between two release versions.

Navigate to the CI Job: Access the Continuous Integration build job.

gh attestation verify path/to/release.zip --owner Screenly: Verify the downloaded release file using the GitHub CLI.

Project Structure

Below is a short description of the key directories of the project to aid you when understanding where key files are located.

.github/ - This directory contains GitHub-specific configuration files and workflows for the project.

.github/workflows/ - This subdirectory contains YAML files defining GitHub Actions workflows for the project.

.github/workflows/build.yaml - This file defines the workflow for building the Chrome extension.

.github/workflows/lint.yaml - This file defines the workflow for running linting checks on the project.

.gitignore - This file specifies which files and directories should be ignored by Git.

.idea/ - This directory contains IntelliJ IDEA-specific configuration files and settings for the project.

.idea/dictionaries/ - This subdirectory contains custom dictionaries for IntelliJ IDEA's code completion feature.

.idea/dictionaries/stripe.xml - This file is a custom dictionary for IntelliJ IDEA related to the Stripe payment platform.

.idea/misc.xml - This file contains various miscellaneous settings for IntelliJ IDEA.

.idea/modules.xml - This file defines the project's modules and dependencies.

.idea/screenly-chrome-extension.iml - This file is the IntelliJ IDEA project file for the Chrome extension.

.idea/vcs.xml - This file contains version control system settings for IntelliJ IDEA.

.idea/watcherTasks.xml - This file defines tasks for IntelliJ IDEA's File Watchers feature.

bin/ - This directory contains scripts used for building and running the Chrome extension.

bin/host_eslint.sh - This script runs ESLint checks on the project files.

bin/package_extension.sh - This script builds and packages the Chrome extension.

bin/run_tests.sh - This script runs the unit tests for the project.

docker-compose.yml - This file defines services and configurations for a Docker Compose environment.

Dockerfile - This file contains instructions for building a Docker image for the project.

eslint.config.mjs - This file contains ESLint configuration options for the project.

karma.conf.js - This file contains configuration options for the project's unit testing framework, Karma.

LICENSE - This file contains the project's license information.

package-lock.json - This file stores the exact versions of dependencies installed in the project.

package.json - This file contains metadata and configuration information for the project, including its dependencies.

README.md - This file contains documentation and instructions for using the project.

src/ - This directory contains the source code for the Chrome extension.

src/assets/ - This subdirectory contains static assets for the extension, such as images and stylesheets.

src/assets/images/ - This subdirectory contains images used in the extension.

src/assets/images/screenly-logo-128.png - This is a 128x128 pixel version of the extension's logo.

src/assets/images/screenly-logo-16.png - This is a 16x16 pixel version of the extension's logo.

src/assets/images/screenly-logo-32.png - This is a 32x32 pixel version of the extension's logo.

src/assets/images/screenly-logo-48.png - This is a 48x48 pixel version of the extension's logo.

src/assets/js/ - This subdirectory contains JavaScript files for the extension.

src/assets/js/boot-options.mjs - This file initializes the extension's options page.

src/assets/js/boot-popup.mjs - This file initializes the extension's popup window.

src/assets/js/main.mjs - This is the main JavaScript file for the extension.

src/assets/js/options.mjs - This file handles the extension's options page logic.

src/assets/js/popup.mjs - This file handles the logic for the extension's popup window.

src/assets/scss/ - This subdirectory contains SCSS stylesheets for the extension.

src/assets/scss/style.scss - This file contains the main styles for the extension.

src/assets/scss/sweetalert-icons.scss - This file contains custom icons for SweetAlert2 alerts used in the extension.

src/lib/ - This directory contains third-party libraries used in the extension.

src/manifest.json - This file contains metadata and configuration information for the Chrome extension.

src/options.html - This file is the HTML template for the extension's options page.

src/popup.html - This file is the HTML template for the extension's popup window.

src/test/ - This directory contains unit tests for the extension.

src/test/spec/ - This subdirectory contains Jest test spec files.

src/test/spec/all.js - This file runs all the tests in the src/test/spec directory.

src/test/spec/test-main.js - This file contains tests for the extension's main script.

src/test/spec/test-popup.js - This file contains tests for the extension's popup window.

src/test/tests.html - This file is a test harness for testing the extension's popup window.

webpack.common.js - This file contains common configurations for Webpack, the module bundler used in the project.

webpack.dev.js - This file contains development-specific configurations for Webpack.

webpack.prod.js - This file contains production-specific configurations for Webpack.

Entrypoints

Below are files we identified as entrypoints for to the codebase. This is where the application starts and a good place to start when learning.

background.js - Path: /background.js

content.js - Path: /content.js

manifest.json - Path: /manifest.json

popup.js - Path: /popup.js

Codebase

Getting Started Commands

Project Structure

Entrypoints

Explanation

Graph

Symbols

Entrypoints