Initialize project

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.tabSize": 2
+}

README.md

@@ -1,2 +1,83 @@
-# apitable-url-to-imagee
-A browser extension designed to extract images from URLs and upload them to APITable. 
+# APITable Url to Image Converter
+
+<p align='center'>
+  <image src="logo/logo-48.png" />
+</p>
+
+<p align='center'>
+  <image src="https://img.shields.io/badge/License-MIT-yellow.svg" />
+</p>
+
+<p align="center">
+  <a href="README.md">English</a>
+  |
+  <a href="README_CN.md">简体中文</a>
+</p>
+
+This is a browser extension that extracts images from URLs and uploads them to APITable.
+
+✨ You can extract images from URL addresses and save them to the "Attachment" field.
+✨ Supports processing multiple URLs separated by commas (in a single cell), enabling multiple attachments to be saved in the same cell.
+✨ Beginner-friendly, developed using basic HTML, JavaScript, and CSS, without requiring knowledge of frameworks like React or Vue.
+
+## Preview
+
+![Preview](docs/url-image-converter.gif)
+
+## Installation
+
+1. Clone the project locally:
+
+  ```bash
+  git clone https://github.com/kwp-lab/apitable-url-to-image.git
+  ```
+
+2. Open the extensions management page in Chrome ([chrome://extensions](chrome://extensions)).
+
+3. Turn on developer mode.
+
+4. Click "Load unpacked" and select the folder you just cloned. ([Guide]((https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked)))
+
+Installation is complete.
+
+## Configuration
+
+Before using the extension, follow these steps to set your API access credentials and host information:
+
+1. Open the extension's options page.
+If you can't find the options page, right-click the extension icon and click button "Options".
+
+2. In the options page, enter your APITable API Token and API Host information.
+If you don't have an API Token yet, you can register and obtain one on the [APITable website](https://apitable.com/).
+
+3. Save the settings and return to the extension's pop-up page.
+
+## Usage
+
+1. Visit [APITable.com](https://apitable.com/) and open the datasheet to be processed.
+
+2. Click the icon of this extension to bring up the operation interface. Select which field to read the URL information from and specify which attachment field to save the image data collected from the URL.
+
+    > Tip 1: URLs must be stored in fields of the following three types: "Single Line Text", "Long Text", and "URL". Other field types will be filtered out and will not appear in the drop-down selection box.
+
+    > Tip 2: You must first open the APITable.com datasheet link and then start the browser extension. Otherwise, the extension will be unable to get the field list of the datasheet.
+
+3. After confirming that everything is correct, click the "conver" button, and the extension will begin extracting images and saving to "attachments" field in the background (extension service worker).
+
+    > Tip: Since this is done in the background, you can close the extension popup window and even the currently active APITable webpage after starting the process. The image extraction and attachment conversion will continue to function normally (but you cannot close the browser...).
+
+## FAQ
+
+**Q: Can other file formats be extracted and saved to APITable?**
+A: Yes. As long as the URL points to a file that can be directly downloaded by the browser, whether it's a PDF or an mp4, it can be converted using this extension.
+
+**Q: Some URLs fail to be converted successfully. How can I check the logs or debug?**
+A: Right-click on the extension pop-up window and select "Inspect" from the menu to view the log messages through the console. Or open the console of the service worker to view the background running logs.
+
+## Contribution
+
+Contributions in the form of code, reporting issues, and suggestions are welcome.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.

README_CN.md

@@ -0,0 +1,86 @@
+# APITable Url to Image Converter
+
+<p align='center'>
+  <image src="logo/logo-48.png" />
+</p>
+
+<p align='center'>
+  <image src="https://img.shields.io/badge/License-MIT-yellow.svg" />
+</p>
+
+<p align="center">
+  <a href="README.md">English</a>
+  |
+  <a href="README_CN.md">简体中文</a>
+</p>
+
+以浏览器扩展程序的形式，实现从URL中提取图像并将其上传到APITable的能力。
+
+✨ 支持 APITable/维格表的整表读取，将URL地址对应的文件下载并转存至“附件”字段当中；
+✨ 支持以“,”分隔的多个URL文本处理（单个单元格内），实现多附件转存至同一单元格内；
+✨ 对入门级开发者友好，使用基础HTML，JavaScript，CSS开发而成，无需掌握React、Vue等框架
+
+## 效果预览
+
+![Preview](docs/url-image-converter.gif)
+
+## 安装
+
+1. 将项目 clone 到本地：
+
+  ```bash
+  git clone https://github.com/kwp-lab/apitable-url-to-image.git
+  ```
+
+2. 在 Chrome 中打开扩展程序管理页面（地址为 `chrome://extensions`）。
+
+3. 打开开发者模式。
+
+4. 点击“加载已解压的扩展程序”，然后选择刚刚 clone 到本地的文件夹。（[官方指南](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked)）
+
+完成安装。
+
+## 配置
+
+在开始使用之前，请按照以下步骤设置您的 API 访问凭证和主机信息：
+
+1. 打开扩展程序的选项页面。
+如果您无法找到选项页面，可以右键点击扩展程序的图标，然后选择“选项”。
+
+2. 在 options 页面中，输入您的 APITable API Token 和 API Host 信息。
+如果您还没有 APITable API Token，可以在 [APITable 官网](https://apitable.com/) 注册并获取。
+
+3. 保存设置并返回扩展程序的主页面。
+
+## 使用步骤
+
+1. 访问 APITable.com, 打开待处理的表格。
+
+2. 在浏览器扩展程序的区域，单击本扩展程序的图标，弹出操作界面。请选择从哪个字段里读取 URL 信息，并且指定从 URL 采集的图片数据保存至哪个附件字段中。
+
+    > 提示1：URL必须要存储在“单行文本”，“多行文本”，“网址”这三种字段类型之中，其他类型字段会被过滤，不会出现在下拉选择框中.
+    > 提示2：必须要先打开 APITable.com 的表格链接，再启动浏览器扩展程序。否则程序无法抓取到表格的字段信息。
+
+3. 确认无误后，点击按钮“conver”，扩展程序将会在后台（extension service worker）开始图片采集和转存附件的操作。
+
+    > 提示：由于是在后台处理。因此执行开始后，你可以关闭程序弹窗，甚至关闭当前激活中的 APITable 网页，图片采集和转存附件工作仍会正常运作。（但不能关闭浏览器...）
+
+
+## 常见问题
+
+**Q：可以采集其他格式的文件并转存至 APITable/维格表吗？**
+A：可以的。只要 URL 指向的是一个可被浏览器直接下载的文件，不管是PDF还是mp4，都可以通过本扩展程序进行转存。
+
+**Q：有一些url无法成功转存成功，我应该如何查看日志或者调试？**
+A: 请在扩展程序弹出框口右键，在菜单中选择“检查”，通过console查看日志消息。或者打开 service worker 的 console 查看后台运行日志。
+
+**Q：该扩展程序可以在[维格表](https://vika.cn)里使用吗？**
+A：可以的，在 options 页面修改 `API Host` 配置项，改为 `https://api.vika.cn`。
+
+## 贡献
+
+欢迎贡献代码、报告问题、提出建议等。
+
+## 许可证
+
+该项目使用 MIT 许可证。请查看 [LICENSE](LICENSE) 以获得更多信息。

foreground.js

@@ -0,0 +1,7 @@
+// This script gets injected into any opened page
+// whose URL matches the pattern defined in the manifest
+// (see "content_script" key).
+// Several foreground scripts can be declared
+// and injected into the same or different pages.
+
+console.log("This prints to the console of the page (injected only if the page url matched)")

imageUploader.js

@@ -0,0 +1,90 @@
+class ImageUploader {
+  constructor(datasheetId, viewId, apiHost, apiToken) {
+    this.datasheetId = datasheetId;
+    this.viewId = viewId;
+    this.apiHost = apiHost;
+    this.apiToken = apiToken;
+  }
+
+  async fetch(imageUrls) {
+    const promises = imageUrls.map((urlObj) => {
+      const url = urlObj.url;
+      return fetch(url).then((response) => response.blob()).then((blob) =>{
+        return {
+          fileName: urlObj.fileName,
+          blob: blob,
+          url: url,
+        };
+     });
+    });
+
+    return Promise.all(promises).then((images) => {
+      console.debug("images", images);
+      return images;
+    });
+
+  }
+
+  async upload(images) {
+    const responses = [];
+    for (let i = 0; i < images.length; i++) {
+      const image = images[i]; 
+      const formData = new FormData();
+      formData.append("file", image.blob, image.fileName);
+
+      const response = await fetch(
+          `${this.apiHost}/fusion/v1/datasheets/${this.datasheetId}/attachments`,
+          {
+            method: "POST",
+            headers: {
+              "Authorization": `Bearer ${this.apiToken}`,
+            },
+            body: formData,
+          }
+      ).then((response) => response.json());
+      responses.push(response);
+      await delay(1000); // wait for 1 second
+    }
+    return responses;
+  }
+
+  async save(recordId, fieldId, uploadResults) {
+    let attachments = []
+    for (const index in uploadResults) {
+      const uploadResult = uploadResults[index];
+      if (uploadResult.success) {
+        attachments.push(uploadResult.data);
+      } else {
+        console.debug(`Failed to upload.`, uploadResult);
+        return uploadResult
+      }
+    }
+
+    if (attachments.length == 0) {
+      return null;
+    }
+
+    const dataToUpdate = JSON.stringify({
+      "records": [
+        {
+          "recordId": recordId,
+          "fields": {
+            [fieldId]: attachments
+          }
+        },
+      ],
+      "fieldKey": "id"
+    })
+
+    const response = await fetch(`${this.apiHost}/fusion/v1/datasheets/${this.datasheetId}/records`, {
+      method: "PATCH",
+      headers: {
+        "Authorization": `Bearer ${this.apiToken}`,
+        "Content-Type": "application/json"
+      },
+      body: dataToUpdate,
+    });
+    await delay(1000);
+    return response.json();
+  }
+}

manifest.json

@@ -0,0 +1,33 @@
+{
+    "manifest_version": 3,
+    "name": "APITable Url to Image Converter",
+    "description": "An extension designed to extract images from URLs and upload them to APITable.",
+    "version": "0.1.0",
+    "icons": {
+        "16": "logo/logo-16.png",
+        "48": "logo/logo-48.png",
+        "128": "logo/logo-128.png"
+    },
+    "options_ui": {
+        "page": "settings/settings.html",
+        "open_in_tab": false
+      },
+
+    "action": {
+        "default_title": "Convert Url to Image",
+        "default_popup": "popup/popup.html"
+    },
+    "permissions": [
+        "storage"
+    ],
+    "host_permissions": [
+        "*://*/*"
+    ],
+    "background": {
+        "service_worker": "service-worker.js"
+    },
+    "content_scripts": [{
+        "js": ["foreground.js"],
+        "matches": ["https://apitable.com/*"]
+    }]
+}