debugging - क्रोम एक्सटेंशन के लिए सामग्री लिपियों को डिबग करना




google-chrome-extension google-chrome-devtools (2)

सामान्य सवाल

नमस्कार! मैं क्रोम एक्सटेंशन की दुनिया में भ्रम कर रहा हूं और मुझे कुछ समस्याएं आ रही हैं जो कुल वर्कफ़्लो नीचे आ रही हैं ऐसा लगता है कि Google ने हाल ही में background.js और background.html में सब कुछ रखने के बजाय इवेंट पेजों की भारी वकालत करने के लिए स्विच किया है। मैं इस का एक हिस्सा लेता हूं, इसका मतलब यह है कि हमें अपने विस्तार तर्क को एक सामग्री स्क्रिप्ट में भेजना चाहिए।

Google के इवेंट पेज प्राइमर में , उनके पास manifest.json फ़ाइल में सूचीबद्ध सामग्री स्क्रिप्ट है। लेकिन उनके घटना पेज उदाहरण एक्सटेंशन में, यह पृष्ठभूमि कोड में इस कोड ब्लॉक के माध्यम से लाया जाता है: 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 से अलर्ट प्राप्त करने में भी सक्षम हूं। लेकिन मैं content.js से console.log देख नहीं पा रहा हूं, और न ही मैं content.js से किसी भी जेएस को देखने में सक्षम हूं। मैंने पृष्ठभूमि पृष्ठ डीबगर के स्रोत टैब के "सामग्री स्क्रिप्ट" अनुभाग में देखने की कोशिश की है। SO पर कुछ अन्य पदों का सुझाव दिया है debugger; जोड़ने debugger; इसे दिखाने के लिए बयान, लेकिन मुझे कुछ भी नसीब नहीं है। मैंने देखा है सबसे निकटतम समाधान यह पोस्ट है , लेकिन मैनिफेस्ट में सामग्री स्क्रिप्ट को सूचीबद्ध करके किया जाता है।

किसी भी सहायता की सराहना की जाएगी। धन्यवाद!


सामग्री स्क्रिप्ट 'console.log संदेश पृष्ठभूमि पृष्ठ के इंस्पेक्टर के बजाय वेब पेज के कंसोल में दिखाए जाते हैं।

debugger; जोड़ना debugger; यदि डेवलपर उपकरण (वेब ​​पेज के लिए जहां आपकी सामग्री स्क्रिप्ट इंजेक्शन है) खोलेगा।

इसलिए, इस मामले में, आपको सबसे पहले ब्राउज़र एक्शन आइकन पर क्लिक करने से पहले डेवलपर उपकरण (वेब ​​पृष्ठ का) सक्रिय करना चाहिए और सब कुछ ठीक ही काम करना चाहिए।


मैंने debugger विधि का उपयोग करने की कोशिश की, लेकिन यह अच्छी तरह से काम नहीं कर रहा है क्योंकि परियोजना की require.js है require.js फ़ाइलों को बंडल करने के लिए।

यदि आप क्रोम एक्सटेंशन डेवलपमेंट के लिए require.js का उपयोग कर रहे हैं, तो आप कोड बेस में ऐसा कुछ जोड़ने का प्रयास कर सकते हैं, और eval(xhr.responseText) को बदल सकते हैं eval(xhr.responseText + "\n//@ sourceURL=" + url); । (इस प्रश्न की तरह)

तब आप अपने देव उपकरण में स्रोत फ़ाइल देख सकते हैं (लेकिन पृष्ठभूमि HTML विंडो नहीं)





content-script