I've been messing around with packaged chrome applications today to see how much of a website one can manipulate with the code-injection feature.
I've been using twitter.com/#!/login as my sandbox because it contains a pretty diverse array of elements.
For some reason, the following code does nothing:
chrome.tabs.create({url: 'https://twitter.com/#!/login/'}, function (tab) {
chrome.tabs.executeScript(tab.id, {code: "jQuery('.main').remove();"}, function() {
console.log('code executed');
});
});
It isn't like I can't access the page at all, because this does work:
chrome.tabs.create({url: 'https://twitter.com/#!/login/'}, function (tab) {
chrome.tabs.executeScript(tab.id, {code: "jQuery('#page-container').remove();"}, function() {
console.log('code executed');
});
});
I've loaded jQuery properly in the manifest and have given permissions to all sites as well.
In fact, it seems that I can access any element on the page outside the scope of #page-container.
Using the Chrome dev-tools console to mess with the page, I can easily use jQuery to access every element (although I recognize that this is whatever version the page is natively using).
I noticed something strange in the tag for #page-container:
<div id="page-container" class>...</div>
There is a class attribute with no equals sign or value... could this be blocking me?
Any thoughts on why I can't get any further into the page with the injected code?
EDIT: Ok, I found a workaround. Storing the value of #page-container and using setInterval to check for a change takes care of the dynamic problem.
Just to be clear, there isn't an event handler that can watch for a change in the value of a div, is there? I just feel like using intervals to check for stuff is so old-fashioned these days, even though it is sometimes necessary...
Here's the workaround code:
chrome.tabs.create({url: 'https://twitter.com/#!/login/'}, function (tab) {
chrome.tabs.executeScript(tab.id, {code: "var initial = jQuery('#page-container').html();var interval = setInterval(function(){var final = jQuery('#page-container').html();if(initial !== final){clearInterval(interval);jQuery('.main').remove();}},10);"}, function() {
console.log('code executed');
});
});
