|
1 | 1 | # Browser |
2 | 2 |
|
3 | | -This extension can run in the web browser (eg: [vscode.dev](https://vscode.dev)), but with limited functionality. |
| 3 | +This extension can run in the web browser (eg: [vscode.dev](https://vscode.dev)), but with limited functionality compared to |
| 4 | +the desktop version. |
4 | 5 |
|
5 | 6 | ## Running the Browser implementation |
6 | 7 |
|
7 | 8 | You can run the browser implementation of the extension in the following ways. |
8 | 9 |
|
9 | | -### Running in VSCode |
| 10 | +### General Notes |
10 | 11 |
|
11 | | -The following steps will result in a VSCode Extension window running |
12 | | -with the AWS Toolkit extension installed. |
13 | | -The difference from the regular |
14 | | -process is that in the background it is running as a browser environment |
15 | | -so certain things like Node.js modules will not be available. |
16 | | - |
17 | | -1. In the terminal run: `npm run buildBrowser` |
| 12 | +- To see logs, using the Command Palette search: `Toggle Developer Tools`. Then go to the `Console` tab. In browser mode VS Code seems to duplicate log messages, idk how to fix this. |
| 13 | +- The difference between browser mode and Node.js/desktop is that browser mode is in an actual browser environment so certain things like Node.js modules will **not** be available. |
18 | 14 |
|
19 | | -## Running in a Browser window |
| 15 | +## Running in an actual Browser |
20 | 16 |
|
21 | 17 | The following steps will result in a Chrome window running with VS Code |
22 | | -and the Browser version of the AWS Toolkit extension installed. |
| 18 | +and the Browser version of the AWS Toolkit extension installed: |
| 19 | + |
| 20 | +1. (Recommended) To have the Chrome window save your VS Code state after closing it, you need to modify the node module which executes the playwright method that opens it. In `node_modules/@vscode/test-web/out/index.js#openBrowser()` make the following change: |
23 | 21 |
|
24 | | -1. In the terminal run: `npm run runInBrowser` |
| 22 | + Before: |
25 | 23 |
|
26 | | -##### (OPTIONAL) Disabling CORS |
| 24 | + ```typescript |
| 25 | + const browser = await browserType.launch({ headless, args, devtools: options.devTools }) |
| 26 | + const context = await browser.newContext({ viewport: null }) |
| 27 | + ``` |
27 | 28 |
|
28 | | -In the case you want to disable CORS in the browser for something like |
29 | | -contacting the telemetry api endpoint, do the following. |
| 29 | + After: |
30 | 30 |
|
31 | | -The script that starts the browser does not provide a way to disable security, |
32 | | -so we need to modify the code slightly to ensure the browser starts with CORS disabled. |
| 31 | + ```typescript |
| 32 | + const tempContextDir = path.join(process.cwd(), '.vscode-test-web/aws-toolkit-user-dir') |
| 33 | + const browser = await browserType.launchPersistentContext(tempContextDir, { |
| 34 | + headless, |
| 35 | + args, |
| 36 | + devtools: options.devTools, |
| 37 | + viewport: null, |
| 38 | + }) |
| 39 | + const context = browser |
| 40 | + ``` |
| 41 | + |
| 42 | +2. In the `Run & Debug` menu select the `Extension (Chrome)` option |
33 | 43 |
|
34 | | -1. Go to `./node_modules/@vscode/test-web/out/index.js` |
35 | | -2. Go to the function `openBrowser()` |
36 | | -3. Add the line `args.push('--disable-web-security')` |
| 44 | +> Note: To stop the debug session, you need to click the read `Disconnect` button multiple times |
37 | 45 |
|
38 | | -Now when you run the extension in the browser it will not do CORS checks. |
| 46 | +> Note: Setting breakpoints in VS Code works |
39 | 47 |
|
40 | | -#### Debugging in Browser window |
| 48 | +#### (OPTIONAL) Enabling CORS |
41 | 49 |
|
42 | | -Debugging in the Browser is more difficult than the Node.js/Desktop |
43 | | -version. |
| 50 | +By default, we disable CORS in browser mode since certain endpoints |
| 51 | +such as telemetry or auth do not support CORS (at the moment of writing) for the VSCode origin. |
44 | 52 |
|
45 | | -- Breakpoints do not work, we cannot step through the code. |
| 53 | +In the case you want to enable CORS in the browser to test CORS compatibility |
| 54 | +do the following: |
46 | 55 |
|
47 | | -The best we can do (as far as I know) is to read logs. |
| 56 | +- In `package.json` find the `browserRun` script |
| 57 | +- Temporarily remove `--browserOption=--disable-web-security` |
48 | 58 |
|
49 | | -To get to the VS Code logs go to: |
| 59 | +Now when you run the extension in the browser it will do CORS checks. |
50 | 60 |
|
51 | | -1. The `Output` tab |
52 | | -2. In the top right drop-down select: `Extension Host (Worker)` |
| 61 | +## Testing in VSCode Browser Mode |
53 | 62 |
|
54 | | -> The VS Code logs will show errors if we try to use modules that do not exist in the Browser. |
| 63 | +The following steps will result in a VSCode Extension window running |
| 64 | +with the AWS Toolkit extension installed. While it looks the same as a typical |
| 65 | +VS Code window, in the background it is running in a Browser context. |
55 | 66 |
|
56 | | -To get to the AWS Toolkit logs: |
| 67 | +- In the `Run & Debug` menu run: `Extension Tests (browser)` |
57 | 68 |
|
58 | | -1. Open Command Palette: `cmd/ctrl` + `shift` + `p` |
59 | | -2. Type: `AWS: View Toolkit Logs` |
| 69 | +> NOTE: Tests do not spin up an actual Browser window, but if we find a good reason to switch it will require some additional work. The current way does not require dowloading a separate browser like Chromium. |
60 | 70 |
|
61 | 71 | ## Finding incompatible transitive dependencies |
62 | 72 |
|
|
0 commit comments