Create a Live Preview of a Chrome Extension with Eager

During my Product Hunt browsing, I came across Product Dark, a chrome extension to change Product Hunt to use a darker color scheme. The extension is useful, but at the moment you have to install it into your browser to see how it works and if you like it. An Eager preview, on the other hand, will let potential users try it in a virtual browser before deciding to install.

Create the App

The first step is to create an Eager App from the extension. Eager apps can contain any combination of JavaScript and CSS. In this case, the extension is a single CSS file which needs to get placed on the page being previewed.

To create the app, all I need to do is add a simple install.json file in the project’s directory:

{
  "resources": {
    "head": [
      {
        "type": "style",
        "src": "./product-dark.css"
      }
    ]
  }
}

That will instruct Eager how to install this tool. If I drop that file into my project’s directory, I can now open the directory in the Eager App Tester and try it out on ProductHunt.com: App Tester.

Upload App

Now that I have an app, I need to upload it to a source control repository so it can be imported into Eager. If your project is already open source, all you have to do is commit the install.json file. I’ve created my project on GitHub.

The last step is to create a release, as that’s how Eager keeps track of project versions. It’s important to label the release based on SemVer, in this case v1.0.0.

Create App

Visit the app creation page and upload your app. Fill out whatever fields you would like, and create the app. It won’t be listed in the App Store unless it’s approved, but it will be immediately available for users who know the app’s id or alias, and for you to create embedded previews.

Share the Preview

You can now allow your users to preview the app. I’ve given my app the alias phdark, so I can send users to: https://eager.io/app/phdark/install for a preview. I can optionally add a page for it to be previewed on, or specify some preview options, see the docs for more details. The details I filled out during app creation will also be placed on a landing page for me to use to promote my app.

Create an Embedded Preview

You can share your Eager preview far and wide, but a time may come when you want to show your preview on your own website or landing page. We can do that by using the Embedded Preview API. In our case we added the Embedded Preview to a landing page template we already had. You can view it here.

This is the code which powers that preview:

preview = new EagerPreview({
  frameSrc: 'http://producthunt.com',
  el: document.querySelector('.eager-preview'),
  appId: 'phdark',
  options: {}
})

preview.render();

Where the page includes the https://preview.eager.io/preview.js file, and includes an element with the class eager-preview for the preview to be rendered into.

After deploying that page, our preview was live. As always, if you have any questions about creating apps or embedded previews, you can reach out to [email protected].

Like this post? Share it with your followers.

Sign up to get our next post delivered to your inbox.

Follow us to get our latest updates.