Lusito / webextension-polyfill-ts

This is a TypeScript ready "wrapper" for the WebExtension browser API Polyfill by Mozilla

Repository from Github https://github.comLusito/webextension-polyfill-tsRepository from Github https://github.comLusito/webextension-polyfill-ts

Investigage contributing to DefinitelyTyped

Lusito opened this issue · comments

Might be a good idea to try this:
https://github.com/DefinitelyTyped/DefinitelyTyped#create-a-new-package

Things to consider:

  • It should still work with mockzilla-webextensions
  • Switching to the @types way should be straight forward without too much work.

@fregante The PR has been merged to DT, so the first version of @types/webextension-polyfill should be available soon. Feel free to give it a try.

Awesome! I'll be testing it at some point.

Do you plan on moving away from the webextension-polyfill-ts package since now import browser from 'webextension-polyfill' will use the @types package automatically (or TypeScript will prompt to download it)?

If everything works out as expected, I will keep this repository to maintain the code generator, but the npm package webextension-polyfill-ts will be deprecated.

But first I want to be sure that everything works fine for all scenarios. I will port my extensions and also https://github.com/Lusito/mockzilla-webextension to use the @types version. Before these tasks are complete, this ticket remains open. No promise when I'll get to the tasks though.

Oh, and first I'll need to write a migration guide as well. And after the tasks are complete, I should also make a PR to adjust the webextension-polyfill readme file (the one by mozilla).

Excellent! I think the migration will look something like this?

- import {browser, Permissions} from 'webextension-polyfill-ts'
+ import browser, {Permissions} from 'webextension-polyfill'

Or how I generally use @types/chrome:

- import {browser, Permissions} from 'webextension-polyfill-ts'
+ import browser from 'webextension-polyfill'
+ // const list: browser.Permissions = {/**/}

The first one is correct for migrating from webextension-polyfill-ts.

Not sure how you used @types/chrome before, but this is how you would then declare a constant with the type of Permissions:

import browser, { Permissions } from "webextension-polyfill";
const list: Permissions.Permissions = {};

Why write Permissions twice? One is the Namespace and one is the Interface itself.

Yeah, what I meant to focus on was avoiding the explicit namespace import because they're (maybe) available on browser itself.

Example: (ignore the fact that browser is a global) https://github.com/sindresorhus/refined-github/blob/afa8da1a27e80f6364a3e68ab4b4c5a7c1916d2e/source/background.ts#L12

	openUrls(urls: string[], {tab}: browser.runtime.MessageSender) {

Whereas with the current -ts library I'd probably had to explicitly import Runtime:

import {Runtime} from 'webextension-polyfill-ts'
	openUrls(urls: string[], {tab}: Runtime.MessageSender) {

Yeah, I understand what you're getting at. Didn't have the time to try that.

Feel free to find a way to add this as a feature to the definitely-typed branch

Haven't tested the new package yet, but it does work on the old one:

Screen Shot 4

All done as far as I can see

This is great, thanks for the migration guide

Do you think it would be possible to also publish these types for the browser global to replace the other package and have a single type generator for both?

It is possible, but it's also error-prone, since then those who use it in the import way won't get notified about not importing it and they won't get auto importing via the IDE.

For that use-case, I'd recommend creating a file global.d.ts with this content:

import type { Browser } from "webextension-polyfill";

declare global {
    const browser: Browser.Browser;
}

Yes it would have to be its own package in order to avoid that specific situation, but the manual solution also sounds great! It might be worth adding it to the docs

done

This doesn't seem to work

Screen Shot 11

It seems that const browser is already typed as Browser, in fact if I rename it it passes. 🤔

begif

It seems that just import "webextension-polyfills" works since it's poly filling the browser global already.