webext-content-scripts

webext-content-scripts

Utility functions to inject content scripts from a WebExtension.

Tested in Chrome, Firefox, and Safari.

Sponsored by PixieBrix :tada:

Install

You can download the standalone bundle and include it in your manifest.json. Or use npm:

npm install webext-content-scripts

// This module is only offered as a ES Module
import {injectContentScript} from 'webext-content-scripts';

Usage

injectContentScript(tabId, scripts)

Like chrome.tabs.executeScript and chrome.tabs.injectCSS but with the same API as the manifest, so you can inject multiple JS and CSS at once. It accepts either an object or an array of objects.

const tabId = 42;
injectContentScript(tabId, {
	run_at: 'document_idle',
	all_frames: true,
	match_about_blank: true,
	js: [
		'contentscript.js'
	],
	css: [
		'style.css'
	],
})

injectContentScript({
	tabId: 42,
	frameId: 56
}, [
	{
		js: [
			'jquery.js',
			'contentscript.js'
		],
		css: [
			'bootstrap.css',
			'style.css'
		],
	},
	{
	run_at: 'document_start',
		css: [
			'more-styles.css'
		],
	}
])

Related

• webext-options-sync - Helps you manage and autosave your extension's options. Chrome and Firefox.
• webext-storage-cache - Map-like promised cache storage with expiration. Chrome and Firefox
• webext-domain-permission-toggle - Browser-action context menu to request permission for the current tab. Chrome and Firefox.
• webext-additional-permissions - Get any optional permissions that users have granted you.
• webext-detect-page - Detects where the current browser extension code is being run. Chrome and Firefox.
• web-ext-submit - Wrapper around Mozilla’s web-ext to submit extensions to AMO.
• Awesome-WebExtensions - A curated list of awesome resources for WebExtensions development.

License

MIT © Federico Brigante