回答我自己的問題，因為沒有人對此有任何解釋。然而，這并沒有回答最初的問題，但我認為如果有人偶然發現這個問題，他們應該知道我是如何解決它的。
最后，我放棄了 iFrame 的想法，并使用Shadow DOM的概念來將頁面的 CSS 和注入的擴展的 CSS 彼此隔離。
盡管這種方法有其自身的注意事項*，但恕我直言，它優于使用 iframe。
*就像需要手動將自定義樣式注入到影子根中一樣。并且還需要將影子根元素存儲在應用程序所有部分都可以訪問的地方（不是 Vuex，元素本身不能存儲在那里），以便使諸如此類的事情正常工作。
這是我用來將側邊欄注入頁面的代碼片段：
// append a new node to the document body
let shadowHost = document.createElement("div");
document.body.appendChild(shadowHost);
? ??
// make it the root of our shadow DOM
let shadow = shadowHost.attachShadow({ mode: 'open'})
// create a new node for the sidebar
let sidebar = document.createElement("div");
sidebar.id = "my-sidebar";
// and also a style node into which we put all our custom css
const style = document.createElement('style');
// getPackedCss is my function that returns all the custom css as a string
style.textContent = getPackedCss();
// and append those to the shadow DOM
shadow.appendChild(style);
shadow.appendChild(sidebar);
? ??
// store the shadow root somewhere that we can access
// globally in order to select elements from it
staticStore.shadowRoot = shadow;
// create our vue app and mount it to the shadow DOM
const app = createApp(MyApp);
app.mount(sidebar);
如果您確實需要 Vue 3 和 iframe 來互相點贊，我想您只能靠自己了。
