Question

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

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

以下是相关文档摘要：

tabId属性提供了可以与chrome.tabs。* API调用一起使用的选项卡标识符。但请注意，出于安全考虑，chrome.tabs。* API未向Developer Tools扩展页面公开 - 您需要将选项卡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请求，因为它需要进行身份验证。

用例：

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

实现：

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

问题：

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

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

总结一下，我需要

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

Answer 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的示例输出

enter image description here

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

编辑1）

对于您的问题1）

你可以让你从浏览器扩展HTML页面\内容脚本打电话，所以同一个会话是共享的，我已经尝试了样本中的两种方式，它在我的工作中，而不是在后台页面中的代码 - 使内容脚本或浏览器操作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，请告诉我。

无法使用devtools扩展中的getBackgroundPage（）api

1 个答案: