2012-12-07 2 views
0

J'essaye d'écrire une extension qui ajoute des fonctionnalités aux devtools de Chrome. Selon la documentation de devtools, les pages de devtools supportent des API très limitées. Toute API qui n'est pas prise en charge peut être accédée en accédant à celle-ci via la page d'arrière-plan, comme le fait le contenu des scripts.Impossible d'utiliser getBackgroundPage() api à partir d'une extension devtools

Voici l'extrait de la documentation pertinente:

La propriété Tabid fournit l'identifiant de l'onglet que vous pouvez utiliser avec les chrome.tabs * appels API.. Toutefois, notez que l'API chrome.tabs. * N'est pas exposée aux pages d'extension Developer Tools pour des raisons de sécurité. Vous devrez transmettre l'ID d'onglet à la page d'arrière-plan et appeler les fonctions API chrome.tabs. * À partir de là.

Voici l'URL source: http://developer.chrome.com/extensions/devtools.inspectedWindow.html

Cependant, lorsque je tente de le faire, je reçois l'erreur suivante dans la console:

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

Voici mon code dans mes devtools. js script:

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

Qu'est-ce que je fais mal?

EDIT

je décrire d'abord mon scénario, et montrer comment je suis mise en œuvre.

Ce que je veux faire est d'afficher des données supplémentaires dans un panneau devtools lié à une page Web. Pour obtenir ces données, je devrai envoyer une requête HTTP dans la même session que la page en cours de débogage, car elle nécessite une authentification.

Cas d'utilisation:

utilisateur accède à une URL particulière. Il est authentifié sur le site. Il invoque ensuite devtools. Le panneau devtools s'ouvre et un nouveau panneau affiche des données supplémentaires liées à la page.

Mise en œuvre:

1) Script DevTools trouve l'URL de la page en cours d'inspection. Si l'URL correspond au nom d'hôte de base du site, elle ouvre un panneau. Dans le rappel de la création du panneau, il envoie un message à une page d'arrière-plan, lui demandant de télécharger une charge JSON depuis un point de débogage sur le même site, puis l'envoie à l'extension devtools, qui l'affiche ensuite.

Problèmes:

1) La page d'arrière-plan reçoit la demande, et télécharge l'URL. Cependant, le téléchargement n'utilise pas la même session que l'utilisateur, la demande de téléchargement échoue donc.

2) Depuis la fenêtre devtools, j'ai le tabId de la fenêtre inspectée. J'envoie ce tabId à la page d'arrière-plan afin qu'il puisse analyser certaines choses hors de l'url. Toutefois, chrome.tabs.get (tabId) ne renvoie pas l'onglet.

Pour résumer, je dois

1) Obtenez la page d'arrière-plan pour télécharger des données dans la même session que l'onglet de l'utilisateur qui est en cours de débogage. 2) J'ai besoin que la page d'arrière-plan puisse accéder à l'onglet de l'utilisateur.

+0

J'ai mis à jour ma réponse pour vos 2 modifications, faites-moi savoir votre point de vue – Sudarshan

Répondre

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.

Je suppose que la documentation est peu ambiguë, par chrome.extension API ils signifient la .

Ainsi, vous pouvez utiliser long lived communication pour la communication entre la page inspectée et page d'arrière-plan

Démonstration:

Le code suivant illustre le scénario où un devtools page besoin de quelques informations de background page, il utilise des messages pour la communication.

manifest.json

autorisations sont disponibles pour un résultat dans le fichier manifeste

{ 
"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

Un fichier HTML trivial

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

devtools.js

Utilisé 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 et Répond transmis des informations à l'aide triviale 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); 
    }); 
}); 

Sortie échantillon reçu pour devtools.js triviales ici

enter image description here

Faites-moi savoir si vous avez besoin de plus amples informations

EDIT 1)

Pour votre question 1)Pouvez-vous faire appel (s) de l'extension du navigateur HTML Page \ Script de contenu afin que même session est partagée, j'ai essayé les deux façons dans un échantillon et il fonctionne à partir de moi, au lieu de code en arrière-plan le code dans le script de contenu ou la page HTML d'action du navigateur.Faites-moi savoir si vous rencontrez toujours des problèmes.

Pour votre question 2)

Le code suivant va toujours chercher l'utilisateur de la fenêtre actuelle est la navigation

manifest.json

Assurez-vous que vous avez la permission des onglets dans votre manifeste.

{ 
"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 
    } 
}); 

Laissez-moi savoir si vous ne parvenez toujours pas à obtenir id onglet de la fenêtre en cours.

+0

Merci. Bien que cela aide, il ne m'a toujours pas tout le chemin. J'ai édité ma question avec plus de détails. – feroze

+0

@feroze: J'ai mis à jour ma réponse pour vos 2 modifications, faites moi part de vos opinions – Sudarshan

Questions connexes