Question

我今天一直在搞乱打包的chrome应用程序，看看有多少网站可以使用代码注入功能进行操作。

我一直在使用twitter.com/#!/login作为我的沙箱，因为它包含各种各样的元素。

出于某种原因，以下代码不执行任何操作：

    chrome.tabs.create({url: 'https://twitter.com/#!/login/'}, function (tab) {
        chrome.tabs.executeScript(tab.id, {code: "jQuery('.main').remove();"}, function() {
            console.log('code executed');
        });
    });

根本不能访问该页面，因为这确实有效：

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

我已经在清单中正确加载了jQuery，并且还为所有站点授予了权限。

事实上，我似乎可以访问＃page-container范围之外的页面上的任何元素。

使用Chrome开发工具控制台搞乱页面，我可以轻松使用jQuery访问每个元素（尽管我认识到这是页面本身使用的任何版本）。

我注意到＃page-container标签中有些奇怪：

<div id="page-container" class>...</div>

有一个没有等号或值的class属性......这会阻止我吗？

有关为什么我无法使用注入的代码进一步进入页面的任何想法？

修改好的，我找到了解决方法。存储＃page-container的值并使用setInterval检查更改可以解决动态问题。

为了清楚起见，没有一个事件处理程序可以监视div值的变化，是吗？我觉得使用间隔检查这些东西是如此古老，尽管有时是必要的......

以下是解决方法代码：

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

Answer 1

页面源中没有类main，这意味着它会使用javascript动态添加到页面中。您正在创建选项卡后立即执行脚本，因此该div可能尚未添加到页面中。

谷歌Chrome应用程序代码注入不适用于某些元素

1 个答案: