Bug: firefox - unable to log in

[jpmcb]

Describe the bug

I'm not able to log into the extension:

https://github.com/open-sauced/ai/assets/23109390/d8256514-6f1b-4cc2-93be-d43fb4c5f076

I have extensions.sdk.console.loglevel set to "all" in my browser as well. But I'm not seeing logs. Maybe there's more to do to get logs out of the extension.

Steps to reproduce

1. Install firefox extension.
2. Open extension and attempt to log in

Browsers

No response

Additional context (Is this in dev or production?)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

Contributing Docs

• [X] I agree to follow this project's Contribution Docs

[diivi]

How did you install the extension on firefox?

[bdougie]

How did you install the extension on firefox?

https://github.com/open-sauced/ai/issues/194#issuecomment-1664709483 Failing because our approach with the service-worker needs to be duplicated in a background.js or similar.

[nickytonline]

I can take a peek at this unless someone else is already looking at this.

[nickytonline]

.take

[nickytonline]

Loading the browser extension locally surfaces errors immediately. This is what I get if I use the build as it currently is.

This is expected as the manifest doesn't respect what Firefox is looking for. If I tweak it to use scripts, the extension is able to load.

{
  "manifest_version": 3,
  "name": "OpenSauced.ai",
  "version": "1.12.0",
  "action": { "default_popup": "index.html" },
  "content_scripts": [
    {
      "js": ["src/content-scripts/github.ts"],
      "matches": ["https://github.com/*"],
      "run": "document_end"
    }
  ],
  "background": {
-    "service_worker": "src/worker/background.ts",    
+    "scripts": ["src/worker/background.ts"],
    "type": "module"
  },
  "icons": {
    "16": "src/assets/os-icons/os-icon-16.png",
    "32": "src/assets/os-icons/os-icon-32.png",
    "48": "src/assets/os-icons/os-icon-48.png",
    "128": "src/assets/os-icons/os-icon-128.png"
  },
  "host_permissions": ["https://github.com/*", "https://*.insights.opensauced.pizza/*" , "https://www.linkedin.com/*"],
  "permissions": ["scripting", "storage", "tabs", "cookies"]
}

You still can't log in because of other warnings.

I'll keep digging into this but one thing to note is that the crxjs project does not currenly support Firefox. See https://github.com/crxjs/chrome-extension-tools/pull/644. This is not a blocker, but it does mean that for the time being at least, development can only be done for a Chromium based browser (Chrome, Arc etc.).

For Firefox, it will have to be a build time thing only and manual testing to ensure it's in a good state.

[nickytonline]

Looking into this, I discovered a bug where it tries to set the preferred color mode when logged out. I'll create a good first issue for that. That's one reason you can't log in.

After that I got this message Error: The storage API will not work with a temporary addon ID. Please add an explicit addon ID to your manifest. For more information see https://mzl.la/3lPk1aE. undefined.

Add this to stop getting that error for now, so storage works. The ID can be anything for local dev for a Firefox build. See Extensions and the add-on ID and browser_specific_settings.

{
  "manifest_version": 3,
  "name": "OpenSauced.ai",
  "version": "1.12.0",
  "action": { "default_popup": "index.html" },

...

  "host_permissions": ["https://github.com/*", "https://*.insights.opensauced.pizza/*" , "https://www.linkedin.com/*"],
  "permissions": ["scripting", "storage", "tabs", "cookies"],
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "ai@opensauced.pizza",
+      "strict_min_version": "1.0"
+    }
+  }
}

The other thing I did was to make chrome = browser, which is what Firefox prefers. I'm doing that by adding a type on the global and then aliasing the global variable.

declare global {
  interface Window {
    browser: typeof chrome;
  }

  // eslint-disable-next-line no-var
  var browser: typeof chrome;
}

if ("browser" in globalThis) {
  globalThis.chrome = browser;
}

The last bit might not be completely necessary. Still investigating that.

It still looks like optLogIn isn't running in start.tsx. Not sure why yet as there are no errors being thrown. Still digging.

[nickytonline]

Here is the branch I'm working in for Firefox support @bdougie, https://github.com/nickytonline/ai/tree/firefox.

The issue I'm running into at the moment when I run the Firefox add-on is I keep getting these Can't access dead object errors anytime chrome.some-method runs. I understand the purpose of it, but I'm confused why things are dead immediately.

There is this method called Components.utils.isDeadWrapper(someObject) to see if an object is dead, but I'm not using it at the moment because as mentioned, all chrome.* methods are all dead which is what I'm trying to figure out.

Another reason the login doesn't even being is because this code at the start of optLogin returns immediately because window is undefined.

export const optLogIn = async () => {
    if (typeof window === "undefined") {
        return;
    }
    ...
}

[nickytonline]

As mentioned above, the crxjs project does not currently support Firefox, so to debug things you will have to build the project, load it back up in Firefox, debug, rinse repeat.

To setup Firefox for debugging an extension (add-on):

1. Open the browser DevTools and click on the three dots then select settings.

2. Scroll down to the Advanced Settings section and ensure Enable browser chrome and add-on debugging toolboxes is checked.

3. Load the add-on by clicking on the puzzle icon in the top right of Firefox or via the application menu, Tools -> Add-ons and Themes

4. Click on the cog icon to open the menu and select Debug Add-ons

5. Ensure you built the extension with the changes in my branch by running npm run build

6. Click on the Load Temporary Add-on... button

7. Select the manifest file that got generated from the OS file menu and click the Open button.

8. The extension is now ready for use.

9. Navigate to a GitHub page where you want to start debugging the remaining issues with the Firefox add-on

10. If you want to debug or inspect the extension click the Inspect button from the Temporary extensions section where the extension was just loaded.

[bdougie]

@nickytonline these steps were extremely helpful. I added the permission in the settings and was immediately allowed to log in.

[nickytonline]

Unassigning myself for now. Happy to help on this if we revisit Firefox support.