无法使用来自 devtools 扩展的 getBackgroundPage() api答案

【问题标题】：Unable to use getBackgroundPage() api from a devtools extension无法使用来自 devtools 扩展的 getBackgroundPage() api
【发布时间】：2012-12-07 00:14:15
【问题描述】：

我正在尝试编写一个为 Chrome 开发工具添加功能的扩展程序。

根据 devtools 文档，它说 devtools 中的页面支持非常有限的 api。任何不受支持的 API 都可以通过后台页面访问，就像 contentscripts 所做的那样。

这里是相关文档sn-p：

tabId 属性提供您可以与 chrome.tabs.* API 调用一起使用的选项卡标识符。但是，请注意，出于安全考虑，chrome.tabs.* API 不会暴露给开发者工具扩展页面——您需要将标签 ID 传递到后台页面并从那里调用 chrome.tabs.* API 函数。

这里是源网址：http://developer.chrome.com/extensions/devtools.inspectedWindow.html

但是，当我尝试这样做时，我在控制台中收到以下错误：

uncaught Error: "getBackgroundPage" can only be used in extension processes. See the content scripts documentation for more details.

这是我的 devtools.js 脚本中的代码：

chrome.extension.getBackgroundPage().getLocation();

我做错了什么？

编辑

我应该先描述我的场景，然后展示我是如何实现它的。

我想做的是在与网页相关的开发工具面板中显示额外的数据。为了获取该数据，我需要在与被调试页面相同的会话中发送 HTTP 请求，因为它需要身份验证。

用例：

用户浏览到特定的 URL。他已通过该站点的身份验证。然后他调用 devtools。开发工具面板打开，并显示一个新面板，其中包含与页面相关的额外数据。

实施：

1) DevTools 脚本找出被检查页面的 url。如果 url 与站点基本主机名匹配，则会打开一个面板。在面板创建的回调中，它向后台页面发送一条消息，要求它从同一站点上的调试端点下载 JSON 有效负载，然后将其发送到 devtools 扩展，然后显示它。

问题：

1) 后台页面获取请求，下载URL。但是下载没有使用与用户相同的会话，所以下载请求失败。

2) 从 devtools 窗口中，我得到了被检查窗口的 tabId。我将此 tabId 发送到后台页面，以便它可以从 url 中解析一些内容。但是，chrome.tabs.get(tabId) 不会返回选项卡。

总而言之，我需要

1) 获取后台页面以在与正在调试的用户选项卡相同的会话中下载数据。 2）我需要让后台页面能够访问用户的标签。

【问题讨论】：

我已经为你的 2 次编辑更新了我的答案，让我知道你的看法

标签： google-chrome-extension google-chrome-devtools

【解决方案1】：

The APIs available to extension pages within the Developer Tools window include all devtools modules listed above and chrome.extension API. Other extension APIs are not available to the Developer Tools pages, but you may invoke them by sending a request to the background page of your extension, similarly to how it's done in the content scripts.

我猜文档有点模棱两可，chrome.extension API 他们的意思是Supported API's for content scripts。

所以，您可以使用long lived communication 进行检查页面和背景页面之间的通信

演示：

以下代码说明了devtools page 需要来自background page 的一些信息的场景，它使用消息进行通信。

manifest.json

确保权限在清单文件中都可用

{
"name":"Inspected Windows Demo",
"description":"This demonstrates Inspected window API",
"devtools_page":"devtools.html",
"manifest_version":2,
"version":"2",
"permissions":["experimental"],
"background":{
    "scripts" : ["background.js"]
}
}

devtools.html

一个简单的 HTML 文件

<html>
<head>
<script src="devtools.js"></script>
</head>
<body>
</body>
</html>

devtools.js

使用 Long lived Communication API 的

var port = chrome.extension.connect({
        name: "Sample Communication"
});
    port.postMessage("Request Tab Data");
    port.onMessage.addListener(function (msg) {
        console.log("Tab Data recieved is  " + msg);
});

background.js

回复communication request并使用tab API()'s传递琐碎信息

chrome.extension.onConnect.addListener(function (port) {
    port.onMessage.addListener(function (message) {
            chrome.tabs.query({
            "status": "complete",
            "currentWindow": true,
            "active": true
        }, function (tabs) {
            port.postMessage(tabs[0].id);
        });
        console.log("Message recived is  "+message);
    });
});

此处为琐碎的 devtools.js 收到的示例输出

如果您需要更多信息，请告诉我

编辑 1)

关于您的问题 1)

您能否让您从浏览器扩展 HTML Page\Content Script 调用，以便共享相同的会话，我已经尝试了示例中的两种方式，并且它正在以我的形式工作，而不是后台页面中的代码 - 制作内容脚本或浏览器操作 HTML 页面中的代码。

如果您仍然遇到问题，请告诉我。

关于你的问题 2)

以下代码总是获取当前用户正在浏览的窗口

manifest.json

确保您在清单中具有选项卡权限。

{
"name":"Inspected Windows Demo",
"description":"This demonstrates Inspected window API",
"manifest_version":2,
"version":"2",
"permissions":["tabs"],
"background":{
    "scripts" : ["background.js"]
}
}

background.js

chrome.tabs.query({
    "status": "complete", //  Window load is completed
    "currentWindow": true, // It is in current window
    "active": true //Window user is browsing
}, function (tabs) {
    for (tab in tabs) { // It returns array so used a loop to iterate over items
        console.log(tabs[tab].id); // Catch tab id
    }
});

如果您仍然无法获取当前窗口的标签 ID，请告诉我。

【讨论】：

谢谢。虽然这有帮助，但它仍然没有让我一路走到那里。我已经用更多细节编辑了我的问题。
@feroze：我已经为你的 2 次编辑更新了我的答案，让我知道你的看法