JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q46827F
  • License GPL-3.0

Package for adding promotional banners to your extensions with ExBoost

Package Exports

  • exboost-js
  • exboost-js/dist/exboost.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (exboost-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

exboost.js

What Is ExBoost?

ExBoost is a collaborative network of browser extensions looking for more users. Learn more here.

How does ExBoost work?

ExBoost extensions add promotional banners inside their extensions. These banners will show promotions for similar extensions available in the Chrome Web Store. Extensions in the ExBoost network promote each other.

Getting started

  1. Install the exboost-js npm package.

  2. Import exboost-js in your background script

import "exboost-js";

background.js

  1. Define an ExBoost slot by adding <iframe data-exboost-slot="SLOT_ID"></iframe> to your extension's HTML. SLOT_ID should be unique to each slot.
<body>
  <head>
    iframe {
      width: 600px;
      height: 180px;
    }
  </head>
  <section>
    <h1>My extension!</h1>
    <div>Extension content
  </section>

  <iframe data-exboost-slot="popup-slot-1"></iframe>
</body>

popup.html

  1. Import exboost-js anywhere you want to show an ExBoost banner: in your popup, in an options page, or in a content script UI. Call init() to fill the slots.
import ExBoost from "exboost-js";

ExBoost.init();

popup.js

Option 2: Include the JS file directly

  1. Download exboost.js and add it to your extension.
app/
├── manifest.json
├── popup.html
├── options.html
└── scripts/
    ├── background.js
    └── exboost.js
  1. Import exboost.js in your background script
import "scripts/exboost.js";

background.js

  1. Define an ExBoost slot by adding <iframe data-exboost-slot="SLOT_ID"></iframe> to your extension's HTML. SLOT_ID should be unique to each slot.
<body>
  <head>
    iframe {
      width: 600px;
      height: 180px;
    }
  </head>
  <section>
    <h1>My extension!</h1>
    <div>Extension content
  </section>

  <iframe data-exboost-slot="popup-slot-1"></iframe>
</body>

popup.html

  1. Import exboost.js anywhere you want to show an ExBoost banner: in your popup, in an options page, or in a content script UI. Call init() to fill the slots.
import ExBoost from "scripts/exboost.js";

ExBoost.init();

popup.js

Troubleshooting

Having trouble? Enable debug mode with ExBoost.init({ debug: true }). ExBoost will log to the console.

Using ExBoost with React

ExBoost.init() should be called after the <iframe> exists. Example:

const MyComponent = () => {
  useEffect(() => {
    ExBoost.init();
  }, []);

  return (
    <div>
      <iframe data-exboost-slot="popup-header-slot"></iframe>
    </div>
  );
};

Examples

For an example of how to install ExBoost, refer to the Example Chrome Extension