feat: myriad extension v1.0.22

.gitignore

@@ -0,0 +1,32 @@
+# Build artifacts
+build/
+*.crx
+*.pem
+*.zip
+!extension_store.crx
+!extension_store.zip
+!extension_installer.zip
+
+# IDE and editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+
+# Development
+.aider*
+.env

README.md

@@ -1,3 +1,121 @@
-# myriad-importer-extension
+# Myriad Importer Extension
 
-This extension is LIVE at https://myriad.social/extension / https://chrome.google.com/webstore/detail/myriad-extension/caafifipbilmonkndcpppfehkhappcci
+A browser extension that enables seamless content importing and cross-posting from various social media platforms to Myriad.social.
+
+## Official Links
+This extension is LIVE at:
+- https://myriad.social/extension
+- https://chrome.google.com/webstore/detail/myriad-extension/caafifipbilmonkndcpppfehkhappcci
+
+## Technical Overview
+
+The extension provides several key functionalities:
+
+### Authentication
+- Uses a magic link authentication system via email
+- Authenticates through the Myriad.social API (`api.myriad.social/authentication`)
+- Stores authentication tokens and username in local storage for persistent sessions
+- Includes logout functionality with confirmation dialog
+
+### Content Import Support
+1. **Twitter Posts**
+   - Automatically detects Twitter post URLs
+   - Imports posts directly to selected Myriad Experience
+   - Shows preview of imported posts in embedded iframe
+
+2. **Reddit Posts**
+   - Detects Reddit post URLs
+   - Direct importing to selected Myriad Experience
+   - Shows preview of imported posts in embedded iframe
+
+3. **YouTube Integration**
+   - Automatically converts YouTube URLs to embedded iframes
+   - Supports optional captions
+   - Full-width responsive video player integration
+
+4. **Twitch Integration**
+   - Converts Twitch channel URLs to embedded players
+   - Automatically configures proper parent domain settings
+   - Supports channel streaming embeds
+
+5. **Facebook Integration**
+   - Supports embedding of Facebook posts and videos
+   - Automatic conversion of mobile/web URLs to proper embed format
+   - Responsive iframe implementation
+
+### Experience Management
+- Automatic creation of default Experience if none exists
+- Experience selector with refresh capability
+- Stores selected Experience as default in local storage
+- Direct links to selected Experience page
+
+### UI Components
+- Clean, responsive popup interface
+- Purple gradient buttons with hover effects
+- Loading spinner for async operations
+- User feedback system with timed messages
+- Conditional display of import/post options based on current URL
+- Embedded post preview iframe for existing content
+- Logout confirmation dialog
+
+## Technical Components
+
+- `background.js`: Manages Experience data and background tasks
+- `contentScript.js`: Handles text grabbing from pages
+- `popup.js`: Controls the extension's UI, authentication, and API interactions
+- Custom styling with Mulish font family
+- Secure API integration with Myriad.social endpoints
+
+## API Integration
+- Base URL: `https://api.myriad.social`
+- Key endpoints:
+  - `/authentication/otp/email` - Magic link generation
+  - `/authentication/login/otp` - Authentication
+  - `/user/posts/import` - Content importing
+  - `/user/experiences` - Experience management
+  - `/experiences/post` - Adding posts to experiences
+
+## Building and Packaging
+
+### Development Build
+To test the extension locally:
+1. Open Chrome and navigate to `chrome://extensions/`
+2. Enable "Developer mode" (toggle in top right)
+3. Click "Load unpacked"
+4. Select your extension directory
+
+### Production Build
+To package the extension for the Chrome Web Store:
+
+1. Clean the build directory:
+```bash
+rm -rf build/
+mkdir -p build
+```
+
+2. Create the distribution package:
+```bash
+zip -r build/extension_store.zip \
+  manifest.json \
+  popup.html \
+  popup.js \
+  background.js \
+  contentScript.js \
+  myriadlogo16.png \
+  myriadlogo48.png \
+  myriadlogo128.png
+```
+
+3. Create the Chrome extension package (optional):
+- Open Chrome and go to `chrome://extensions/`
+- Enable "Developer mode"
+- Click "Pack extension"
+- Select your extension directory
+- Click "Pack Extension"
+- Move the generated files:
+```bash
+mv extension.crx build/extension_store.crx
+mv extension.pem build/extension.pem
+```
+
+The `build/extension_store.zip` file can be submitted to the Chrome Web Store for publication.

