v0.1

Author: XY0797

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+chromium/

LICENSE

@@ -0,0 +1,114 @@
+# Playwright自动化脚本加载器
+
+## 简介
+
+一个基于`node.js`版`Playwright`的自动化脚本加载器，方便分享自己的脚本给他人使用。
+
+用户下载本项目发行包后，可以像安装插件一样导入`Playwright`自动化脚本，避免配置开发环境。
+
+## 初始化
+
+先安装依赖
+
+```sh
+npm install
+```
+
+然后下载`chromium`，并且必须是编译了编解码器的版本，否则浏览器无法播放视频！
+
+可以到[https://chromium.woolyss.com/](https://chromium.woolyss.com/)下载，绿底表示稳定版本，含`all-codecs+`的才能播放视频
+
+找到合适版本点击`Archive`即可下载
+
+解压后重命名文件夹为`chromium`，移动到项目根目录，确保有`chromium\chrome.exe`
+
+## 启动
+
+终端里面运行`npm run start`，或`node index.js`，即可启动脚本加载器。
+
+## 发行
+
+初始化后额外下载一个node.js的预编译二进制版本，放到项目目录
+
+然后写一个启动脚本即可
+
+比如Windows下可以写一个`start.bat`脚本作为启动脚本，内容为`.\yourpath\node.exe index.js`即可
+
+最后打包给用户，告知用户通过启动脚本启动即可
+
+## 使用
+
+用户把插件放到`plugins`目录下。启动加载器后，用户可以选择一个插件来运行。
+
+## 插件开发
+
+插件开发需要遵循以下规范：
+
+* `plugins`目录下放置插件，一个插件对应一个目录
+* 插件目录下必须有`info.json`保存插件信息（`info.json`是判断文件夹是否为插件文件夹的依据），`info.json`定义插件的`插件名称`、`解释说明`、`作者`、`版本号`信息
+* 可选`icon.png`作为插件的图标，如果没有则显示默认图标
+* 可选`setting.json`存储插件的设置信息，可选`setting.html`用于插件的设置页面，设置页面先于插件加载，用户设置完成后才会加载插件
+* `index.js`作为插件的程序入口，加载插件后执行导出的默认函数
+
+`info.json`格式如下：
+
+```json
+{
+    "name": "插件名称",
+    "description": "插件说明",
+    "author": "作者名称",
+    "version": "版本号"
+}
+```
+
+`index.js`必须提供如下格式的入口函数：
+
+```js
+export default async function main(page, context, setting) {
+    // page是创建好的新页面，context是浏览器上下文对象
+    // 如果有设置文件，setting是一个保存了插件设置信息的对象
+    // 如果没有设置文件，setting为null
+    // 下面可自由编写业务逻辑
+    await page.goto('https://xxxx'); // 跳转网址示例
+}
+```
+
+如果提供`setting.html`，那么加载器会在加载插件前打开设置页面，用户可以根据设置信息来调整插件的运行参数
+
+通过下面的方法获取之前的旧设置：
+
+```js
+// 监听来自插件加载器的消息
+window.addEventListener('message', (msg) => {
+    if (msg.data?.type === 'initialize') {
+        const data = msg.data.data;
+        // data即为setting.json文件的内容，为js对象
+        // 如果没有setting.json文件，data为null
+    }
+});
+```
+
+通过下面的方法发送新的设置：
+
+```js
+// 向插件加载器发送setting json，传入js对象
+function sendSetting2Loader(data) {
+    console.log(JSON.stringify({ type: 'pluginSetting', data: data }));
+}
+```
+
+发送新设置后，会关闭设置页面，创建新页面后调用`index.js`的入口函数开始执行插件内容，并传入新的设置对象。如果发送null则会中断插件加载
+
+本项目`plugins`有相关示例可以参考
+
+## 许可证
+
+本程序遵循 [GPL-3.0-only](https://opensource.org/license/gpl-3-0/)许可证。
+
+本程序仅供学习研究使用，严禁用于商业用途！
+
+> 注意：由于GPL协议的强约束性，如果您将本项目的代码用于您的商业项目，会导致您商业项目的所有代码被迫全部以相同协议开源
+
+本项目许可证的具体内容详见项目根目录下的LICENSE文件
+
+您也可访问[GNU的网站](https://www.gnu.org/licenses/)获取更多有关GPL许可证以及自由软件运动的相关信息

README.md

@@ -0,0 +1,132 @@
+import { startBrowser } from './src/starter.js';
+import { scanPlugins } from './src/pluginsScanner.js';
+import fs from 'fs/promises';
+
+// 发送消息给页面
+async function sendMessage2Page(page, type, data) {
+  const msgObject = { type, ...data };
+  await page.evaluate((msg) => {
+    window.postMessage(msg, '*');
+  }, msgObject);
+}
+
+// 加载插件
+async function loadPlugin(pluginName, pluginFolderName, pluginSettingHtmlFileURL, browser, indexcontext, indexpage) {
+  // js对象形式的插件设置数据
+  let settingData = null;
+
+  // 处理插件自定义的设置页面
+  if (pluginSettingHtmlFileURL) {
+    console.log(`等待用户设置插件 ${pluginName}`);
+
+    // 在加载器的上下文打开插件设置对话框
+    const newPagePromise = indexcontext.waitForEvent('page');
+    await indexpage.evaluate(() => {
+      window.open('about:blank', '_blank', 'left=200,top=200');
+    });
+    const popup = await newPagePromise;
+
+    // 设置加载设置页面
+    await popup.goto(pluginSettingHtmlFileURL);
+
+    // 发送原本的设置数据
+    let settingDataStr = null; // json字符串版本
+    try {
+      // 读取文件内容并且解析为对象
+      settingDataStr = await fs.readFile(`./plugins/${pluginFolderName}/setting.json`, 'utf-8');
+      settingData = JSON.parse(settingDataStr);
+    } catch (e) {
+      // 忽略错误
+    }
+    await sendMessage2Page(popup, 'initialize', { data: settingData });
+
+    // 是否取消加载插件
+    let isCancel = false
+
+    // 监听来自设置页面的消息
+    popup.on('console', async logstr => {
+      let data = null
+      let hasData = false
+      try {
+        const msgObj = JSON.parse(logstr.text());
+        if (msgObj?.type === 'pluginSetting') {
+          data = msgObj.data;
+          hasData = true;
+        }
+      } catch (e) {
+        // 忽略非json输出
+      }
+      if (hasData) {
+        if (data) {
+          const newSettingStrJSON = JSON.stringify(data);
+          // 保存设置到json文件
+          if (settingDataStr !== newSettingStrJSON) {
+            // 不相等才保存
+            await fs.writeFile(`./plugins/${pluginFolderName}/setting.json`, newSettingStrJSON, 'utf-8');
+            console.log(`更新了插件 ${pluginName} 的设置`);
+            settingData = data;
+          }
+          // 设置完成，放出关闭页面信号
+          await popup.evaluate(() => {
+            document.body.innerHTML = '<h1 id="SettingOK">正在设置中...</h1>';
+          });
+        } else {
+          // 取消插件加载
+          isCancel = true;
+          await popup.evaluate(() => {
+            document.body.innerHTML = '<h1 id="SettingOK">正在取消...</h1>';
+          });
+        }
+      }
+    });
+    // 等待用户设置完成，不限制时间
+    await popup.waitForSelector('#SettingOK', { timeout: 0 });
+    popup.close(); // 关闭对话框
+    if (isCancel) {
+      // 取消加载插件
+      console.log(`用户取消加载插件 ${pluginName}`);
+      return;
+    }
+  }
+
+  // 正式加载插件
+  console.log(`加载插件 ${pluginName}`);
+
+  // 创建上下文
+  const context = await browser.newContext();
+
+  // 创建新页面
+  const page = await context.newPage();
+
+  // 根据插件名称动态导入插件
+  const plugin = await import(`./plugins/${pluginFolderName}/index.js`);
+
+  // 调用插件中的 main 函数
+  await plugin.default(page, context, settingData);
+
+  // 插件结束运行
+  console.log(`插件结束运行 ${pluginName}`);
+}
+
+(async () => {
+  // 启动浏览器
+  const { browser, context, page } = await startBrowser();
+
+  // 发送插件列表
+  sendMessage2Page(page, 'initialize', { plugins: await scanPlugins('./plugins') });
+
+  // 监听来自 GUI 的消息
+  page.on('console', async message => {
+    // 保证一定是JSON格式的消息
+    const data = JSON.parse(message.text());
+    if (data?.type === 'loadPlugin') {
+      await loadPlugin(data.name, data.folderName, data.settingHtmlFileURL, browser, context, page);
+    }
+  });
+
+  // 等待GUI告知关闭
+  await page.waitForSelector('#NowExit', { timeout: 0 });
+
+  // 关闭浏览器
+  await browser.close();
+})();

images/pluginDefaultIcon.png

@@ -0,0 +1,15 @@
+{
+  "name": "playwright_automation_script_loader",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "type": "module",
+  "author": "XY0797",
+  "license": "GPLv3",
+  "description": "Playwright自动化脚本加载器",
+  "dependencies": {
+    "playwright": "^1.46.1"
+  }
+}

index.js

@@ -0,0 +1,9 @@
+export default async function main(page, context, setting) {
+    await page.goto('https://www.baidu.com/');
+    await page.getByRole('link', { name: '登录' }).click();
+    await page.getByPlaceholder('手机号/用户名/邮箱').click();
+    await page.getByPlaceholder('手机号/用户名/邮箱').fill(setting.username);
+    await page.getByPlaceholder('密码').click();
+    await page.getByPlaceholder('密码').fill('456');
+    await page.getByRole('checkbox', { name: '阅读并接受' }).check(setting.password);
+}

package-lock.json

@@ -0,0 +1,6 @@
+{
+    "name": "百度登录插件",
+    "description": "自动输入账号密码，勾选同意协议，需用户自己点击登录按钮",
+    "author": "XY0797",
+    "version": "1.0"
+}