Skip to content

Commit c2ed57a

Browse files
ioa747ioa747
authored
v1.4.2
1 parent b5834d0 commit c2ed57a

2 files changed

Lines changed: 249 additions & 0 deletions

File tree

‎Doc/📜 JavaScript Scraping Cheat Sheet.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
2+
---
3+
4+
1. Finding Elements (Selectors)
5+
6+
| **Command** | **Description** |
7+
| ---------------------------------- | ----------------------------------------------------- |
8+
| `document.querySelector('.class')` | Finds the **first** element with this specific class. |
9+
| `document.querySelectorAll('a')` | Finds **all** links (returns a list/collection). |
10+
| `element.parentElement` | Moves one level up to the element's "parent". |
11+
12+
2. Extracting Text & Content
13+
14+
| **Command** | **Description** |
15+
| ------------------------------ | ---------------------------------------------- |
16+
| `element.innerText` | Gets only the visible, clean text. |
17+
| `element.innerHTML` | Gets the entire HTML code inside the element. |
18+
| `element.getAttribute('href')` | Retrieves the URL address of a link. |
19+
| `element.value` | Retrieves text from an Input Box or Textarea. |
20+
21+
3. Data Cleaning (Strings)
22+
23+
| **Command** | **Description** |
24+
| -------------------- | ----------------------------------------------------------------------------- |
25+
| `.trim()` | Removes whitespace from start and end (Similar to `StringStripWS` in AutoIt). |
26+
| `.replace('A', 'B')` | Replaces text (Similar to `StringReplace`). |
27+
| `.split('\n')` | Splits text into an array based on new lines. |
28+
29+
4. Communication with AutoIt
30+
31+
| **Command** | **Description** |
32+
| ----------------------------------------- | ---------------------------------------------------------------------- |
33+
| `window.chrome.webview.postMessage(data)` | **The most important:** Sends the `data` to the AutoIt Event handler. |
34+
35+
---
36+
37+
💡 The "Magic" Snippet for Table Scraping
38+
39+
If you find a table and want to extract all its data, use this code as your primary template:
40+
41+
JavaScript
42+
43+
```
44+
//
45+
var results = [];
46+
// 1. Find all rows
47+
var rows = document.querySelectorAll('table tr');
48+
49+
rows.forEach(row => {
50+
// 2. Find cells for each row
51+
var cells = row.querySelectorAll('td');
52+
53+
if (cells.length > 0) {
54+
// 3. Format the data structure (e.g., Column1 | Column2)
55+
var line = cells[0].innerText.trim() + " | " + cells[1].innerText.trim();
56+
results.push(line);
57+
}
58+
});
59+
60+
// 4. Send everything back to AutoIt
61+
window.chrome.webview.postMessage(results.join('\n'));
62+
```
63+

