epos

Appearance

Getting Started ​

Your First Project ​

First, you need to install Epos from Chrome Web Store. After installation, open https://epos.dev/@devkit, a built-in development environment which allows you to connect your projects to Epos.

📁 my-project
  📄 epos.json

To get started, we need to connect our project to Epos. For this, let's first create a new folder, for example my-project, and inside this folder, create a epos.json file. This file is the main configuration file for your project and it will also be referred to as project spec. Let's start with a minimal configuration:

json
{
  "name": "my-project"
}

Name should be lowercased and contain only letters, digits and hyphens.

Now we are ready to connect this project to Epos extension. Go back to https://epos.dev/@devkit, click on the Add Project button, and select my-project folder.

After selecting the folder, Epos will read epos.json file and connect project to Epos. Any changes you make inside my-project will be automatically picked up by Epos. Do not close https://epos.dev/@devkit tab, as it is required for Epos to work.

How does it work?

Epos uses File System Access API. This API is currently supported only in Chromium-based browsers. When you select a folder, Epos extension gets access to this folder and all its contents. Epos will keep this access as long as https://epos.dev/@devkit tab is open.

For now, our project does nothing. Let's add some functionality to it.

Epos rethinks extension development process and setup. Instead of defining manifest.json and configuring Service Worker, popup and other pages, Epos takes this approach: you tell epos what css and js code to load and where. All configuration is done inside epos.json file.

So let's create script.js file inside my-project folder:

html
📁 my-project
  📄 epos.json
  📄 script.js

script.js:

js
console.log('Hello from Epos!')

Let's load this js file on example.com website. For this, we need to update epos.json file:

json
{
  "name": "my-project",
  "matches": "https://example.com/", 
  "load": "script.js"
}

You do not need to refresh or reload anything, Epos devkit (assuming you have it open) will automatically pick up any changes. Now navigate to https://example.com/, open DevTools and you should see Hello from Epos! message in the console.

If you update script.js file, for example change the message, you will see new message after tab refresh. If you want tab to be reloaded automatically, simply add ?reload to the url, like this: https://example.com/?reload. Epos will automatically reload the tab when you make changes to your project files.