C3 r25 introduces a new addon testing mode

/r32/main.js:2 Mixed Content: The page at 'https://editor.construct.net/' was loaded over HTTPS, but requested an insecure resource 'http://localhost/C3Plugins/demoplugin/addon.json'. This request has been blocked; the content must be served over HTTPS.

s /r32/main.js:2

Dang, looks like we need to reconfigure it again...

Sorry for the delay getting this working, it turns out https:// -> http://localhost is difficult to set up due to a series of security restrictions in place. It works on my machine because the dev verison of C3 also runs on http://localhost, but the fact editor.construct.net runs on https causes loading from http://localhost to break.

I think the best solution is to also add support for secure localhost (i.e. https://localhost) and use a self-signed certificate there. That should then stop the browser blocking the load. There should be something in place for the next release (r34) assuming there aren't any other security hurdles.

Ashley, did you make some changes regarding localhost in r34?

It needs a server-side change which I think hasn't happened yet, I'll try to sort this out soon.

This is working now! You have to setup https properly in Windows 10/IIS. This link explains what to do. Due to Chrome's drop of SHA-1, not all documented methods will work. This one did for me.

OK, the server's been updated - probably best to clear your browser cache before trying this, but it should work now providing you host on https://localhost. I assume that's what you're doing blackhornet?

Setting up SSL for HTTPS can be a bit of a pain, I do want to support this on normal HTTP but browser security restrictions make that difficult.

Yes, the video shows how to add https to the current localhost site.

I seem to have got past most of the addon test mode issues on MacOS by using homebrew's nginx, and ssl using a keychain generated self signed key that is customized to include the subjectaltnam and authorized for ssl in the keychain. There was some tweaking of the nginx.conf file to contain the proper CORS http headers. If you don't have your self signed cert completely authenticated in Keychain, you won't even see responses sent back from the localhost web server when requested by C3. Also, port's nginx doesn't even install, so avoid that.

It sounds more painful than it was.

I do recommend anyone thinking of Tomcat shy away from it. The CORS filters do *NOT* allow the proper headers to go through in the HTTP response unless you're willing to write a custom filter to fix it.

The new addon testing mode gives me the following exception when trying to load the example plugin with the "Add dev addon" button.

Error loading addon JSON:  SyntaxError: Unexpected string in JSON at position 367
!m.!_f.then.then.catch @ main.js:149[/code:1obp3ppi]

This happens when I load the extracted example addon.json that has the following file list.

[code:1obp3ppi]{
	"is-c3-addon": true,
	"type": "plugin",
	"name": "My custom plugin",
	"id": "MyCustomPlugin",
	"version": "1.0.0.0",
	"author": "Scirra",
	"website": "https://www.construct.net",
	"documentation": "https://www.construct.net",
	"description": "Example custom Construct 3 plugin.",
	"editor-scripts": [
						"plugin.js",
						"type.js",
						"instance.js"
					],
	"file-list": [
		"c2runtime/runtime.js",
		"lang/en-US.json",
		"aces.json",
		"addon.json",
		"icon.svg",
		"instance.js",
		"plugin.js",
		"type.js"
	]
}[/code:1obp3ppi]

All the C3 plugin files are available over https from localhost and this is the only error given by Chrome. I have not modified any files in the extracted plugin. Any ideas?

I tested with r25 and it loads fine, so I was going to put in a bug for this. But then I re-tested on the latest version and it works there now. I'm not sure if it is working because it is cashing, or was broken because it was cashing, but it works for me now.

Btw, fantastic feature! Keep up the great work.

I seem to have got past most of the addon test mode issues on MacOS by using homebrew's nginx, and ssl using a keychain generated self signed key that is customized to include the subjectaltnam and authorized for ssl in the keychain. There was some tweaking of the nginx.conf file to contain the proper CORS http headers. If you don't have your self signed cert completely authenticated in Keychain, you won't even see responses sent back from the localhost web server when requested by C3. Also, port's nginx doesn't even install, so avoid that.

It sounds more painful than it was.

Is there any chance you could share some more detailed tips on how to do this? I've tried with no luck in Windows with a python server I found, also with XAMPP... in both cases using a self-signed certificate. Chrome keeps not-accepting the certificate so I haven't been able to load addons.

I can try on MacOS if it worked for you, so any details about your configuration would be very much appreciated

It took me days to get just the right combination, so I don't remember enough details to put together a detailed instruction list. I can tell you what to search for in Google, though.

1) The first thing that you need to do is get your cert accepted by your OS to the point that

