Отладка сценариев содержимого для расширения Chrome

Общие вопросы

Привет! Я копаюсь в мире расширений Chrome, и у меня возникли проблемы с общим рабочим процессом. Похоже, что Google недавно перешел на активную пропаганду страниц событий вместо того, чтобы хранить все в background.js и background.html. Я понимаю, что отчасти это означает, что мы должны передать большую часть вашей логики расширения сценарию содержимого.

В праймере страницы событий Google у них есть сценарий содержания, указанный в файле manifest.json. Но в их расширении примера страницы событий он вводится через этот блок кода в background.js: chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });

В чем преимущества одного способа перед другим?

Мой код

Я собираюсь использовать программный способ внедрения скрипта содержимого, как в примере 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();

Я могу получить первые 3 console.log операторов для отображения в отладчике фоновой страницы. Я также могу получить оповещение от content.js, чтобы оно появилось на любом веб-сайте. Но я не могу видеть console.log из content.js, а также не могу просматривать какой-либо JS из content.js. Я пробовал искать в разделе «сценарии содержимого» вкладки «Источники» отладчика фоновой страницы. В нескольких других сообщениях на SO было предложено добавить debugger; операторов, чтобы показать это, но мне ни с чем не везет. Ближайшее решение, которое я видел, - это этот пост, но это делается путем перечисления сценария содержимого в манифесте.

Любая помощь будет оценена по достоинству. Спасибо!


comment
Ваш вопрос решил мою проблему. Внедряя сценарий содержимого через манифест, я не мог в истинном смысле взаимодействовать с DOM веб-страницы. Теперь загрузка contentScript через browser_action решила мою проблему. Спасибо. Оценил.   -  person jainashish    schedule 17.11.2017


Ответы (2)


Сообщения console.log сценариев содержимого отображаются в консоли веб-страницы, а не в инспекторе фоновой страницы.

Добавление debugger; работает, если открыт инструмент разработчика (для веб-страницы, на которую вводится ваш сценарий содержимого).

Следовательно, в этом случае вы должны сначала активировать инструмент разработчика (веб-страницы), прежде чем щелкнуть значок действия браузера, и все должно работать нормально.

person 方 觉    schedule 15.06.2013
comment
Отлично, работает! Всегда ли нужен оператор debugger;, чтобы отладчик распознавал сценарии содержимого в среде расширения? Кажется, у вас есть один проход для создания точек останова. Каждый раз, когда вы в последующем пытаетесь запустить расширение, сценарии содержимого загружаются в новую среду, и вы теряете исходные точки останова. - person NoR; 15.06.2013
comment
Отладчик будет сохранять загрузку страниц и всегда будет ломаться, если у вас открыт инструмент разработчика (F12). Они жестко запрограммированы в вашем сценарии, поэтому не забудьте удалить их позже. Отладчик будет работать с любым javascript, они не являются эксклюзивными для контентных скриптов. - person QFDev; 15.06.2013
comment
Если в сценарии содержимого есть ошибки, такие как несовпадающие скобки (например, если вы забыли закрыть ) после передачи встроенной функции в качестве аргумента), то ошибка не выдается, и он автоматически завершается ошибкой даже с debugger. Это действительно расстраивает. Как можно это отладить? - person jozxyqk; 23.11.2013
comment
куда девать отладчик; в background.js или contextcript.js? Где именно? - person jim; 23.09.2020
comment
Значит, добавление debugger; - это единственный способ просмотреть инструкции console.log? - person libby; 17.06.2021

Я попытался использовать метод debugger, но он не работает, потому что проект использует require.js для объединения файлов javascript.

Если вы также используете require.js для разработки расширений Chrome, вы можете попробовать добавить что-нибудь вроде this в базу кода И измените eval(xhr.responseText) на eval(xhr.responseText + "\n//@ sourceURL=" + url);. (например, этот вопрос)

Затем вы можете увидеть исходный файл в своем инструменте разработки (но не в фоновом окне html)

person fengshuo    schedule 24.08.2017