Anthony
Anthony

Reputation: 3793

background.js is no longer accessible after iframe is loaded in background.html

In background.js, I injected an 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);
  }

However, once the iframe is loaded, the background.js no longer responds to doubanSearch request. Is there a solution to allow background.js remain responsive to future requests even iframe is loaded?

I have checked the content.js separately and can confirm it does what I want it to be doing.

update 1

The netflixContent.js that makes requests:

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);

It is opensource hosted on github in case you need to check out the entire code. I'm really new to js and chrome extension development, so please execuse me for crappy coding :).

update 2

The background page before a request is sent:

before request is sent

The background page after a request is sent and iframe is loaded

after request is sent and iframe is loaded

Also, the background page link is no longer available from the chrome://extensions:

enter image description here

Upvotes: 0

Views: 108

Answers (1)

woxxom
woxxom

Reputation: 73596

The site performs frame-busting (assigning top.location to an URL of the page itself) which navigates the background page to the site URL so the extension no longer has a background page. It looks like an oversight in Chrome which has been intermittently prevented in some recent versions and is about to be fixed for good in v67.

The solution is to sandbox the iframe by adding the following attribute:

frame.sandbox = 'allow-scripts';

Some sites may require more features to be allowed e.g. allow-forms, see MDN for the full list.

Upvotes: 1

Related Questions