https://localhost<someport>:<somefile>[/code:3sfcmp3v]

results in the little green lock appearing next to the URL in Chrome. In MacOS this involves Keychain. In one of the previous posts, there is a video explaining how to do it for Windows. It's painful, and really Chrome is causing us headaches for no good reason, but it is doable.

2) You're going to have to get a web server running on localhost that actually supports CORS. Older webservers like Tomcat don't properly support CORS. Find a new one that either lets you specify the content of the HTTP header, or actually supports CORS properly. nGinx allows you to customize the HTTP header returned for HTTP Requests. That's how I finally got it working.

It took me days to get just the right combination, so I don't remember enough details to put together a detailed instruction list. I can tell you what to search for in Google, though.

1) The first thing that you need to do is get your cert accepted by your OS to the point that

https://localhost<someport>:<somefile>[/code:2oans5ex]

results in the little green lock appearing next to the URL in Chrome. In MacOS this involves Keychain. In one of the previous posts, there is a video explaining how to do it for Windows. It's painful, and really Chrome is causing us headaches for no good reason, but it is doable.

2) You're going to have to get a web server running on localhost that actually supports CORS. Older webservers like Tomcat don't properly support CORS. Find a new one that either lets you specify the content of the HTTP header, or actually supports CORS properly. nGinx allows you to customize the HTTP header returned for HTTP Requests. That's how I finally got it working.

Thank you tgenedavis! And blackhornet... i skipped that video and it was a good starting point.

I finally managed to setup my https local server on Windows 10. I'll try to write a better tutorial when I have the time, but here's a general step-by step guide in case someone finds it useful:

• Follow the instructions in the video linked by blackhornet to generate a pfx certificate:
  Subscribe to Construct videos now
• Add the .pfx certificate to Google Chrome (settings->manage certificates->add certificate under the trusted root blabla... tab)
• When you reload, it won't accept it yet. Here comes the trick. Press CRTL+SHIFT+i and select the "security" tab, where the lock icon is present. This icon is mentioned in a lot of tutorials out there but its location changed in the latest versions of Chrome. Select "view certificate" and under the "details" tab select the "export certificate" option and PKCS format (https://stackoverflow.com/a/15076602)
• Now add that .PKCS certificate to chrome as you did before with the .pfx, and restart Chrome.
• If you are using Internet Information Services (IIS) as instructed in the video, open it and under "Sites" add a new one for your local c3 addons server. Under configuration, select "Directory Browsing" press "Enable". (https://support.microsoft.com/en-us/hel ... .0-webpage)
• Finally, enable CORS by modifying your web.config, which is in the directory you set when you added a new site in IIS, so the file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <directoryBrowse enabled="true" />
        <httpProtocol>
        	<customHeaders>
		       	<add name="Access-Control-Allow-Origin" value="*" />
	     	</customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>[/code:2oans5ex]
[ul]
	[li]And that's it! You should be able not to access your [url=https://localhost]https://localhost[/url]:[PORT]  <img src="{SMILIES_PATH}/icon_e_wink.gif" alt=";)" title="Wink">[/li]
[/ul]

Having issues again. I've been using "Add Dev Addon" for for a while, but in my attempts to work on drawing-addons, I hit a caching issue, so decided to clear the cache so I could refresh the runtime. As soon as I did that, I lost the ability to use developer mode. "Add Dev Addon" always fails now: "Unable to load the addon JSON..." I am using exactly the same address as before. I've cleared repeatedly. Rebooted. Nothing I do works now.

r69.2

Error loading addon JSON: TypeError: Assignment to constant variable.

at d.!vcY (main.js:73)

at <anonymous>

!G.!EA.then.then.catch main.js:154

Promise rejected (async)

o.!Dy.then main.js:154

Promise resolved (async)

!ssA main.js:154

!ssk.onclick main.js:154