launchr/src/content/index.ts
2024-12-17 18:50:58 -03:00

72 lines
2.3 KiB
TypeScript

import { createRoot } from 'react-dom/client';
import SaveButton from './components/SaveButton';
import './index.css';
function addSaveButtonToPost(post: Element) {
if (post.querySelector('.launchr-save-button-container')) {
return;
}
// Criar container para o botão
const buttonContainer = document.createElement('div');
buttonContainer.className = 'launchr-save-button-container';
// Criar root para o React
const root = createRoot(buttonContainer);
// Renderizar o componente SaveButton
root.render(
<SaveButton
onSave={async () => {
const contentElement = post.querySelector('.feed-shared-update-v2__description, .break-words');
const authorElement = post.querySelector('.feed-shared-actor__name, .update-components-actor__name');
const dateElement = post.querySelector('span.feed-shared-actor__sub-description span[aria-hidden="true"], span.update-components-actor__sub-description time');
const postLinkElement = post.querySelector('a[href*="/feed/update/"], a[data-control-name="share_link"], a[href*="/posts/"]');
const content = contentElement?.textContent?.trim() || '';
const author = authorElement?.textContent?.trim() || '';
const date = dateElement?.textContent?.trim() || '';
const postLink = postLinkElement?.getAttribute('href') || window.location.href;
return new Promise((resolve) => {
chrome.runtime.sendMessage({
type: 'SAVE_POST',
data: {
content,
author,
date,
postLink
}
}, (response) => {
resolve(response);
});
});
}}
/>
);
// Encontrar onde inserir o botão
const actionsContainer = post.querySelector('.feed-shared-social-actions, .social-details-social-counts');
if (actionsContainer) {
actionsContainer.appendChild(buttonContainer);
} else {
post.appendChild(buttonContainer);
}
}
// Observer para detectar novos posts
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node instanceof Element && node.matches('[data-id]')) {
addSaveButtonToPost(node);
}
});
});
});
// Iniciar observação
observer.observe(document.body, {
childList: true,
subtree: true
});