Support Firefox add-ons execution environment

Hi @falsandtru

I’m the maintainer of a GitHub file tree extension, Gitako, which depends on PJAX lib to work properly. Thank you for implementing this great new generation of PJAX lib, I found it working much better than the one I was using before! However, while it worked very well in Chrome, I encountered an cross-origin issue when trying to use it in Firefox - Not allowed to define cross-origin object as property on [Object] or [Array] XrayWrapper, which crashes my extension then.

What I’ve done

I’ve tried to fix it by myself, but couldn’t figure it out after many hours of work. So I decided to ask for your help.

The reason it happen is, according to MDN, add-on for Firefox runs in a context other than the context that webpage js runs in.

A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the web site itself, such as those loaded using the <script> element).

BTW, add-on to Firefox is exactly what extension is to Chrome, they are just different names.

So that some operations happened inside pjax-api (e.g. assigning variables to properties of window.location) triggered cross-origin issue because window is not from add-ons context.

But my add-on used https://github.com/MoOx/pjax and it worked well even in Firefox. So I think PJAX mechanism is not technically unavailable in Firefox. What we need is few minor changes in pjax-api, like switching from passing objects to assigning object properties specifically to prevent passing objects cross-origin.

How to reproduce it

If you’d like to help (it would be very kind of you!), please continue reading about how to reproduce the issue on your local environment.

In case you might not be familiar about browser extension development, I’ve setup a project for you - https://github.com/EnixCoda/pjax-api-firefox-demo

1. Please clone it and install dependencies with yarn.

2. Run yarn watch to emit files for debug and then run yarn debug-firefox in another terminal session to debug in Firefox. You should see a Firefox window pop out.

3. Go visit some webpage. I’d suggest https://nobody.github.io as it’ll take you to a clean 404 page which has no much JS files.

4. Open dev console and you should see App is running! like below, which indicates the app works by default.

5. Then go to src/content_script.ts, uncomment those commented lines. Now pjax-api is imported. Refresh browser page. The App is running! log won’t appear now. Because app crashed in importing pjax-api, before it executed to where the log statement is.

6. Now go to Debugger tab, check Pause on exceptions and Pause on caught exceptions under breakpoint pane. Refresh page again. You should see exactly what I showed you in the first screenshot - Not allowed to define cross-origin object as property on [Object] or [Array] XrayWrapper.

7. Then you should be able to see what is going wrong.

---

I’d be very grateful if you either take a look into the issue or guide me about how to fix it myself. Thank you very much!

[EnixCoda]

It works! Thank you so much!

Now I can release next version of Gitako and users will have better user experiences!

If you use GitHub frequently, please give a try 😛

https://github.com/EnixCoda/Gitako

[falsandtru]

Fixed at v3.31.2.