访问一个跨源域的独立iframe chrome扩展

Question

我构建了一个chrome扩展作为独立的iframe，它通过content.js脚本注入网站。用户可以通过快捷方式访问扩展。因此，如果用户输入快捷方式，就会弹出iframe。在iframe内部是一个输入字段，当用户输入快捷方式时，我希望聚焦该字段。

我的第一个想法是做这样的事情：

document.querySelector('iframe').contentWindow.document.getElementByid('#myInput').focus()

但这确实导致了以下错误：

const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');

window.addEventListener('message', event => {
    // IMPORTANT: check the origin of the data! 
    if (event.origin.startsWith('http://your-first-site.com')) { 
        // The data was sent from your site.
        // Data sent with postMessage is stored in event.data:
        console.log(event.data); 
    } else {
        // The data was NOT sent from your site! 
        // Be careful! Do not use it. This else branch is
        // here just for clarity, you usually shouldn't need it.
        return; 
    } 
}); 

Answer 1

听起来您只需要在iframe本身变得聚焦后自动聚焦输入元素。

内容JS：

const iframe = document.createElement('iframe');
iframe.src = chrome.runtime.getURL('iframe.html');
iframe.style.cssText = '...............';
iframe.onload = () => iframe.focus();
document.body.appendChild(iframe);

iFrame.js：

js prettyprint-override">window.addEventListener('focus', () => {
  document.getElementById('myInput').focus();
});