‎Doc/🧩 How-To Using Extensions in NetWebView2.md‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
2+
With the release of **v1.3.0**, you can now load browser extensions (unpacked) independently for each WebView2 instance. This is perfect for adding Ad-blockers, Dark Mode, or custom developer tools to your automation scripts.
3+
4+
---
5+
6+
#### 1. Prepare your Extension Library
7+
8+
WebView2 requires extensions to be in **Unpacked** format (a folder containing the `manifest.json` file).
9+
10+
1. Create a folder named `Extensions_Lib` in your project directory.
11+
12+
2. Download your desired extension (e.g., **uBlock Origin Lite** or **Dark Reader**).
13+
14+
3. If you have a `.crx` file, extract it using a ZIP tool.
15+
16+
4. Your structure should look like this:
17+
18+
Plaintext
19+
20+
```
21+
YourProject/
22+
├── MyScript.au3
23+
└── Extensions_Lib/
24+
└── DarkReader/
25+
├── manifest.json <-- This must be in the root of the folder
26+
├── background.js
27+
└── ...
28+
```
29+
30+
31+
#### 2. Implementation in AutoIt
32+
33+
Extensions must be loaded **after** the engine is ready (`INIT_READY`) but **before** or during the initial navigation.
34+
35+
AutoIt
36+
37+
```
38+
; Example for Instance 2
39+
Func Web2_OnMessageReceived($sMsg)
40+
Local $aParts = StringSplit($sMsg, "|")
41+
Local $sCommand = StringStripWS($aParts[1], 3)
42+
43+
Switch $sCommand
44+
Case "INIT_READY"
45+
; Define the path to your unpacked extension
46+
Local $sExtPath = @ScriptDir & "\Extensions_Lib\DarkReader"
47+
48+
; Load the extension for this specific instance
49+
$oWeb2.AddExtension($sExtPath)
50+
51+
; Navigate to your target site
52+
$oWeb2.Navigate("https://www.autoitscript.com/forum/")
53+
54+
Case "EXTENSION_LOADED"
55+
ConsoleWrite("+> Success: Extension loaded in Web2!" & @CRLF)
56+
57+
Case "ERROR"
58+
If StringInStr($sMsg, "EXTENSION") Then
59+
ConsoleWrite("!> Error: Failed to load extension." & @CRLF)
60+
EndIf
61+
EndSwitch
62+
EndFunc
63+
```
64+
65+
#### Key Features in v1.3.0:
66+
67+
- **Isolation**: Loading an extension in `Web1` does not affect `Web2`. Each instance stays completely independent.
68+
69+
- **Persistence**: Since v1.3.0 uses dedicated User Profiles, extension settings (like custom filters or dark mode intensity) are saved automatically in the profile folder.
70+
71+
- **Event Tracking**: The new version sends a `EXTENSION_LOADED` message back to AutoIt so you can confirm the injection was successful.
72+
73+
74+
---
75+
76+
### Manual Method: Extracting Extensions from your Browser
77+
78+
If you already have the extension installed in your Chrome or Edge browser, follow these steps to "extract" it for use with this library:
79+
80+
1. **Find the Extension ID:**
81+
82+
- Open your browser and navigate to `chrome://extensions/` or `edge://extensions/`.
83+
84+
- Enable **Developer mode** (toggle switch at the top right).
85+
86+
- Locate your extension (e.g., Dark Reader) and copy its **ID** (a long string of random letters like `eimadpbcbfnmbkopoojfekhnkhdbieeh`).
87+
88+
2. **Locate the Source Folder:**
89+
90+
- Press `Win + R`, paste the following path, and press Enter:
91+
92+
- **For Edge:** `%LocalAppData%\Microsoft\Edge\User Data\Default\Extensions`
93+
94+
- **For Chrome:** `%LocalAppData%\Google\Chrome\User Data\Default\Extensions`
95+
96+
- Find the folder named after the **ID** you copied in Step 1.
97+
98+
3. **Identify the Unpacked Folder:**
99+
100+
- Inside that folder, you will see a sub-folder named after the version number (e.g., `4.9.118_0`).
101+
102+
- **Crucial:** This version folder is your "Unpacked Extension". It contains the `manifest.json` file.
103+
104+
4. **Copy to your Project:**
105+
106+
- Copy the version folder into your project's `Extensions_Lib` directory.
107+
108+
- **Pro Tip:** Rename the folder from `4.9.118_0` to something readable like `DarkReader` to keep your code clean.
109+
110+
111+
---
112+
113+
# How-To: stored in your library
114+
115+
With the `#include "_WV2_ExtensionPicker.au3"`
116+
### 1. The New Folder Architecture (Format: `Name_ID`)
117+
118+
For the automated **Extension Picker** to function properly, extensions must be stored in your library (`Extensions_Lib`) using a specific naming format.
119+
120+
**Syntax:** `[Extension Name]_[32-char ID]`
121+
122+
Example:
123+
124+
`Extensions_Lib\DarkReader_eimadpbcbfnmbkopoojfekhnkhdbieeh`
125+
126+
127+
Your Extensions_Lib/
128+
└── DarkReader_eimadpbcbfnmbkopoojfekhnkhdbieeh/
129+
├── manifest.json <-- This must be in the root of the folder
130+
├── background.js
131+
└── ...
132+
133+
134+
> **Why this format?**
135+
>
136+
> - **Name:** AutoIt uses this to display a user-friendly name for the extension in the list.
137+
>
138+
> - **ID:** AutoIt uses this to check if the extension is already active in the `UserDataPath` and to generate the `extension://ID/` URL.
139+
>
140+
141+
---
142+
143+
### 2. Using the Extension Picker (UI Mode)
144+
145+
Instead of "hardcoding" extensions into your script, you can call the new Native Module:
146+
147+
**AutoIt**
148+
149+
AutoIt
150+
151+
```
152+
#include "_WV2_ExtensionPicker.au3"
153+
154+
; Call the Picker (Modal Window)
155+
_WV2_ShowExtensionPicker($iWidth = 500, $iHeight = 600, $hWND = 0, $sExtSourcePath = "", $sUserDataPath = "")
156+
```
157+
158+
### 3. How to Find the Correct ID
159+
160+
1. Install the extension in your regular Chrome/Edge browser.
161+
162+
2. Navigate to `chrome://extensions`.
163+
164+
3. Enable **Developer Mode** (top right).
165+
166+
4. Click the **Details** button on the extension you want.
167+
168+
5. Copy the **ID** (e.g., `eimadpbcbfnmbkopoojfekhnkhdbieeh`).
169+
170+
6. Rename the extension folder in your library to `DarkReader_eimadpbcbfnmbkopoojfekhnkhdbieeh`.
171+
172+
173+
---
174+
175+
### 5. Technical Note (State Sync)
176+
177+
The Picker performs a real-time check of the following folder:
178+
179+
`UserDataPath\EBWebView\Default\Local Extension Settings`
180+
181+
If the extension ID is found there, the button automatically changes from **"Add Extension"** to **"Launch"**, allowing for the immediate start of the Extension UI.
182+
183+
---
184+
185+
Example:
186+

0 commit comments

Comments
 (0)