55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import { createApp } from 'vue'
|
|
import Sidebar from './Sidebar.vue'
|
|
import '../assets/tailwind.css' // We might need to handle this specially for Shadow DOM
|
|
|
|
const MOUNT_ID = 'insight-reply-sidebar-root'
|
|
|
|
function initSidebar(tweetData?: any) {
|
|
if (document.getElementById(MOUNT_ID)) return
|
|
|
|
// 1. Create Host Element
|
|
const host = document.createElement('div')
|
|
host.id = MOUNT_ID
|
|
document.body.appendChild(host)
|
|
|
|
// 2. Create Shadow Root
|
|
const shadowRoot = host.attachShadow({ mode: 'open' })
|
|
|
|
// 3. Create Container for Vue
|
|
const container = document.createElement('div')
|
|
container.id = 'app'
|
|
shadowRoot.appendChild(container)
|
|
|
|
// 4. Inject Styles into Shadow DOM
|
|
// Note: In development/build, we need to find the generated CSS and inject it.
|
|
// CRXJS usually puts CSS in <link> tags in the head for content scripts.
|
|
// For Shadow DOM, we need to move or clone them into the shadow root.
|
|
const injectStyles = () => {
|
|
const styles = document.querySelectorAll('style, link[rel="stylesheet"]')
|
|
styles.forEach(style => {
|
|
// Only clone styles that look like they belong to our extension
|
|
// This is a heuristic, in a real build we'd use the asset URL
|
|
shadowRoot.appendChild(style.cloneNode(true))
|
|
})
|
|
}
|
|
|
|
// Initial injection
|
|
injectStyles()
|
|
|
|
// 5. Create Vue App
|
|
const app = createApp(Sidebar, { tweetData })
|
|
app.mount(container)
|
|
|
|
console.log('InsightReply Sidebar Mounted in Shadow DOM');
|
|
}
|
|
|
|
// Listen for messages to show/hide or update data
|
|
chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
|
|
if (message.type === 'SHOW_INSIGHT') {
|
|
console.log('[InsightReply Sidebar Mount] Received SHOW_INSIGHT message:', message.payload);
|
|
initSidebar(message.payload);
|
|
sendResponse({ received: true });
|
|
}
|
|
return true;
|
|
});
|