Add Firefox support to the browser extension

[wKovacs64]

Summary 💡

It would be great if the extension worked in Firefox as it does in Chrome.

Examples 🌈

See Chrome behavior.

Motivation 🔦

Not everyone uses Chrome. 🙂

Additional Information ℹ️

I don't know anything about browser extensions, so take this with a grain of salt.

I glanced around and it sounds like most extensions should work in both browsers (perhaps with a little tweaking). I ran the Testing Playground extension through https://www.extensiontest.com/ and it had no errors or compatibility problems, just a couple warnings (raw results are available at the bottom of this issue). Hoping it would Just Work™️, I temporarily installed a local copy in Firefox. This revealed a couple different warnings:

• Reading manifest: Warning processing background.persistent: Event pages are not currently supported. This will run as a persistent background page.
• Reading manifest: Warning processing version_name: An unexpected property was found in the WebExtension manifest.

While it does load, it doesn't seem to do anything. It just looks like this:

Clicking the "select element" button does highlight things and feels like it's allowing me to select an element, but once I click on an element, nothing changes in the dev tools panel.

Thanks for considering this request!

ExtensionTest.com Results

{
  "compat": [],
  "errors": [],
  "warnings": [
    {
      "message": "Using 'eval' has strong security and performance implications.",
      "description": "In most cases the same result can be achieved differently, therefore it is generally prohibited",
      "locations": [
        {
          "file": "manifest.json"
        }
      ]
    },
    {
      "message": "The Function constructor is eval.",
      "description": "Evaluation of strings as code can lead to security vulnerabilities and performance issues, even in the most innocuous of circumstances. Please avoid using `eval` and the `Function` constructor when at all possible.'",
      "locations": [
        {
          "file": "window/testing-library.js",
          "line": 90
        },
        {
          "file": "window/testing-library.js",
          "line": 90
        },
        {
          "file": "content-script/contentScript.js",
          "line": 1
        },
        {
          "file": "content-script/contentScript.js",
          "line": 90
        },
        {
          "file": "content-script/contentScript.js",
          "line": 90
        },
        {
          "file": "devtools/pane.js",
          "line": 1
        },
        {
          "file": "devtools/pane.js",
          "line": 90
        },
        {
          "file": "devtools/panel.js",
          "line": 1
        },
        {
          "file": "devtools/panel.js",
          "line": 90
        },
        {
          "file": "devtools/panel.js",
          "line": 90
        }
      ]
    },
    {
      "message": "Unsafe assignment to innerHTML",
      "description": "Due to both security and performance concerns, this may not be set using dynamic values which have not been adequately sanitized. This can lead to security issues or fairly serious performance degradation.",
      "locations": [
        {
          "file": "content-script/contentScript.js",
          "line": 90
        },
        {
          "file": "content-script/contentScript.js",
          "line": 90
        },
        {
          "file": "content-script/contentScript.js",
          "line": 90
        },
        {
          "file": "devtools/pane.js",
          "line": 1
        },
        {
          "file": "devtools/pane.js",
          "line": 1
        },
        {
          "file": "devtools/panel.js",
          "line": 1
        },
        {
          "file": "devtools/panel.js",
          "line": 1
        }
      ]
    }
  ]
}

[smeijer]

I've taken a look at it, and the warnings that you're seeing are easily fixable.

Unfortunately, it seems that crx-bridge, does not yet support Firefox: zikaari/crx-bridge#4.

So, for now this doesn't feel like an easy task. Unless we can contribute to crx-bridge to add Firefox support there as well.

But I do definitely agree. Support for Firefox would be nice. And as Edge now starts to look so much like Chrome, I believe that one should be easy to support as well.

[wKovacs64]

Sounds like the crx-bridge author is interested! Thanks for taking a look.

[smeijer]

I'll keep an eye on that one 😇

[smeijer]

crx-bridge has been updated, so this should now be possible.

[balavishnuvj]

@smeijer need any help here?

[marcosvega91]

crx-bridge Has been updated with Firefox support. Here we have the version 2.1 But we should install the version 3. Do you wanna open a PR with the package update? It will be very awesome 😎

[balavishnuvj]

just after updating crx-bridge to 3.0.1 I'm getting these errors. Before digging deep into these, thought will run by you guys once.

[smeijer]

@smeijer need any help here?

@balavishnuvj Would be much appreciated!

[WeslleyNasRocha]

I used web-ext to "run" the extension and it gave any errors, can you guys try it? #327

[joaopedrodcf]

As #327 was successfully merged and accepted in firefox addons we can close this no? @smeijer 🙏

[smeijer]

We can indeed. 😎

[smeijer]

I did notice a bug tho. The side panel in the elements pane does not seem to work in Firefox. Maybe that upgrading crx-bridge will fix that.

[WeslleyNasRocha]

Wow, in fact, I've never used that panel hahaha, only the dedicated panel.