This needs further testing

If both https://google.com and *://*/* have been granted, I think this module will attempt to inject the scripts twice on Google.com (although I have not seen this happening)

Using the new dropOverlappingPermissions function, this module can clean up the additionalPermissions list before trying to inject the scripts.

It seems that my changes last summer broke the tests here even though I don't see anything particularly breaking there and the polyfill itself has its own tests.

• webext-dynamic-content-scripts/package.json

  Line 67 in 07fe554

  "content-scripts-register-polyfill": "^3.2.2",

• https://github.com/fregante/content-scripts-register-polyfill/releases/tag/v4.0.0

Potentially dependent on

• #35

I will add a reproduction demo project ASAP.

Causes issues like: refined-github/refined-github#479

Workarounds: refined-github/refined-github#554

I haven't looked into what's not working, but it doesn't look like the module is injecting the scripts into the allowed hosts.

There's a very good chance that it's just due to:

• fregante/content-scripts-register-polyfill#5
• fregante/webext-permission-toggle#10

Quite difficult, but I wanted to open an issue to link to my last attempt:

fregante/content-scripts-register-polyfill#58 (comment)

We're here hoping that someone will simplify the process of starting Firefox and loading an extension into it without having to copy-paste puppeteer/puppeteer#5532 (comment) or mozilla/web-ext#1927

The tests can be copied almost verbatim from: https://github.com/fregante/content-scripts-register-polyfill/blob/main/test/test.js

The only difference should be that webext-additional-permissions should be mocked to report the manifest host permissions as "additional" in order to test them without having to use permissions.request()

Useful for:

• #45
• #44

That new code is barely tested and would benefit from testing outside the puppeteer (also because it's impossible to test activeTab)

From: https://github.com/pixiebrix/pixiebrix-extension/blob/6ff0e7647fe02e53fb9d3a35f200ed5afd1a3fd2/src/background/util.ts#L29-L44

/** Checks whether a URL will have the content scripts automatically injected */
export async function isContentScriptRegistered(url: string): Promise<boolean> {
  // Injected by the browser
  const manifestScriptsOrigins = browser.runtime
    .getManifest()
    .content_scripts.flatMap((script) => script.matches);

  // Injected by `webext-dynamic-content-scripts`
  const { origins } = await getAdditionalPermissions({
    strictOrigins: false,
  });

  // Do not replace the 2 calls above with `permissions.getAll` because it might also
  // include hosts that are permitted by the manifest but have no content script registered.
  return patternToRegex(...origins, ...manifestScriptsOrigins).test(url);
}

Thanks for putting this together!

This repo uses https://github.com/fregante/content-scripts-register-polyfill for polyfiling browser.contentScripts.register() in Chrome

Just wanted to link to the bug in the other repo, as I hit this problem and it took some sleuthing to find it: fregante/content-scripts-register-polyfill#2

I'm seeing that it actually works 20-25% of the time when the parent tabs URL is an allowed origin. So there must be a race condition in page loading events. (I'm using run_at document_idle, but also tried with document_end)

This standalone download link takes a long time to load and when it does, it shows 404. Same for the sister webext-domain-permission-toggle link.

https://groups.google.com/a/chromium.org/g/chromium-extensions/c/_zKyp9XvIzY/m/a5fV4MTcAgAJ

This can now appear in the manifest:

 "content_scripts": [{
    "js": ["content.js"],
    "matches": ["<all_urls>"],
    "run_at": "document_start"
  }, {
    "world": "MAIN",
    "js": ["page.js"],
    "matches": ["<all_urls>"],
    "run_at": "document_start"
  }],

• Blocked by argos-ci/jest-puppeteer#495
• Last tried in #43

chrome.contentScripts.register seems to be available in Firefox but it does not return a promise, unlike browser.* counterpart. For this reason the permission removed listener cannot call .unregister()

I'm seeing this error when I try to build the polyfill:

webext-dynamic-content-scripts git:master ❯ npm run build

> [email protected] build code/webext-dynamic-content-scripts
> tsc

index.ts:23:36 - error TS2339: Property 'contentScripts' does not exist on type 'typeof chrome'.

