1

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

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

这是相关的文档片段：

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

我究竟做错了什么？

编辑

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

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

用例：

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

执行：

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

问题：

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

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

总结一下，我需要

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

4

1 回答 1

2

开发者工具窗口中扩展页面可用的 API 包括上面列出的所有 devtools 模块和 chrome.extension API。其他扩展 API 不适用于开发者工具页面，但您可以通过向扩展的后台页面发送请求来调用它们，类似于在内容脚本中完成的方式。

我想文档有点模棱两可，通过chrome.extension API他们是指Supported API's for content scripts。

因此，您可以使用长寿命通信在检查页面和背景页面之间进行通信

示范：

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

清单.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"]
}
}

开发工具.html

一个简单的 HTML 文件

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

开发工具.js

使用的长寿命通信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);
});

背景.js

使用选项卡 API()响应通信请求并传递琐碎信息

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)

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

清单.json

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

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

背景.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，请告诉我。

于 2012-12-07T06:09:13.807 回答