background.js

@@ -1,32 +1,57 @@
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-  if (!changeInfo.url) return;
-
-  const url = changeInfo.url;
-  if (!url.includes("twitter.com") && !url.includes("reddit.com")) return;
-
-  const match = url.includes("twitter.com")
-    ? url.match(/https:\/\/twitter\.com\/[^\/]+\/status\/(\d+)/)
-    : url.match(/https:\/\/www\.reddit\.com\/r\/[^\/]+\/comments\/(\w+)/);
-
-  if (!match) return;
-
-  const postId = match[1];
-  const storageKey = `myriadUrl_${tabId}`;
-
-  fetch('https://api.myriad.social/user/posts?pageLimit=200')
-    .then(response => response.json())
-    .then(data => {
-      const post = data.data.find(post => post.originPostId === postId);
-
-      if (!post) {
-        chrome.action.setBadgeText({text: '', tabId: tabId});
-        return;
-      }
-
-      const myriadUrl = `https://app.myriad.social/post/${post.id}`;
-      chrome.storage.local.set({[storageKey]: myriadUrl});
-      chrome.action.setBadgeBackgroundColor({color: [255, 0, 0, 255]});
-      chrome.action.setBadgeText({text: 'i', tabId: tabId});
-    })
-    .catch(error => console.error('Error:', error));
-});
+
+
+
+function fetchAndStoreExperiences() {
+  // Retrieve access token from local storage
+  var base_url='https://api.myriad.social'
+  chrome.storage.local.get(['accessToken', 'username'], function(items) {
+    var accessToken = items.accessToken;
+    var username = items.username;
+
+    var headers = {
+      'accept': 'application/json',
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer ' + accessToken,
+    };
+
+    var url = base_url + "/user/experiences";
+    var page = 1;
+    var pagelimit = 10;
+    var filter = '{"where":{"deletedAt":{"$exists":false}},"order":"createdAt DESC","include":["user",{"relation":"experience","scope":{"include":[{"relation":"user","scope":{"include":[{"relation":"accountSetting"}]}}]}}]}';
+    var experiences = {}; // To store the Experience Names and IDs
+
+    function fetchPage() {
+      var params = new URLSearchParams({ "pageNumber": page, "pageLimit": pagelimit, "filter": filter });
+      fetch(url + "?" + params.toString(), { headers: headers })
+        .then(response => response.json())
+        .then(data => {
+       if (!data || !data.data) {
+          console.error('Unexpected data structure:', data);
+          return; // Exit early if data or data.data is undefined
+        }
+          var filtered_experiences = data.data.filter(exp => exp.experience.user.username === username);
+          filtered_experiences.forEach(exp => {
+            var experience_id = exp.experience.id;
+            var experience_name = exp.experience.name;
+            experiences[experience_name] = experience_id;
+          });
+
+          if (data.meta.additionalData.totalOwnedExperience > Object.keys(experiences).length) {
+            page += 1;
+            fetchPage(); // Fetch the next page if there are more experiences
+          } else {
+            // Store the experiences in local storage
+            chrome.storage.local.set({ "experiences": JSON.stringify(experiences) }, function() {
+              console.log("Experiences have been saved to local storage.");
+              //populateExperiences(experiences); // Populate the experiences in the optgroup
+            });
+          }
+        })
+        .catch(error => console.error('Error:', error));
+    }
+
+    fetchPage(); // Start fetching the first page
+  });
+}
+
+

