Support Firefox add-ons execution environment

[EnixCoda]

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!

[falsandtru]

I fixed cross-origin access only about window.history.state. Is there another illegal access?

e.g. assigning variables to properties of window.location

If you actually get that error, can you also show me it and its call stack?

[EnixCoda]

Thank you for fast responding!

Here are screenshots of each level of the call stack, top down.

It looks like that the issue happens when assigning position to window.history.state?

[falsandtru]

OK, it should be fixed at v3.31.1. Can you confirm it?

[EnixCoda]

It's not :(

The issue occurs in savePosition while your changes updated mutations on state in functions except it.

savePosition is still mutating on cross origin state.

pjax-api/src/layer/data/store/state.ts

Lines 30 to 40 in c22b440

	export function savePosition(): void {
	void window.history.replaceState(
	extend<Pick<State, State.position>>(
	window.history.state || {},
	{
	position: {
	top: window.pageYOffset,
	left: window.pageXOffset
	}
	}),
	document.title);

[EnixCoda]

Sorry, I missed later commits in which you fixed savePosition.

But the issue does still exist after I updated pjax-api. I'll remove local cache and give another try ASAP.

[EnixCoda]

The cross-origin issue has been fixed successfully! 🍻

...and another occurred - TypeError: can't prevent extensions on this proxy object

It is an issue of URL.

Call stacks

The direct reason

I did some dig on it (see the console). It seems that the reason is Object.freeze failed on URL instances.

[falsandtru]

OK, I'll remove Object.freeze.

[falsandtru]

Fixed at v3.31.2.

[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 :P

https://github.com/EnixCoda/Gitako