Chrome এক্সটেনশান - DOM সামগ্রী পান

116

আমি আমার পপআপ থেকে সক্রিয় ট্যাব ডোম সামগ্রী অ্যাক্সেস করার চেষ্টা করছি। এই আমার প্রকাশ্য:

{
  "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"
  }
}

ব্যাকগ্রাউন্ড স্ক্রিপ্টগুলি (দৃistence়তার সাথে ইভেন্ট পৃষ্ঠাগুলি: মিথ্যা) বা কন্টেন্ট_স্ক্রিপ্টগুলি যাবার উপায় কিনা তা আমি সত্যিই বিভ্রান্ত। আমি সমস্ত ডকুমেন্টেশন এবং অন্যান্য এসও পোস্ট পড়েছি এবং এটি এখনও আমার কাছে কোনও ধারণা রাখে না।

কেউ অন্যকে কেন ব্যাখ্যা করতে পারে যে আমি অন্যের উপরে কেন ব্যবহার করতে পারি।

এখানে আমি চেষ্টা করেছি এমন ব্যাকগ্রাউন্ড.js রয়েছে:

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.innerHTML });
    }
  }
);

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

javascript google-chrome-extension

— brandonhilkert
সূত্র

উত্তর:

184

"পটভূমি পৃষ্ঠা", "পপআপ", "সামগ্রী স্ক্রিপ্ট" পদগুলি এখনও আপনাকে বিভ্রান্ত করছে; আমি গুগল ক্রোম এক্সটেনশান ডকুমেন্টেশন আরও গভীরভাবে চেহারা প্রস্তাব ।

আপনার প্রশ্নের বিষয়ে যদি সামগ্রী স্ক্রিপ্ট বা পটভূমি পৃষ্ঠাগুলি হয়:

সামগ্রী স্ক্রিপ্টস : অবশ্যই
কনটেন্ট স্ক্রিপ্টগুলি কোনও এক্সটেনশনের একমাত্র উপাদান যা ওয়েব পৃষ্ঠার ডিওমে অ্যাক্সেস করে।

পটভূমি পৃষ্ঠা / পপআপ : হতে পারে (দুজনের মধ্যে সম্ভবত সর্বাধিক 1)
আপনার আরও প্রক্রিয়াকরণের জন্য সামগ্রীর স্ক্রিপ্টটি কোনও ব্যাকগ্রাউন্ড পৃষ্ঠায় বা পপআপে ডোম সামগ্রী পাস করার দরকার হতে পারে।

আমাকে পুনরাবৃত্তি করতে দিন যে আমি উপলব্ধ নথিপত্র সম্পর্কে আরও সতর্কতার সাথে অধ্যয়নের জন্য দৃ strongly়তার সাথে সুপারিশ করছি!
এটি বলেছিল, এখানে একটি নমুনা এক্সটেনশন যা স্ট্যাকওভারফ্লো পৃষ্ঠায় DOM সামগ্রী পুনরুদ্ধার করে এবং এটি ব্যাকগ্রাউন্ড পৃষ্ঠায় প্রেরণ করে, যার ফলে এটি কনসোলে মুদ্রণ করে:

background.js:

// Regex-pattern to check URLs against. 
// It matches URLs like: http[s]://[...]stackoverflow.com[...]
var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?stackoverflow\.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": ["*://*.stackoverflow.com/*"],
    "js": ["content.js"]
  }],
  "browser_action": {
    "default_title": "Test Extension"
  },

  "permissions": ["activeTab"]
}

— gkalpak
সূত্র

@ সলভিংপজলস: chrome.runtime.sendMessageব্যাকগ্রাউন্ডপেজ এবং পপআপগুলিতে বার্তা প্রেরণ করে। chrome.tabs.sendMessageকন্টেন্টস্ক্রিপ্টগুলিতে বার্তা প্রেরণ করে।

— gklpak

এই উত্তরটি কীভাবে বর্তমান ট্যাব থেকে প্রকৃত ডোম প্রাপ্ত করবেন তা ব্যাখ্যা করে না বলে নিম্নচোটিত।

— জন পল বারবাগালো 19

@ জনপলবাড়বাগালো: প্রশ্নটি ছিল ডিওএম বিষয়বস্তু প্রাপ্তির বিষয়ে, আসল ডিওএম অ্যাক্সেস / হেরফের সম্পর্কে নয়। আমি মনে করি আমার উত্তর এটি করে (এবং অন্যরাও একইভাবে মনে করে)। আপনার আরও ভাল সমাধান থাকলে উত্তর হিসাবে পোস্ট করুন। আপনার যদি অন্যরকম প্রয়োজন হয় তবে এটি একটি নতুন প্রশ্ন হিসাবে পোস্ট করুন। যাই হোক না কেন, প্রতিক্রিয়াটির জন্য

— THX

@ জোল্টার: এটি ব্যাকগ্রাউন্ড-পৃষ্ঠার কনসোলে মুদ্রিত হয়েছে।

— gklpak

আমার কাছে এই উত্তরটি অনুলিপি / পষ্ট করা আছে তবে সামগ্রী স্ক্রিপ্টের কোনও কনসোল.লগ তৈরি করতে পারি না। অনুগ্রহ করে সাহায্য করবেন!

— ক্লিমেন্টওয়াল্টার

DOM প্রাপ্ত বা সংশোধন করতে আপনাকে বার্তাটি পাসিং ব্যবহার করতে হবে না। আমি 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]);
    });
});

— অস্কার
সূত্র

পুরোপুরি কাজ করে! ধন্যবাদ. কেন জানি না তবে আমি গ্রহণযোগ্য সমাধানটি আমার পক্ষে কাজ করতে পারিনি।

— গুডফেলো

আপনার বিবৃতি যে আপনি কেবল activeTabঅনুমতি ব্যবহার করছেন তা সঠিক নয়। আপনি স্পষ্টভাবে <all_urls>ছাড়াও প্রাপ্ত হয় activeTab।

— Makyen

test.js হ'ল একটি স্ক্রিপ্ট যা আপনি আপনার পৃষ্ঠার এইচটিএমএলতে অন্তর্ভুক্ত করেছেন তাই আমি নিশ্চিত নই যে আপনার কোনও অনুমতিের দরকার আছে ।

— স্কট বেকার

যারা gklpak জবাব চেষ্টা করেছেন এবং এটি কার্যকর হয়নি তাদের জন্য,

সচেতন থাকুন যে ক্রোম কেবলমাত্র প্রয়োজনীয় পৃষ্ঠায় সামগ্রী স্ক্রিপ্ট যুক্ত করবে যখন আপনার এক্সটেনশনটি ক্রোম লঞ্চের সময় সক্ষম হবে এবং এই পরিবর্তনগুলি করার পরে একটি ভাল ধারণা ব্রাউজার পুনরায় আরম্ভ করবে

— bxN5
সূত্র

এটি আমার দিনটি বাঁচিয়েছে

— রোমেন ডেরি