it-swarm.dev

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에서 또는 content.js에서 JS를 볼 수 없습니다. 백그라운드 페이지 디버거 소스 탭의 "컨텐츠 스크립트"섹션을 살펴 보았습니다. SO에 대한 다른 게시물은 debugger; 진술을 보여 주지만, 나는 아무것도 운이 없습니다. 내가 본 가장 가까운 솔루션은 이 게시물 이지만 매니페스트에 콘텐츠 스크립트를 나열하여 수행됩니다.

도움을 주시면 감사하겠습니다. 감사!

43
NoR

콘텐츠 스크립트의 console.log 메시지는 백그라운드 페이지 관리자 대신 웹 페이지 콘솔에 표시됩니다.

debugger;를 추가하면 개발자 도구 (콘텐츠 스크립트가 삽입 된 웹 페이지 용)가 열린 경우에 작동합니다.

따라서이 경우 브라우저 작업 아이콘을 클릭하기 전에 먼저 웹 페이지의 개발자 도구를 활성화해야 모든 것이 제대로 작동합니다.

59
方 觉

debuggermethod를 사용하려고했지만 프로젝트가 require.js를 사용하여 자바 스크립트 파일을 묶기 때문에 제대로 작동하지 않습니다.

chrome 확장 개발에 require.js를 사용하는 경우) this 같은 코드를 코드베이스에 추가하고 eval(xhr.responseText)에서 eval(xhr.responseText + "\n//@ sourceURL=" + url);까지 (예 : 질문 )

그런 다음 개발자 도구에서 소스 파일을 볼 수 있지만 배경 HTML 창은 볼 수 없습니다.

2
fengshuo