C3 r25 introduces a new addon testing mode

For discussion and help with the Construct 3 Plugin SDK

Post » Sat Jun 03, 2017 3:25 pm

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.
https://www.youtube.com/watch?v=zTlc5Z59FpA
ImageImageImage
B
71
S
22
G
241
Posts: 3,734
Reputation: 134,494

Post » Tue Jun 06, 2017 11:22 am

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.
Scirra Founder
B
398
S
236
G
88
Posts: 24,428
Reputation: 194,625

Post » Tue Jun 06, 2017 4:30 pm

Yes, the video shows how to add https to the current localhost site.
ImageImageImage
B
71
S
22
G
241
Posts: 3,734
Reputation: 134,494

Post » Thu Jun 15, 2017 12:33 pm

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.
B
16
S
5
G
3
Posts: 30
Reputation: 2,245

Post » Thu Jun 15, 2017 12:44 pm

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

Code: Select all
Error loading addon JSON:  SyntaxError: Unexpected string in JSON at position 367
ǃm.ǃ_f.then.then.catch @ main.js:149


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

Code: Select all
{
   "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"
   ]
}


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?
B
16
S
5
G
3
Posts: 30
Reputation: 2,245

Post » Fri Jun 16, 2017 5:19 am

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.
B
16
S
5
G
3
Posts: 30
Reputation: 2,245

Post » Tue Jun 20, 2017 2:39 pm

tgenedavis wrote: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 :roll:
B
22
S
9
G
4
Posts: 14
Reputation: 4,760

Post » Sun Jun 25, 2017 4:45 am

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

Code: Select all
https://localhost<someport>:<somefile>


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.
B
16
S
5
G
3
Posts: 30
Reputation: 2,245

Post » Mon Jul 03, 2017 7:40 pm

tgenedavis wrote: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

Code: Select all
https://localhost<someport>:<somefile>


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: https://www.youtube.com/watch?v=zTlc5Z59FpA
- 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:
Code: Select all
<?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>

- And that's it! You should be able not to access your https://localhost:[PORT] ;)
B
22
S
9
G
4
Posts: 14
Reputation: 4,760

Previous

Return to Plugin SDK

Who is online

Users browsing this forum: No registered users and 0 guests