javascript - क्रोम एक्सटेंशन-डॉम सामग्री प्राप्त करें




google-chrome-extension (2)

मैं अपने पॉपअप से सक्रियटैब डोम सामग्री तक पहुंचने का प्रयास कर रहा हूं। मेरा मैनिफेस्ट यहाँ है:

{
  "manifest_version": 2,

  "name": "Test",
  "description": "Test script",
  "version": "0.1",

  "permissions": [
    "activeTab",
    "https://api.domain.com/"
  ],

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Chrome Extension test",
    "default_popup": "index.html"
  }
}

मैं वास्तव में उलझन में हूं कि क्या पृष्ठभूमि स्क्रिप्ट (दृढ़ता वाले ईवेंट पृष्ठ: झूठी) या content_scripts जाने का तरीका हैं। मैंने सभी दस्तावेज और अन्य एसओ पोस्ट पढ़ लिए हैं और यह अभी भी मुझे कोई समझ नहीं आता है।

क्या कोई समझा सकता है कि मैं एक दूसरे के ऊपर क्यों उपयोग कर सकता हूं।

यहां पृष्ठभूमि.जेएस है जो मैं कोशिश कर रहा हूं:

chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    // LOG THE CONTENTS HERE
    console.log(request.content);
  }
);

और मैं बस पॉपअप कंसोल से इसे निष्पादित कर रहा हूं:

chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendMessage(tab.id, { }, function(response) {
    console.log(response);
  });
});

मैं ला रहा हूँ:

Port: Could not establish connection. Receiving end does not exist. 

अद्यतन करें:

{
  "manifest_version": 2,

  "name": "test",
  "description": "test",
  "version": "0.1",

  "permissions": [
    "tabs",
    "activeTab",
    "https://api.domain.com/"
  ],

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Test",
    "default_popup": "index.html"
  }
}

content.js

chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.text && (request.text == "getDOM")) {
      sendResponse({ dom: document.body.innertHTML });
    }
  }
);

popup.html

chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendMessage(tab.id, { action: "getDOM" }, function(response) {
    console.log(response);
  });
});

जब मैं इसे चलाता हूं, तब भी मुझे एक ही त्रुटि मिलती है:

undefined
Port: Could not establish connection. Receiving end does not exist. lastError:30
undefined

"पृष्ठभूमि पृष्ठ", "पॉपअप", "सामग्री स्क्रिप्ट" शब्द अभी भी आपको भ्रमित कर रहे हैं; मैं दृढ़ता से Google क्रोम एक्सटेंशन दस्तावेज़ीकरण पर अधिक गहराई से देखने का सुझाव देता हूं।

आपके प्रश्न के बारे में यदि सामग्री स्क्रिप्ट या पृष्ठभूमि पृष्ठ जाने का तरीका हैं:

सामग्री स्क्रिप्ट : निश्चित रूप से
सामग्री स्क्रिप्ट एक एक्सटेंशन का एकमात्र घटक हैं जिनके पास वेब पेज के डीओएम तक पहुंच है।

पृष्ठभूमि पृष्ठ / पॉपअप : हो सकता है (शायद दो में से अधिकतम 1)
आपको सामग्री स्क्रिप्ट को पृष्ठभूमि पृष्ठ या किसी अन्य प्रसंस्करण के लिए पॉपअप पर DOM सामग्री को पास करने की आवश्यकता हो सकती है।

मुझे दोहराने दो कि मैं उपलब्ध दस्तावेज के अधिक सावधान अध्ययन की दृढ़ता से अनुशंसा करता हूं!
उस ने कहा, यहां एक नमूना विस्तार है जो पृष्ठों पर DOM सामग्री पुनर्प्राप्त करता है और इसे पृष्ठभूमि पृष्ठ पर भेजता है, जो बदले में इसे कंसोल में प्रिंट करता है:

background.js:

// Regex-pattern to check URLs against. 
// It matches URLs like: http[s]://[...].com[...]
var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?\.com/;

// A function to use as callback
function doStuffWithDom(domContent) {
    console.log('I received the following DOM content:\n' + domContent);
}

// When the browser-action button is clicked...
chrome.browserAction.onClicked.addListener(function (tab) {
    // ...check the URL of the active tab against our pattern and...
    if (urlRegex.test(tab.url)) {
        // ...if it matches, send a message specifying a callback too
        chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, doStuffWithDom);
    }
});

content.js:

// Listen for messages
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    // If the received message has the expected format...
    if (msg.text === 'report_back') {
        // Call the specified callback, passing
        // the web-page's DOM content as argument
        sendResponse(document.all[0].outerHTML);
    }
});

manifest.json:

{
  "manifest_version": 2,
  "name": "Test Extension",
  "version": "0.0",
  ...

  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },
  "content_scripts": [{
    "matches": ["*://*..com/*"],
    "js": ["content.js"]
  }],
  "browser_action": {
    "default_title": "Test Extension"
  },

  "permissions": ["activeTab"]
}

आपको डोम प्राप्त करने या संशोधित करने के लिए पास किए गए संदेश का उपयोग करने की आवश्यकता नहीं है। मैंने इसके बजाय chrome.tabs.executeScript उपयोग किया। मेरे उदाहरण में मैं केवल सक्रिय टैब अनुमति का उपयोग कर रहा हूं, इसलिए स्क्रिप्ट केवल सक्रिय टैब पर निष्पादित की जाती है।

manifest.json का हिस्सा

"browser_action": {
    "default_title": "Test",
    "default_popup": "index.html"
},
"permissions": [
    "activeTab",
    "<all_urls>"
]

index.html

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <button id="test">TEST!</button>
    <script src="test.js"></script>
  </body>
</html>

test.js

document.getElementById("test").addEventListener('click', () => {
    console.log("Popup DOM fully loaded and parsed");

    function modifyDOM() {
        //You can play with your DOM here or check URL against your regex
        console.log('Tab script:');
        console.log(document.body);
        return document.body.innerHTML;
    }

    //We have permission to access the activeTab, so we can call chrome.tabs.executeScript:
    chrome.tabs.executeScript({
        code: '(' + modifyDOM + ')();' //argument here is a string but function.toString() returns function's code
    }, (results) => {
        //Here we have just the innerHTML and not DOM structure
        console.log('Popup script:')
        console.log(results[0]);
    });
});






google-chrome-extension