If I write something im gonna do it here

[Dreamlinerm]

You should add the webextension-polyfill types for typescript
https://www.npmjs.com/package/@types/webextension-polyfill
pnpm install --save @types/webextension-polyfill

[Dreamlinerm]

Also is there a good way to tell if a context-script is run in Firefox or in chrome except from the user agent?

[Dreamlinerm]

nvm i can check if the namespaces browser and chrome exist

[mubaidr]

You should add the webextension-polyfill types for typescript https://www.npmjs.com/package/@types/webextension-polyfill pnpm install --save @types/webextension-polyfill

We already have this package in devDependencies:

vite-vue3-browser-extension-v3/package.json

Line 27 in f47629c

"@types/webextension-polyfill": "^0.12.1",

[Dreamlinerm]

ah I don't know why I missed it sry.

[mubaidr]

No issue man! It happens!

[Dreamlinerm]

I finished migrating all the content scripts and the action popup.
Everything should be working now, even tho I didn't test the specific features the code didn't change only the types so they should still work the same.
I only need to migrate parts of the normal settings page and make a light theme, since I can easily now.

Btw. I added a checkStoreReady function to wait for the fetched keys from the localstorage because it will use the default values otherwise(which is not really the point of a store), should I add this to your repo, it is not allways necessary depending how this is handled by each application?
ah I did not try to use manifest V2, I will do that next.
I will make a reference to the template along the lines of: I built this extension with the vue-3 template.

[mubaidr]

I think checkStoreReady is application specific.

[Dreamlinerm]

hmm I am trying to replace the manifest v3 in the build folder with v2 because otherwise @crxjs/vite-plugin will throw an error

[Dreamlinerm]

I am an adblock extension, why is chrome pushing V3??? what do you think

[mubaidr]

As per your manifest file, I see no compatibility issue with manifest 3.

[Dreamlinerm]

I am using webrequest blocking function, it does has to do with permissions not compability with the file directly.

[mubaidr]

Understandable!

[Dreamlinerm]

my current functions I could maybe migrate, but i want to add more not less adblocking 😂

[Dreamlinerm]

@mubaidr I tested everything on Firefox and everything works now, apart from phone I might test that later.

[Dreamlinerm]

I wanted to try the public repo but I get a circular dependency issue for some reason

[Dreamlinerm]

Is the background permission required, no right?
You cannot use the pinia store in the background script in chrome, otherwise the script will fail, bcause in V3 background scripts cannot run continiously anymore probs.
I mean the content scripts can use it and that's most important, for the background script I just copy the code from before which did it manually lol.

[mubaidr]

But I guess we can use pinia store in background too. I need to test it though.

• we already have pinia initialization utility
• import pinia and pass to stores when used in background js
• but this will also need documentation update for guide on how to use pinia in background script.

[Dreamlinerm]

pinia is only useful to share between multiple contexts and my content scripts only need one context, that's why I don't really need it, but it is possible in content-scripts.
In the background script in chrome piniia dindnt work i think because there background scripts get closed

[mubaidr]

pinia is only useful to share between multiple contexts and my content scripts only need one context, that's why I don't really need it, but it is possible in content-scripts. In the background script in chrome piniia dindnt work i think because there background scripts get closed

Again, by multiple contexts here. I mean we can have multiple pages in chrome extensions. Options/ popup/ content/ devtools/ sidepanel. By having pinia we have single place to handle data for all in typed manner.

OfCourse it is not necessary, but I guess this makes data handling much easier. (also because we don't have to remember data/ variables for multiple pages)

[Dreamlinerm]

pinia is only useful to share between multiple contexts and my content scripts only need one context, that's why I don't really need it, but it is possible in content-scripts. In the background script in chrome piniia dindnt work i think because there background scripts get closed

Again, by multiple contexts here. I mean we can have multiple pages in chrome extensions. Options/ popup/ content/ devtools/ sidepanel. By having pinia we have single place to handle data for all in typed manner.

OfCourse it is not necessary, but I guess this makes data handling much easier. (also because we don't have to remember data/ variables for multiple pages)

I am talking about the content-scripts (which get inserted in the page).

[mubaidr]

pinia is only useful to share between multiple contexts and my content scripts only need one context, that's why I don't really need it, but it is possible in content-scripts. In the background script in chrome piniia dindnt work i think because there background scripts get closed

Again, by multiple contexts here. I mean we can have multiple pages in chrome extensions. Options/ popup/ content/ devtools/ sidepanel. By having pinia we have single place to handle data for all in typed manner.
OfCourse it is not necessary, but I guess this makes data handling much easier. (also because we don't have to remember data/ variables for multiple pages)

I am talking about the content-scripts (which get inserted in the page).

I know. If your extension only has content scripts, then maybe it has lees benefit for your use case.

But I was stating the benefits of pinia in extension.

[Dreamlinerm]

I am testing the iframe and I got it working, I additionally had to define my index file in web_accesible_recources.

I tested everything except mobile and everything seems to be finished now.

[Dreamlinerm]

Uploaded new version to firefox and chrome:
Here is my final browser storage. I added a promises etc. if you wanna integrate that.
https://github.com/Dreamlinerm/Netflix-Prime-Auto-Skip/blob/main/src/composables/useBrowserStorage.ts

[mubaidr]

Thanks @Dreamlinerm for sharing your journey, learned a lot of things from your experience.