Events are only listened in the same context that requested them

[fregante]

This polyfill will exclusively work if permissions are requested/removed from the same page where the listener is. That means, if you run chrome.permissions.request in the background page, only the same exact page will receive the event.

This works

// In background.js
chrome.contextMenus.onClicked.addListener(() => {
  chrome.permissions.request({
    origins: [`https://youtube.com/*`]
  });
});

// ALSO in background.js
chrome.permissions.onAdded.addListener(({ origins }) => {
  if (!origins || origins.length === 0) {
    return;
  }

  console.log("New origins!", origins);
});

This doesn't

If you want to request from options.html or popup.html, it won't work.

// In options.html
document.querySelector(".add-youtube").addEventListener("click", () => {
  chrome.permissions.request({
    origins: [`https://youtube.com/*`]
  });
});

// In background.js
chrome.permissions.onAdded.addListener(({ origins }) => {
  if (!origins || origins.length === 0) {
    return;
  }

  console.log("New origins!", origins);
});

Add your interest in this issue or send a PR to add support via runtime.sendMessage

[namukang]

Hey, I'm interested in this use case! Does #4 support the any context case or is it still a work in progress? Thanks for creating this polyfill.

[fregante]

It should support any context that supports chrome.runtime.onMessage but I haven’t tested it at all. Would you be able to give it a try?

[namukang]

Sure thing! I'll give it a go and let you know how it works out.

[namukang]

I'm having trouble with setting this up and wondering if you have any ideas.

I'm trying to use the any-context branch that you've set up by running
npm install fregante/webext-permissions-events-polyfill#any-context

When I try to import the package using import 'chrome-permissions-events-polyfill';, I get the following error:

ERROR in ./src/background/background.ts
Module not found: Error: Can't resolve 'chrome-permissions-events-polyfill' in '/Users/dskang/Code/hide-likes-everywhere/src/background'
 @ ./src/background/background.ts 2:0-44

Looking in node_modules, I'm seeing that when installing from a GitHub branch, all the source files are missing:

Any thoughts on how I can get this set up?

[fregante]

Ah yes you'd have to build it first, you can install directly. Probably something like:

git clone https://github.com/fregante/webext-permissions-events-polyfill.git
cd webext-permissions-events-polyfill
git fetch origin
git checkout -b any-context origin/any-context
npm i
npm run build
npm link

And then in your project

npm link webext-permissions-events-polyfill

[namukang]

I got around the above issue by just copying and pasting the entire file to test it out, but I realized I won't be able to use it because I'm using webextension-polyfill which uses browser instead of chrome so I get the error that browser.permissions.onAdded is undefined even with the polyfill.

Since the API for browser is different from chrome (e.g. browser.permissions.request doesn't take a callback), I'm planning to just use message passing using browser.runtime.sendMessage to invoke the permissions listener from a different context.

Even though I don't think I can use this polyfill, thanks for putting it together!

[fregante]

This polyfills doesn't use the browser API but the chrome API, which is available in both browsers regardless of webextension-polyfill

In Refined GitHub I'm using this polyfill together with webextension-polyfill and I'm calling browser.permissions.onAdded.addListener

https://github.com/sindresorhus/refined-github/blob/2d80172ffaee2e2290a43e42040f37bcc0fad820/source/options-storage.ts#L79

[fregante]

That extension works both in Firefox and Chrome:

• in Chrome browser.permissions.onAdded.addListener just mirrors chrome.permissions.onAdded.addListener via webextension-polyfill
• in Firefox browser.permissions.onAdded.addListener is added by this polyfill explicitly

[fregante]

If browser.permissions.onAdded is undefined in Firefox, then this code isn't running.

[namukang]

Hm, gotcha. I'll play around with it a bit more and let you know it goes. Thanks!

[namukang]

So I've been banging my head against the wall for the last few hours trying to figure this out (thought maybe it had to do with me using webextension-polyfill-ts instead of webextension-polyfill) but it had to do with the fact that the any-context branch is behind master and doesn't include the code to add onAdded to browser.permissions.

Once I rebased any-context onto master, everything worked as intended and I was able to confirm that the polyfill works across contexts. Whew, thought I was taking crazy pills for a while there!

[fregante]

Indeed, sorry for the misunderstanding, I didn't realize that I had made those important changes after I wrote that PR.

I just published a prerelease under 1.0.2-1. If you're still on this issue could you test it out?

npm install webext-permissions-events-polyfill@1.0.2-1

[namukang]

Sure thing, I'll give it a try and let you know how it goes.

[namukang]

Works great! Thanks again for your work on this. 🙏🏽

[fregante]

Does it work correctly across contexts? I should test it out a bit more

[namukang]

Yup, that was the part that I tested (but of course, feel free to test more).

I requested the permission from a non-background page and the onAdded listener worked from the background script.

[fregante]

It kinda works but it's also buggy. Removing a permission results in 3 callbacks:

1. onAdded with the object {origins: ['https://removed'], permissions:[]} 🤷‍♂️
2. onRemoved with the object {origins: ['https://removed']}
3. onAdded with the object {origins: ['https://removed']}

Needs more work

[namukang]

Ah, definitely should've mentioned that I only tested adding a permission and just checked if it worked as expected end-to-end so I'm glad you tested it much more thoroughly than I did!

[fregante]

Firefox 77 is out with native support!

[namukang]

Amazing! Thanks @fregante.