Webext-inject-content-scripts NPM

webext-inject-content-scripts

WebExtensions: Polyfill for browser.contentScripts.register() for Chrome and Safari.

You can download the standalone bundle and include it in your manifest.json.

npm install webext-inject-content-scripts

import 'webext-inject-content-scripts';

Include the script via manifest.json, then refer to the original contentScripts.register() documentation.

const registeredScript = await chrome.contentScripts.register({
	js: [{
		file: 'myfile.js'
	}],
	matches: [
		'https://google.com/*'
	]
});

Additionally, if you're using webextension-polyfill, you can also use it with the original browser.* name: browser.contentsScripts.register()

const registeredScript = await browser.contentScripts.register({
	js: [{
		file: 'myfile.js'
	}],
	matches: [
		'https://google.com/*'
	]
});

Generally you don't need any permissions other than the host permission you want to register a script on.

However to use allFrames: true you should the webNavigation permission. Without it, allFrames: true will work "with bugs." It won't work:

when the iframe is not on the same domain as the top frame
when the iframe reloads or navigates to another page
when the iframe is not ready when runAt is configured to run (runAt: 'start' is unlikely to work)

webext-options-sync - Helps you manage and autosave your extension's options.
webext-domain-permission-toggle - Browser-action context menu to request permission for the current tab.
webext-dynamic-content-scripts - Automatically inject your content_scripts on custom domains.
webext-detect-page - Detects where the current browser extension code is being run.
webext-content-script-ping - One-file interface to detect whether your content script have loaded.
Awesome WebExtensions: A curated list of awesome resources for Web Extensions development.

4 years ago