hankchiutw / crx-esm

Utils for chrome extension development as esm

DEPRECATED

This project has been moved to https://github.com/kromejs/krome

---

krome

Modern chrome extension development with ESM

Features

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

Install

yarn add krome

Usage

background.js

import { ScriptLoader, enableHotReload } from 'krome';

enableHotReload();

const loader = new ScriptLoader();

background.html

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

manifest.json

"background": {
  "page": "background.html",
  "persistent": false
},
"browser_action": {
  "default_title": "Click to launch",
  "name": "Click to launch"
},
"permissions": ["activeTab"],

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 'krome';
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 'krome';
toPromise(chrome.tabs.query)({}).then(() => {
  // do something
});

Development

yarn start
yarn build
yarn bump
yarn pub

Show your support

Give a ⭐️ if this project helped you!