chrome extensions (#4308)

Build chrome extensions that allow interaction with browser content

intergrations/extension_chrome/README.md

@@ -0,0 +1,45 @@
+# Chrome Extension
+
+chrome-extension/
+│
+├── manifest.json         # Main configuration file for the extension
+├── popup.html          # Main user interface of the extension
+├── popup.js            # Script for the main interface
+├── background.js       # Background script for the extension
+├── content.js          # Script to interact with web pages
+├── styles/
+│   └── popup.css       # CSS file for the popup
+├── icons/
+│   ├── icon16.png      # 16x16 pixel icon
+│   ├── icon48.png      # 48x48 pixel icon
+│   └── icon128.png     # 128x128 pixel icon
+├── assets/
+│   └── ...             # Directory for other assets (images, fonts, etc.)
+├── scripts/
+│   ├── utils.js        # File containing utility functions
+│   └── api.js          # File containing API call logic
+└── README.md           # Instructions for using and installing the extension
+
+
+# Installation
+1. Open chrome://extensions/.
+2. Enable Developer mode.
+3. Click Load unpacked and select the project directory.
+# Features
+1. Interact with web pages.
+2. Run in the background to handle logic.
+# Usage
+- Click the extension icon in the toolbar.
+- Follow the instructions in the interface.
+# Additional Notes
+- **manifest.json**: This file is crucial as it defines the extension's metadata, permissions, and entry points.
+- **background.js**: This script runs independently of any web page and can perform tasks such as listening for browser events, making network requests, and storing data.
+- **content.js**: This script injects code into web pages to manipulate the DOM, modify styles, or communicate with the background script.
+- **popup.html/popup.js**: These files create the popup that appears when the user clicks the extension icon.
+icons: These icons are used to represent the extension in the browser's UI.
+More Detailed Explanation
+- **manifest.json**: Specifies the extension's name, version, permissions, and other details. It also defines the entry points for the background script, content scripts, and the popup.
+- **background.js**: Handles tasks that need to run continuously, such as syncing data, listening for browser events, or controlling the extension's behavior.
+- **content.js**: Interacts directly with the web page's DOM, allowing you to modify the content, style, or behavior of the page.
+- **popup.html/popup.js**: Creates a user interface that allows users to interact with the extension.
+Other files: These files can contain additional scripts, styles, or assets that are used by the extension.

intergrations/extension_chrome/background.js

@@ -0,0 +1,17 @@
+chrome.runtime.onInstalled.addListener(() => {
+  console.log("Tiện ích đã được cài đặt!");
+});
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.action === "PAGE_INFO") {
+    console.log( message);
+
+
+    chrome.storage.local.set({ pageInfo: message }, () => {
+      console.log("Page info saved to local storage.");
+    });
+
+    // Send a response to the content script
+    sendResponse({ status: "success", message: "Page info received and processed." });
+  }
+});

intergrations/extension_chrome/content.js

@@ -0,0 +1,68 @@
+(function () {
+  const extractElementData = (el) => {
+    const tag = el.tagName.toLowerCase();
+    if (
+      tag === "input" &&
+      el.name !== "DXScript" &&
+      el.name !== "DXMVCEditorsValues" &&
+      el.name !== "DXCss"
+    ) {
+      return {
+        type: "input",
+        name: el.name,
+        value:
+          el.type === "checkbox" || el.type === "radio"
+            ? el.checked
+              ? el.value
+              : null
+            : el.value,
+      };
+    } else if (tag === "select") {
+      const selectedOption = el.querySelector("option:checked");
+      return {
+        type: "select",
+        name: el.name,
+        value: selectedOption ? selectedOption.value : null,
+      };
+    } else if (tag.startsWith("h") && el.textContent.trim()) {
+      return { type: "header", tag, content: el.textContent.trim() };
+    } else if (
+      ["label", "span", "p", "b", "strong"].includes(tag) &&
+      el.textContent.trim()
+    ) {
+      return { type: tag, content: el.textContent.trim() };
+    }
+  };
+
+  const getElementValues = (els) =>
+    Array.from(els).map(extractElementData).filter(Boolean);
+
+  const getIframeInputValues = (iframe) => {
+    try {
+      const iframeDoc = iframe.contentWindow.document;
+      return getElementValues(
+        iframeDoc.querySelectorAll("input, select, header, label, span, p")
+      );
+    } catch (e) {
+      console.error("Can't access iframe:", e);
+      return [];
+    }
+  };
+
+  const inputValues = getElementValues(
+    document.querySelectorAll("input, select, header, label, span, p")
+  );
+  const iframeInputValues = Array.from(document.querySelectorAll("iframe")).map(
+    getIframeInputValues
+  );
+
+  return `
+  ## input values\n
+  \`\`\`json\n
+  ${JSON.stringify(inputValues)}\n
+  \`\`\`\n
+  ## iframe input values\n
+  \`\`\`json\n
+  ${JSON.stringify(iframeInputValues)}\n
+  \`\`\``;
+})();

intergrations/extension_chrome/manifest.json

