web-dev-qa-db-fra.com

Débogage des scripts de contenu pour Chrome Extension

Questions générales

Bonjour! Je plonge dans le monde des extensions Chrome et j'ai des problèmes pour réduire le flux de travail global. Il semble que Google soit récemment passé à préconiser fortement les pages d'événements au lieu de tout garder en arrière-plan.js et background.html. J'en profite pour dire que nous devrions transmettre la majeure partie de votre logique d'extension à un script de contenu.

Dans introduction de la page d'événement de Google , le script de contenu est répertorié dans le fichier manifest.json. Mais dans leur extension d'exemple de page d'événement, elle est introduite via ce bloc de code dans background.js: chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });

Quels sont les avantages de le faire d'une manière par rapport à l'autre?

Mon code

J'avance avec la manière programmatique d'injecter le script de contenu, comme l'exemple de Google.

manifest.json

{
    "manifest_version": 2,
    "name": "Test",
    "description": "Let's get this sucker working",
    "version": "0.0.0.1",
    "permissions": [
        "tabs",
        "*://*/*"
    ],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
        "default_icon": "icon.png"
    }
}

background.js

chrome.browserAction.onClicked.addListener(function() {
    console.log("alert from background.js");
    chrome.tabs.executeScript({file: "jquery-2.0.2.min.js"}, function() {
        console.log("jquery Loaded");
    });
    chrome.tabs.executeScript({file: "content.js"}, function() {
        console.log("content loaded");
    });
});

content.js

console.log('you\'r in the world of content.js');
var ans = {};

ans.createSidebar = function() {

    return {
        init: function(){
            alert("why hello there");
        }
    }
}();

ans.createSidebar.init();

Je peux obtenir les 3 premiers console.log instructions à afficher dans le débogueur de la page d'arrière-plan. Je peux également obtenir l'alerte de content.js pour apparaître sur n'importe quel site Web. Mais je ne peux pas voir le console.log à partir de content.js, et je ne suis pas en mesure d'afficher le JS à partir de content.js. J'ai essayé de chercher dans la section "scripts de contenu" de l'onglet Sources du débogueur de page d'arrière-plan. Quelques autres articles sur SO ont suggéré d'ajouter debugger; des déclarations pour le montrer, mais je n'ai aucune chance avec quoi que ce soit. La solution la plus proche que j'ai vue est ce post , mais elle se fait en listant le script de contenu dans le manifeste.

Toute aide serait appréciée. Merci!

debugginggoogle-chrome-extensiongoogle-chrome-devtoolscontent-script
43
NoR

Les messages console.log des scripts de contenu sont affichés dans la console de la page Web au lieu de l'inspecteur de la page d'arrière-plan.

Ajouter debugger; fonctionne si l'outil de développement (pour la page Web où votre script de contenu est injecté) est ouvert.

Par conséquent, dans ce cas, vous devez d'abord activer l'outil de développement (de la page Web) avant de cliquer sur l'icône d'action du navigateur et tout devrait fonctionner correctement.

59
方 觉

J'ai essayé d'utiliser la méthode debugger, mais cela ne fonctionne pas bien car le projet utilise require.js Pour regrouper les fichiers javascript.

Si vous utilisez également require.js Pour chrome, vous pouvez essayer d'ajouter quelque chose comme this à la base de code, ET changer la fonction eval(xhr.responseText) à eval(xhr.responseText + "\n//@ sourceURL=" + url);. (comme ceci question )

Ensuite, vous pouvez voir le fichier source dans votre outil de développement (mais pas la fenêtre html d'arrière-plan)

2
fengshuo