javascript - 在background.html中加载iframe后，background.js不再可访问

Question

在background.js中，我注入(inject)了一个iframe:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.action == "doubanSearch")
            test(request.title, request.year);
    }
);

function test(title, year){
    var frame = document.createElement('iframe');
    frame.src = 'https://movie.douban.com/subject_search?cat=1002&search_text=' + title + ' '+ year;
    document.body.appendChild(frame);
  }

但是，一旦加载了iframe，background.js就不再响应doubanSearch请求。是否有解决方案允许 background.js 即使加载了 iframe 也能保持对 future 请求的响应？

我已经单独检查了 content.js 并可以确认它执行了我希望它执行的操作。

更新1

发出请求的 netflixContent.js:

var prevDOM = null;    
var prevMovieTitle = 'prevMovie';

// Mouse listener for any move event on the current document.
document.addEventListener('mousemove', function (e) {
    var srcElement = e.srcElement; 
    if (srcElement == null)
        return;

    if (prevDOM != srcElement){
        prevDOM = srcElement;    
        return;    
    }       

    // find the bob-overlay class    
    if (srcElement.parentElement != null && srcElement.parentElement.className.startsWith('bob')) {    
        while (srcElement.className!="bob-overlay"){    
            srcElement = srcElement.parentElement;    
            // if srcElement is no longer a bob- class, we are out of luck here.    
            if (srcElement == null || !srcElement.className.startsWith('bob'))    
                return;    
        }    
    }     
        
    // the srcElement at this stage has to be bob-overlay class!   
    if (srcElement == null || srcElement.className!="bob-overlay")    
        return;        

    // now we are in the right place, get movie title and publication year    
    var movieTitle = srcElement.getElementsByClassName('bob-title');    
    var movieYear = srcElement.getElementsByClassName('year');            

    if (movieTitle.length != 1){    
        console.log('Movie title not found.', srcElement);    
        return;    
    }

    if (movieYear.length != 1){    
        console.log('Movie year not found.', srcElement);    
        return;    
    }        

    // now get the title and year    
    movieTitle = movieTitle[0].textContent;    
    movieYear = movieYear[0].textContent.trim();
        
    // if the current movie is the same as the previous movie, we return.    
    if (movieTitle == prevMovieTitle)    
        return;

    // return if title is empty    
    if (movieTitle == '')    
        return;

    // if movie year isn't empty, add parenthesis.    
    if (movieYear != '')   
        movieYear = '(' + movieYear + ')';        

    prevMovieTitle = movieTitle;    
    console.log('Movie found:', movieTitle, movieYear);

    // replace special characters with space.    
    movieTitle = movieTitle.replace(/[^\w\s]/g, ' ').trim();    
    console.log('Movie found (special characters removed) :', movieTitle, movieYear);
        
    // now let's send the message and start searching!    
    chrome.runtime.sendMessage({action: 'doubanSearch', title: movieTitle, year: movieYear});                

}, false);

它是开源的，托管于 github如果您需要查看整个代码。我对 js 和 chrome 扩展开发非常陌生，所以请原谅我的蹩脚编码:)。

更新2

发送请求前的后台页面:

发送请求并加载 iframe 后的后台页面

此外，后台页面链接不再可从 chrome://extensions 获取:

Answer 1

网站执行框架破坏(将 top.location 分配给页面本身的 URL)，将后台页面导航到网站 URL，以便扩展不再存在有一个背景页面。这看起来像是 Chrome 中的一个疏忽，在最近的一些版本中已间歇性地被阻止，并且即将在 v67 中得到永久修复。

解决方案是通过添加以下属性对 iframe 进行沙箱处理:

frame.sandbox = 'allow-scripts';

某些网站可能需要允许更多功能，例如允许表单，请参阅MDN获取完整列表。