Firefox support? Got POC working

[jhholm]

I was able to get the extension somehow working in Firefox with a few changes

sp-editor/public/chrome/event.js

Line 1 in 8e2b147

chrome.devtools.panels.create("SharePoint", null, "index.html", null);

That needs to changed to

chrome.devtools.panels.create("SharePoint", "", "index.html");

The bigger refactor was for the definition file loads for monaco-editor. Firefox does not support the following API that is used.

chrome.runtime.getPackageDirectoryEntry

Thus I created a bit hacky workaround: creating a gulp task, that creates dependency.ts file with all the definitions as an JSON array that can be created on build time.

After that I was able to load the extension successfully in Firefox. I think Firefox 109 finally supports officially manifest v3.

I can share my hack, but I guess gulp is a bit deprecated. But I recommend the library definitions would be loaded on buildtime, instead of runtime.

[jhholm]

It seems that I got PnP JS Console successfully working in Firefox 108 with my hacky changes, but other functionalities seem to have small issues.

[tavikukko]

Hi @jhholm !
This is very interesting and would love to see support for Firefox too, great work! So please, keep working and do not hesitate to contact if facing any issue! And yeah, share the hack (PR/repo), very interested on your work!

[jhholm]

Small update. Got 6.6.0 popup working with Firefox. I had to change chrome.runtime.executeScript to use world: 'ISOLATED' instead of 'MAIN' as 'MAIN' is not yet supported in Firefox. The change also worked in Edge, though I had to wrap the subsequent fetch calls to chrome.runtime.executeScripts as well, cause in Firefox I would be otherwise running the fetches in the popup context (without auth).

The current issue that I'm facing is with any action from devtools that expects to get a message back from an eval. See below:

1. Action is triggered from devtools, e.g. spshooter GET call, uses chrome.runtime.onMessage.addListener to start a listener for messages
2. Action sends code with chrome.devtools.inspectedWindow.eval(<script here>)
3. Evaluated code does its business and eventuallly triggers window.postMessage()
4. content_script content.js gets the message and triggers chrome.runtime.sendMessage()
5. Devtools addListener should catch the message, but doesn't do that on Firefox (there is an actual error that no listeners exist)

The documentation is a bit lacking on this subject, but I could find this stackoverflow. I guess I would start by creating a smaller sample and play around how to get the messaging working back to devtools. Would it be possible to use chrome.runtime.executeScript instead?

[tavikukko]

Nice work @jhholm!

• MAIN/ISOLATED: maybe we can check if env if FF, we can conditionally switch to ISOLATED
• subsequent calls: we can also use executeScript for subsequent calls if that makes it work also in FF
• messaging: When creating the popup, I studied the execueScript and realised it could be used for all communications, so my plan is to replace the current communication logic to use that. Have not tested or started conversion yet, but should not be that hard.

I will test how the executeScript could work for dev_tools messaging part and will post the results here.

[jhholm]

• ISOLATED seems to work in both browsers, I did play around with a isFirefox approach initially
• executeScript({ world: "main"... }).then((result) => fetch()) seems to work for some reason in Edge/Chrome, even though fetches to SharePoint API's in then should not contain auth headers IMO. Wrapping fetches to executeScript solved this in Firefox and had proper auth headers.

I guess if executeScript approach works, that would be lovely. This is my first deep dive into extensions and messaging seems to be a bit... interesting.

I started playing around with messaging with this sample. The diagram in Step 4 seems to show a similar messaging pattern as Chrome devtools documentation. Though if you look at the source code for the sample the code doesn't follow the diagram at all.

I got messaging successfully working in both Chrome and Firefox with following the pattern. See my gist here for a quick sample.

1. Content Script => Background chrome.runtime.sendMessage or chrome.runtime.connect
2. DevTools => Background chrome.runtime.connect

AFAIK Content Script and DevTools have to initiate the connection and background can listen on connections. I do not think it works the other way around.

What makes this even more fun, is that Firefox doesn't yet support background: { service_worker: "background.js"}, you'll have to use background: { scripts: ["background.js"] } which is not actually proper MV3. Hooray, two different manifests needed! 🥳

OT/PROTIP: web-ext makes extension development for Firefox a breeze - should work with chrome as well

npm i web-ext -g
cd build
web-ext run OR web-ext run -t chromium

[jhholm]

It seems that Chrome might have access to scripting and tabs in devtools.js, if permissions are set in manifest.json. At least console.logging them gives an object after proper permissions. Firefox only shows undefined, but they are reachable in background.js.

[tavikukko]

Thanks @jhholm !

I added host_perimssions property to manifest

  "manifest_version": 3,
  "devtools_page": "devtools.html",
  "permissions": ["activeTab", "scripting"],
...
  "host_permissions": [
    "<all_urls>"
  ],
...

..and got executeScript working also from dev_tools ext:

chrome.tabs.query({ currentWindow: true, active: true }, (tabs: any) => {
  chrome.scripting.executeScript({
    target: { tabId: tabs[0].id },
    world: 'MAIN',
    func: myfunction,
  }).then(injectionResults => {
    if (injectionResults[0].result) {
      console.log(injectionResults[0].result)
    }
  });
});

Just converting spshooter to use it, will do PR and you can maybe test it in FF?

[jhholm]

Doesn't seem to work in Firefox. I think the diagram above from Chrome extension documentation is only correct for Firefox as Chrome seems to be happy providing those APIs.

[tavikukko]

interesting,
have you tried browser.scripting.executeScript ?

[tavikukko]

If you got time, could you test if these changes in spshooter-with-executescript branch works with FF, it works in Chrome/Edge? And if it does not work, could you try to change reference of chrome.scripting.executeScript to browser.scripting.executeScript, thanks!

[jhholm]

Doesn't seem to work. Weirdly both Chrome and Mozilla documentation say that this should not work, and you would need to run this through background pages/scripts.

developer.chrome.com
developer.mozilla.org

[tavikukko]

Those docs seems to be old IMO. BTW, when you change permissions, have you also removed and re-added the extension? The permissions do not get applied just to update the manifest.

[tavikukko]

If you have created branch in your sp-editor fork for your changes, I would like to test it, just to understand whats going on in FF. I tried loading my current build from file but it could not accept it, so propably some changes in manifest needed.