crx-esm v0.1.6

crx-esm

Utils as ES modules for chrome extension development

Features

• Hot reload for development installation.
• Load content script programmatically.
• Helper to convert chrome extension API(v2) to Promise-based.

Install

yarn add crx-esm

Usage

background.js

import { ScriptLoader, enableHotReload } from 'crx-esm';

enableHotReload();

const loader = new ScriptLoader(); loader.contentScript = 'content.js'; loader.injectOnClicked = true; loader.injectOnCommands = 'toggle-my-crx';

> background.html
```html
<script type="module" src="background.js"></script>

manifest.json

"background": {
  "page": "background.html",
    "persistent": false
},

See examples for workable examples.

API

• ScriptLoader

  To load the content script programmatically.

Sometimes we don't want to load the content script automatically for the matches. You can use ScriptLoader to load content script from background script. Require browser_action or commands in manifest.json.

ScriptLoader.contentScript (default: 'content.js')

ScriptLoader.injectOnClicked (default: true)

ScriptLoader.injectOnCommands (default: [])

• enableHotReload

  Hot reload your development installation(unpacked) without reinstall manually.

Note: this will not take effect for production installation.

import { enableHotReload } from 'crx-esm';
enableHotReload();

• toPromise

  Convert the legacy callback-based APIs to Promise-based.

See this introductory article: A simple technique to promisify Chrome extension API.

import { toPromise } from 'crx-esm';
toPromise(chrome.tabs.query)({}).then(() => {
  // do something
});

Development

yarn start
yarn build
yarn bump
yarn pub

Author

👤 hankchiutw

• Website: https://hankchiu.tw
• Twitter: @hankchiutw
• Github: @hankchiutw
• LinkedIn: @hankchiutw

Show your support

Give a ⭐️ if this project helped you!