Question

我正在构建一个Chrome扩展程序，需要查看Google网上论坛主题搜索的结果（页面网址为https://groups.google.com/forum/?fromgroups=#!searchin/opencomments-site-discussions/subject：{some topic}，我可以判断是否存在匹配项寻找某个类名）。不幸的是，它正在寻找的字段直到页面的Javascript运行之后才会被创建，因此我不能简单地通过页面查看原始HTML

try {
  var request = new XMLHttpRequest();
  request.open("GET", url, false);
  request.send(null);
} catch (e) {
  ....
}
if (request.status == 200) {
  var rawText = request.responseText;
  ...
}

有没有人知道是否可以加载整个页面，包括执行Javascript，而不显示页面？一直在解决这个问题。

Answer 1

查看offscreenTabs API（目前是实验性的）使用chrome.experimental.offscreenTabs.create创建标签后，您可以使用chrome.tabs.sendMessage或chrome.tabs.executeScript执行任何操作。

如果您需要灵感，请查看this full demo。

根据规格，Offscreen选项卡只能在真实标签中创建（否则，您将获得“experiment.offscreenTabs.create：找不到当前标签”时的错误）。在我的other demo中，我为此目的使用了一个选项页面。如果您不想使用此类页面，请使用chrome.tabs.create创建新标签，执行任何操作，然后使用window.close()关闭标签。

所以，你打算打开一个（隐藏的）标签（尽管页面本身不可见）。 使用当前的API，没有其他方法可以在不打开标签的情况下实现隐藏标签的呈现（除非您想在背景页面的iframe中呈现页面...）。如果您不介意在标签栏中显示实际标签，请使用chrome.tabs.create({active:false, url:'...'})。如果保持标签对用户真正不可见非常重要，请继续以下演示：

演示offscreenTabs API

在这个例子中，我将显示一个警告，其中包含隐形标签的标题。我可以立即从内容脚本中显示此警报，但相反，我将把数据传递到后台页面，以演示该功能：

后台脚本（background.js）：

 chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
     var tab = sender.tab;
     if (tab && tab.index === -1) { // <-- Detect offscreen tab
         if (message.method == 'title') {
             // Close helper tab:
             chrome.extension.sendMessage({method: 'finishedTab', id: tab.id});
             alert('Got title from ' + tab.url + ' :\n' + message.result);
         }
     }
 });

 chrome.browserAction.onClicked.addListener(function() {
     chrome.tabs.create({
        active: false,
        url: chrome.extension.getURL('launcher.html')
     });
 });

内容脚本（contentscript.js）：

chrome.extension.sendMessage({
    method: 'title',
    result: document.title
});

launcher.html包含<script src="launcher.js"></script>。 launcher.js：

var offscreenTabId;
// Close the tab when the stuff is done
chrome.extension.onMessage.addListener(function(message) {
    if (message.method == 'finishedTab' && message.id === offscreenTabId) {
        window.close();
    }
});
// Create invisible tab
var createProperties = {url: "https://stackoverflow.com/"};
chrome.experimental.offscreenTabs.create(createProperties, function(offscreenTab) {
    offscreenTabId = offscreenTab.id;
});

清单文件：

{
    "name": "Get information from DOM in an invisible tab",
    "description": "See https://stackoverflow.com/q/13714002",
    "version": "1",
    "manifest_version": 2,
    "permissions": ["experimental", "<all_urls>"],
    "background": {"scripts": ["background.js"] },
    "content_scripts": [{
        "js": ["contentscript.js"],
        "matches": ["<all_urls>"]
    }],
    "browser_action": {}
}

在Chrome扩展程序中加载包含Javascript的页面而不显示该页面

1 个答案:

演示offscreenTabs API