1

Chrome devtools に機能を追加する拡張機能を作成しようとしています。

devtools のドキュメントによると、devtools のページがサポートする API は非常に限られているとのことです。サポートされていない API は、コンテンツ スクリプトと同様に、バックグラウンド ページからアクセスすることでアクセスできます。

関連するドキュメントのスニペットは次のとおりです。

tabId プロパティは、chrome.tabs.* API 呼び出しで使用できるタブ識別子を提供します。ただし、セキュリティ上の理由により、chrome.tabs.* API は開発者ツール拡張ページに公開されていないことに注意してください。タブ ID をバックグラウンド ページに渡し、そこから chrome.tabs.* API 関数を呼び出す必要があります。

ソース URL は次のとおりです: 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();

私は何を間違っていますか？

編集

最初にシナリオを説明し、それをどのように実装しているかを示す必要があります。

私がやりたいことは、Web ページに関連する 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.extensionAPIが含まれます。他の拡張APIは、開発者ツールページでは使用できませんが、コンテンツスクリプトで行われるのと同様に、拡張機能のバックグラウンドページにリクエストを送信することで呼び出すことができます。

ドキュメントは少し曖昧だと思います。chrome.extensionAPIとは、コンテンツスクリプトでサポートされているAPIを意味します。

したがって、検査されたページと背景ページの間の通信に長寿命の通信を使用できます

デモンストレーション：

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"]
}
}

devtools.html

些細なHTMLファイル

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

devtools.js

使用済みの長寿命のCommunicationAPI

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

通信リクエストに応答し、タブ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ページ\コンテンツスクリプトから電話をかけることができますか？同じセッションが共有されるように、サンプルで両方の方法を試しましたが、バックグラウンドページのコードではなく、私から機能しています-コンテンツのコードを作成してくださいスクリプトまたはブラウザアクションのHTMLページ。

それでも問題が発生する場合はお知らせください。

あなたの質問のために2）

次のコードは、ユーザーが閲覧している現在のウィンドウを常にフェッチします

マニフェスト.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を取得できない場合はお知らせください。

于 2012-12-07T06:09:13.807 に答える