Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: firefox - unable to log in #237

Open
2 tasks done
jpmcb opened this issue Aug 3, 2023 · 10 comments
Open
2 tasks done

Bug: firefox - unable to log in #237

jpmcb opened this issue Aug 3, 2023 · 10 comments
Labels
🐛 bug Something isn't working 👀 needs triage

Comments

@jpmcb
Copy link
Member

jpmcb commented Aug 3, 2023

Describe the bug

I'm not able to log into the extension:

2023-08-03.15-23-10.mp4

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

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

Contributing Docs

  • I agree to follow this project's Contribution Docs
@jpmcb jpmcb added 🐛 bug Something isn't working 👀 needs triage labels Aug 3, 2023
@diivi
Copy link
Contributor

diivi commented Aug 3, 2023

How did you install the extension on firefox?

@bdougie
Copy link
Member

bdougie commented Aug 3, 2023

How did you install the extension on firefox?

#194 (comment) Failing because our approach with the service-worker needs to be duplicated in a background.js or similar.

@nickytonline
Copy link
Member

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

@nickytonline
Copy link
Member

.take

@nickytonline
Copy link
Member

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

CleanShot 2023-08-04 at 12 37 24

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.

CleanShot 2023-08-04 at 12 43 06

I'll keep digging into this but one thing to note is that the crxjs project does not currenly support Firefox. See crxjs/chrome-extension-tools#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
Copy link
Member

nickytonline commented Aug 4, 2023

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": "[email protected]",
+      "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
Copy link
Member

nickytonline commented Aug 8, 2023

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
Copy link
Member

nickytonline commented Aug 8, 2023

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.

CleanShot 2023-08-07 at 22 06 39

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

CleanShot 2023-08-07 at 22 08 32

  1. 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

CleanShot 2023-08-07 at 22 11 39

CleanShot 2023-08-07 at 22 10 35

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

CleanShot 2023-08-07 at 22 12 16

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

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

CleanShot 2023-08-07 at 22 13 00

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

CleanShot 2023-08-07 at 22 14 23

  1. The extension is now ready for use.

CleanShot 2023-08-07 at 22 15 24

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

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

CleanShot 2023-08-07 at 22 16 54

@bdougie
Copy link
Member

bdougie commented Aug 15, 2023

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

Screen Shot 2023-08-15 at 1 55 21 PM

@bdougie bdougie mentioned this issue Aug 15, 2023
@nickytonline nickytonline removed their assignment Jan 18, 2024
@nickytonline
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working 👀 needs triage
Projects
None yet
Development

No branches or pull requests

4 participants