23              const registeredScript = chrome.contentScripts.register({
                                                ~~~~~~~~~~~~~~


Found 1 error.

Any ideas why that's happening?

In some cases (most?) you'd also want the content script to be automatically available on the activeTab as well. This would avoid conflicting scripts trying to inject the script via different code paths:

• pixiebrix/pixiebrix-extension#3510

ActiveTab-tracking code can be found here and will likely be extracted, maybe into webext-tools:

• https://github.com/pixiebrix/pixiebrix-extension/blob/3d23b8063637aa5fd8734cabe7d3137cdd616c3a/src/background/activeTab.ts

On top of that, I think it also needs to listen to tabs and manually inject the scripts instead of relying on registerContentScripts. However it seems that the API supports activeTab in MV3: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/registerContentScripts

To preserve the side-effects-only nature of the module, I think it can export an additional entry point:

import 'webext-dynamic-content-scripts/including-activetab';

There's a very rare situation that is no longer covered by webext-dynamic-content-scripts. This is a long list of conditions that have to appear at the same time for the bug to appear:

• You're on Chrome
• Your manifest_version is 2
• Your manifest has multiple objects inside content_scripts
• Your content_scripts mentions the same file twice (for example to be injected onto multiple domains, via manifest)
• Your content_scripts have one of run_at, exclude_matches, all_frames
• Your other content_scripts do not have the same exact property

If this is happening, you should stay on v9 of this module until you upgrade to Manifest v3.

Here's an example extension affected by this limitation:

{
	"manifest_version": 2,
	"content_scripts": [
		{
			"all_frames": true, // Present here, missing from the next one
			"matches": ["https://example.com/*"],
			"js": ["content.js"],
		},
		{
			"matches": ["https://www.example.org/*"],
			"js": ["content.js"],
		}
	]
}

This shouldn't happen with https://github.com/fregante/webext-domain-permission-toggle (untested) but it can happen if the user manually adds permissions.

If manifest.json includes:

{
	"permissions": [
		"https://*.github.com/*",
	]
}

And then the extension calls browser.permissions.request('*://*/*'), neither the browser nor webext-dynamic-content-scripts will deduplicate this with existing permissions, so the scripts will be inserted twice.

Extension of:

• #12

The above issue was fixed with:

But it didn't cover injectToExistingTabs:

This is particularly visible when all_urls is granted, so it always covers all tabs.

Attempted and failed in #63

Example of failure:

  ● static: excludeMatches › should load the content script only in iframe, once

    [object Object] is not supported

      89 | 	it('should load the content script only in iframe, once', async () => {
      90 | 		await expectToNotMatchElement(page, '.web-ext');
    > 91 | 		await expect(iframeOfExcludedParent).toMatchElement('.web-ext');
         | 		      ^
      92 | 		await expectToNotMatchElement(iframeOfExcludedParent, '.web-ext + .web-ext');
      93 | 	});
      94 | });

      at expectPuppeteerInstance (node_modules/expect-puppeteer/dist/index.js:488:11)
      at expectPuppeteer (node_modules/expect-puppeteer/dist/index.js:492:26)
      at Object.expect (test/browser.js:91:9)

  ● dynamic: excludeMatches › should load page and iframe

    [object Object] is not supported

      84 | 	it('should load page and iframe', async () => {
      85 | 		await expect(page).toMatchElement('title', {text: 'Excluded page'});
    > 86 | 		await expect(iframeOfExcludedParent).toMatchElement('title', {text: 'Framed page'});
         | 		      ^
      87 | 	});
      88 |
      89 | 	it('should load the content script only in iframe, once', async () => {

      at expectPuppeteerInstance (node_modules/expect-puppeteer/dist/index.js:488:11)
      at expectPuppeteer (node_modules/expect-puppeteer/dist/index.js:492:26)
      at Object.expect (test/browser.js:86:9)

  ● dynamic: excludeMatches › should load the content script only in iframe, once

    [object Object] is not supported

      89 | 	it('should load the content script only in iframe, once', async () => {
      90 | 		await expectToNotMatchElement(page, '.web-ext');
    > 91 | 		await expect(iframeOfExcludedParent).toMatchElement('.web-ext');
         | 		      ^
      92 | 		await expectToNotMatchElement(iframeOfExcludedParent, '.web-ext + .web-ext');
      93 | 	});
      94 | });

      at expectPuppeteerInstance (node_modules/expect-puppeteer/dist/index.js:488:11)
      at expectPuppeteer (node_modules/expect-puppeteer/dist/index.js:492:26)
      at Object.expect (test/browser.js:91:9)

Test Suites: 1 failed, 1 total
Tests:       10 failed, 6 passed, 16 total

Extracted from #16
This issue is due to fregante/content-scripts-register-polyfill#2 and it should be fixed there

It's possible that a new target is created and destroyed between the time it's detected and the the last file is injected. This shouldn't cause console noise because it's not a real error.

Manifest v3 might have brought some changes that broke this script. I never tested it, but it should be.

Instead of just injecting scripts existing in manifest.json, inject a list of styles and scripts using the same format. This is already possible natively, example:

chrome.tabs.insertCSS(tabId, { file: "vendor/humane-ghosttext.css" });
chrome.tabs.executeScript(tabId, { file: "vendor/humane-ghosttext.min.js" });
chrome.tabs.executeScript(tabId, { file: "scripts/input-area.js" });
chrome.tabs.executeScript(tabId, { file: "scripts/content.js" }, callback);

That would become:

injectContentScripts(tabId, {
  run_at: "document_start",
  css: ["vendor/humane-ghosttext.css"],
  js: [
    "vendor/humane-ghosttext.min.js",
    "scripts/input-area.js",
    "scripts/content.js"
  ]
});

Worth it? It would be nice to provide a common interface.

This might be related to my build setup, but it was working fine on 7.1.2 so I am creating an issue anyway.

ERROR in ./node_modules/content-scripts-register-polyfill/node_modules/webext-polyfill-kinda/index.js 22:34
Module parse failed: Unexpected token (22:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| 
> const chromeP = globalThis.window?.chrome && new NestedProxy(window.chrome);
| 
| export default chromeP;

The README says that this should work:

import {isContentScriptRegistered} from 'webext-dynamic-content-scripts/utils.js';

However, it refuses to import:

[commonjs--resolver] Missing "./utils.js" export in "webext-dynamic-content-scripts" package

As far as I can tell, this is due to the "exports" section of package.json not covering this file:

I tried adding these lines to this section:

		"./utils.js": {
			"types": "./distribution/utils.d.ts",
			"default": "./distribution/utils.js"
		}

and then the import immediately worked.

I'm no Javascript expert, but it seems a bit odd to be declaring each of these files manually in "exports". Can't it be done with a wildcard? And is there any reason not to re-export isContentScriptRegistered from index.ts, so that it can be imported directly from 'webext-dynamic-content-scripts'?

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contentScripts/register

https://developer.chrome.com/extensions/declarativeContent#type-RequestContentScript

https://developer.chrome.com/extensions/permissions#event-onAdded

Edit: Done in refined-github/refined-github#2181

I'll extract it from there at some point