אידטיש

Creating a browser extension to add a "Like/Love" button under each post on `forum.yidtish.com` involves several steps. Below is a guide to help you build a basic extension. This example assumes you have some familiarity with JavaScript, HTML, and browser extension development.

---

### Step 1: Set Up the Extension Structure
Create a folder for your extension and add the following files:

1. **`manifest.json`**: This file defines the extension's metadata and permissions.
2. **`content.js`**: This script will run on the forum page and add the "Like/Love" button.
3. **`styles.css`**: Optional, for styling the button.

---

### Step 2: Create the `manifest.json` File
This file tells the browser about your extension and its permissions.

```json
{
"manifest_version": 3,
"name": "Yidtish Forum Like Button",
"version": "1.0",
"description": "Adds a Like/Love button under each post on forum.yidtish.com.",
"permissions": ["activeTab", "scripting"],
"host_permissions": ["https://forum.yidtish.com/*"],
"content_scripts": [
{
"matches": ["https://forum.yidtish.com/*"],
"js": ["content.js"],
"css": ["styles.css"]
}
]
}
```

---

### Step 3: Create the `content.js` File
This script will inject the "Like/Love" button under each post.

```javascript
// Function to add the Like/Love button
function addLikeButton(post) {
// Check if the button already exists
if (post.querySelector('.custom-like-button')) return;

// Create the button
const likeButton = document.createElement('button');
likeButton.className = 'custom-like-button';
likeButton.textContent = ' Like/Love';
likeButton.style.marginTop = '10px';
likeButton.style.cursor = 'pointer';

// Add click event to simulate pressing the Like/Love button on top of the post
likeButton.addEventListener('click', () => {
const likeButtonOnTop = post.querySelector('.like-button-selector'); // Replace with the actual selector for the Like/Love button
if (likeButtonOnTop) {
likeButtonOnTop.click();
likeButton.textContent = ' Liked!';
likeButton.disabled = true;
}
});

// Append the button to the post
post.appendChild(likeButton);
}

// Find all posts on the page
const posts = document.querySelectorAll('.post-selector'); // Replace with the actual selector for posts

// Add the Like/Love button to each post
posts.forEach(post => {
addLikeButton(post);
});

// Optional: Use MutationObserver to handle dynamically loaded posts
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.matches && node.matches('.post-selector')) { // Replace with the actual selector for posts
addLikeButton(node);
}
});
});
});

observer.observe(document.body, { childList: true, subtree: true });
```

---

### Step 4: Create the `styles.css` File (Optional)
Add custom styles for the button.

```css
.custom-like-button {
background-color: #ff4757;
color: white;
border: none;
padding: 8px 12px;
border-radius: 5px;
font-size: 14px;
}

.custom-like-button:hover {
background-color: #ff6b81;
}
```

---

### Step 5: Load the Extension in Your Browser
1. Open your browser (e.g., Chrome).
2. Go to `chrome://extensions/`.
3. Enable "Developer mode" (toggle in the top-right corner).
4. Click "Load unpacked" and select the folder containing your extension.

---

### Step 6: Test the Extension
1. Navigate to `forum.yidtish.com`.
2. Verify that the "Like/Love" button appears under each post.
3. Click the button to ensure it triggers the Like/Love action on the post.

---

### Notes
- Replace `.post-selector` and `.like-button-selector` with the actual CSS selectors for