Skip to content
Automatically inject your `content_scripts` on custom domains.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Update build Jun 3, 2019
src Ensure that it has origin permissions Jun 3, 2019
.editorconfig Initial version May 26, 2017
.gitignore
.npmrc Update deps and build Jun 2, 2019
.travis.yml Initial version May 26, 2017
index.d.ts Verify the hostname before trying to inject it Jun 2, 2019
package.json
readme.md Readme: add permissions required by Firefox Nov 16, 2017

readme.md

webext-dynamic-content-scripts (in short: DCS) Travis build status npm version

WebExtension module: Dynamically inject content_scripts

This is an advanced version of chrome.tabs.executeScript/chrome.tabs.insertCSS:

  • It accepts a mixed JS/CSS object just like in manifest.json.

    Example

     DCS.addToTab(tab, {
     	run_at: 'document_start',
     	all_frames: true,
     	css: [
     		'content.css'
     	],
     	js: [
     		'webext-dynamic-content-scripts.js',
     		'jquery.slim.min.js',
     		'browser-polyfill.min.js',
     		'content.js'
     	]
     	// Not supported: all matches and globs properties
     });

    Format details: https://developer.chrome.com/extensions/content_scripts

  • It can inject scripts automatically to all permitted domains, so if you authorize new domains later, DCS will automatically inject content_scripts

    Example

    Specify what you want:

     DCS.addToFutureTabs({js: ['file.js']});

    Or automatically inject ALL scripts already defined in manifest.json's content_scripts, perfect when you want to inject your existing content_scripts to new domains authorized via chrome.permissions:

     DCS.addToFutureTabs();
  • It will inject the scripts only once per tab, automatically, as long as DCS is included in the scripts list (or via import/require)

Install

npm install webext-dynamic-content-scripts

manifest.json

{
	"background": {
		"scripts": [
			"webext-dynamic-content-scripts.js",
			"background.js"
		]
	},
	"content_scripts": [
		{
			"js": [
				"webext-dynamic-content-scripts.js",
				"content.js"
			]
		}
	]
}

webpack, rollup, browserify

// background.js
import DCS from 'webext-dynamic-content-scripts';
// content.js
import 'webext-dynamic-content-scripts';
// Needed to make sure that scripts aren't loaded twice.

Usage

You'll find some simple examples in the 3-point description at the start of this readme. This is a full-feature example:

Your content scripts are enabled on github.com but you want to add custom domains:

In combination with webext-domain-permission-toggle, you can implement the feature with two calls

manifest.json

{
	"permissions": [
		"https://github.com/*",
		"contextMenus",
		"activeTab" // Required for Firefox support (webext-domain-permission-toggle)
	],
	"browser_action": { // Required for Firefox support (webext-domain-permission-toggle)
		"default_icon": "icon.png"
	},
	"optional_permissions": [
		"http://*/*",
		"https://*/*"
	],
	"background": {
		"scripts": [
			"webext-domain-permission-toggle.js",
			"webext-dynamic-content-scripts.js",
			"background.js"
		]
	},
	"content_scripts": [
		{
			"matches": [
				"https://github.com/*"
			],
			"css": [
				"content.css"
			],
			"js": [
				"webext-dynamic-content-scripts.js",
				"content.js"
			]
		}
	]
}

background.js

import DPT from 'webext-domain-permission-toggle'; // only with webpack, etc
import DCS from 'webext-dynamic-content-scripts'; // only with webpack, etc

DPT.addContextMenu();
DCS.addToFutureTabs(/* Default: content_scripts from manifest.json */);

content.js

import 'webext-dynamic-content-scripts'; // only with webpack, etc

API

DCS.addToTab(tab, [scripts])

It will inject the specified scripts to the tab via executeScript and insertCSS.

tab

Type: Tab number

A Tab object or just its id as defined here: https://developer.chrome.com/extensions/tabs#type-Tab

scripts

Type: Object Array

Default: all the JS/CSS files specified in content_scripts in manifest.json

Format details: https://developer.chrome.com/extensions/content_scripts

It can either be an object, like:

{js: ['a.js', 'b.js']}

Or an array of objects (unlikely to be needed but it matches content_scripts exactly):

[
	{js: ['a.js']},
	{js: ['b.js']}
]

DCS.addToFutureTabs([scripts])

Same as DCS.addToTab, but it will automatically listen to new tabs and inject the scripts as needed.

scripts

Same as scripts in DCS.addToTab.

Related

License

MIT © Federico Brigante — Twitter

You can’t perform that action at this time.