@@ -0,0 +1,34 @@
+{
+  "manifest_version": 3,
+  "name": "Ragflow Extension",
+  "description": "Ragflow for Chrome",
+  "version": "1.0",
+  "options_page": "options.html",
+
+  "permissions": ["activeTab", "scripting", "storage"],
+  "background": {
+    "service_worker": "background.js"
+  },
+
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon-16x16.png",
+      "48": "icons/icon-48x48.png",
+      "128": "icons/icon-128x128.png"
+    }
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "css": ["styles/popup.css"]
+    }
+  ],
+  "icons": {
+    "16": "icons/icon-16x16.png",
+    "48": "icons/icon-48x48.png",
+    "128": "icons/icon-128x128.png"
+  }
+}

intergrations/extension_chrome/options.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>RagFlow option</title>
+    <link rel="stylesheet" href="styles/options.css" />
+</head>
+
+<body id="ragflow">
+    <div id="form-config">
+        <div class="header">
+            <img src="assets/logo-with-text.png" alt="Logo" class="logo" />
+        </div>
+        <div class="content">
+            <label for="base-url">Base URL:</label>
+            <input type="text" id="base-url" placeholder="Enter base URL" />
+
+            <label for="from">From:</label>
+            <select id="from">
+                <option selected value="agent">agent</option>
+                <option value="chat">chat</option>
+            </select>
+
+            <label for="auth">Auth:</label>
+            <input type="text" id="auth" placeholder="Enter auth" />
+
+            <label for="shared-id">Shared ID:</label>
+            <input type="text" id="shared-id" placeholder="Enter shared ID" />
+
+            <button id="save-config">🛖</button>
+
+        </div>
+    </div>
+    <script src="options.js"></script>
+</body>
+
+</html>

intergrations/extension_chrome/options.js

@@ -0,0 +1,36 @@
+document.addEventListener("DOMContentLoaded", () => {
+    
+  chrome.storage.sync.get(["baseURL", "from", "auth", "sharedID"], (result) => {
+    if (result.baseURL) {
+      document.getElementById("base-url").value = result.baseURL;
+    }
+    if (result.from) {
+      document.getElementById("from").value = result.from;
+    }
+    if (result.auth) {
+      document.getElementById("auth").value = result.auth;
+    }
+    if (result.sharedID) {
+      document.getElementById("shared-id").value = result.sharedID;
+    }
+  });
+
+  document.getElementById("save-config").addEventListener("click", () => {
+    const baseURL = document.getElementById("base-url").value;
+    const from = document.getElementById("from").value;
+    const auth = document.getElementById("auth").value;
+    const sharedID = document.getElementById("shared-id").value;
+
+    chrome.storage.sync.set(
+      {
+        baseURL: baseURL,
+        from: from,
+        auth: auth,
+        sharedID: sharedID,
+      },
+      () => {
+        alert("Successfully saved");
+      }
+    );
+  });
+});

intergrations/extension_chrome/popup.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+  <title>RAGFLOW</title>
+  <link rel="stylesheet" href="styles/popup.css" />
+</head>
+
+<body id="ragflow">
+  <div class="window">
+    <textarea id="getHtml"></textarea>
+    <iframe src="" style="width: 100%; height: 100%; min-height: 600px" frameborder="0"></iframe>
+  </div>
+  <script src="popup.js"></script>
+</body>
+
+</html>

intergrations/extension_chrome/popup.js

@@ -0,0 +1,24 @@
+document.addEventListener("DOMContentLoaded", () => {
+  chrome.storage.sync.get(["baseURL", "from", "auth", "sharedID"], (result) => {
+    if (result.baseURL && result.sharedID && result.from && result.auth) {
+      const iframeSrc = `${result.baseURL}chat/share?shared_id=${result.sharedID}&from=${result.from}&auth=${result.auth}`;
+      const iframe = document.querySelector("iframe");
+      iframe.src = iframeSrc;
+    }
+  });
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    chrome.scripting.executeScript(
+      {
+        target: { tabId: tabs[0].id },
+        files: ["content.js"],
+      },
+      (results) => {
+        if (results && results[0]) {
+          const getHtml = document.getElementById("getHtml");
+          getHtml.value = results[0].result;
+
+        }
+      }
+    );
+  });
+});

intergrations/extension_chrome/styles/options.css

@@ -0,0 +1,91 @@
+#ragflow {
+  font-family: "Segoe UI", Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 600px;
+}
+
+#ragflow .window {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  overflow: hidden;
+}
+#ragflow #form-config {
+  background-color: #fff;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+#ragflow .header {
+  background-color: #fff;
+  padding: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+}
+
+#ragflow .header .title {
+  font-size: 16px;
+}
+
+#ragflow .header .logo {
+  width: 100px; /* Adjust size as needed */
+  height: auto;
+  margin-right: 10px;
+}
+
+#ragflow .content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+#ragflow label {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+#ragflow input,
+#ragflow select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 15px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-sizing: border-box;
+}
+
+#ragflow button {
+  background-color: #0078d4;
+  color: #fff;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+#ragflow button:hover {
+  background-color: #005bb5;
+}
+
+#ragflow #config-button {
+  display: flex;
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  font-size: 22px;
+}
+#ragflow #config-button:hover {
+  cursor: pointer;
+}

intergrations/extension_chrome/styles/popup.css

@@ -0,0 +1,20 @@
+#ragflow {
+  font-family: "Segoe UI", Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 320px;
+}
+
+#ragflow .window {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  overflow: hidden;
+}
+#ragflow #output {
+  position: absolute;
+}