build/readme.md

@@ -1,8 +1,37 @@
-- Download everything here as a zip file by going to https://myriad.social/ext
-- Unzip the file. You will see a *.zip* file and a *.crx* file
-- Open Google Chrome / Microsoft Edge / Brave / Chromium.
-- Go to chrome://extensions using the URL bar.
-- Toggle "Developer Mode" (usually top right) to *on*.
-- Drag the *.crx* file onto the page. If this fails, unzip the *.zip* file and press "Load Unpacked" button on the top left and choose the unzipped folder.
-- Find the Myriad logo under the puzzle piece icon, and pin it.
-- Use the extension by clicking on the Myriad logo and following the instructions to log in and start importing.
+# Installation Guide for Myriad Extension
+
+## Quick Start
+1. Download everything as a zip file from https://myriad.social/ext
+2. Unzip the file. You will see a *.zip* file and a *.crx* file
+3. Open Google Chrome / Microsoft Edge / Brave / Chromium
+4. Go to chrome://extensions using the URL bar
+5. Toggle "Developer Mode" (usually top right) to *on*
+6. Drag the *.crx* file onto the page
+7. Find the Myriad logo under the puzzle piece icon, and pin it
+8. Click the Myriad logo and follow the login instructions to start importing
+
+## Detailed Installation Methods
+
+### Method 1: Direct Installation (Recommended)
+1. Use the `.crx` file from the downloaded package
+2. Navigate to `chrome://extensions` in your browser
+3. Enable "Developer Mode" using the toggle in the top right
+4. Drag and drop the `.crx` file onto the extensions page
+
+### Method 2: Manual Installation (If Method 1 fails)
+1. Unzip the `.zip` file to a local directory
+2. Navigate to `chrome://extensions` in your browser
+3. Enable "Developer Mode" using the toggle in the top right
+4. Click "Load Unpacked" button on the top left
+5. Select the unzipped folder
+
+## Supported Browsers
+- Google Chrome
+- Microsoft Edge
+- Brave
+- Any Chromium-based browser
+
+## Troubleshooting
+- If the `.crx` installation fails, try the manual installation method
+- Ensure Developer Mode is enabled before installation
+- Check that all files are properly extracted when using manual installation

contentScript.js

@@ -1,24 +1,6 @@
-
-chrome.runtime.onMessage.addListener(
-    function(request, sender, sendResponse) {
-        if (request.message === "get_selected_text") {
-            var selectedText = window.getSelection().toString();
-
-            // Truncate it to the first 1000 characters
-            selectedText = selectedText.substr(0, 1000);
-
-            // Break it into lines
-            var textBlocks = selectedText.split('\n').filter(function (txt) {
-                // Remove empty lines
-                return txt.trim().length > 0;
-            });
-
-            // Convert each line into a link
-            textBlocks = textBlocks.map(function (txt) {
-                return `<p><i>${txt}</i></p>`;
-            });
-
-            sendResponse({data: textBlocks});
-        }
-    }
-);
+chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
+  if (message.action === "grabText") {
+    const textContent = document.body.innerText;
+    chrome.runtime.sendMessage({ action: "textGrabbed", text: textContent });
+  }
+});

manifest.json

@@ -1,16 +1,18 @@
 {
   "manifest_version": 3,
   "name": "Myriad Extension",
-  "version": "1.0",
+  "version": "1.022",
   "description": "Import and Post to Myriad",
   "permissions": [
     "activeTab", 
     "storage",
     "*://*.twitter.com/*",
     "*://*.reddit.com/*",
     "*://*.twitch.tv/*",
-    "*://*.youtube.com/*"
+    "*://*.youtube.com/*",
+    "*://*.facebook.com/*"
   ],
+
   "action": {
     "default_popup": "popup.html",
     "default_icon": {