मैं Google Chrome एक्सटेंशन में वर्तमान टैब के माइम प्रकार का पता कैसे लगा सकता हूं?

Question

मैं देखना चाहता हूं कि वर्तमान टैब पृष्ठभूमि पृष्ठ से पीडीएफ फाइल है या नहीं।

मैं अंत में .pdf के लिए यूआरएल देख सकता हूं लेकिन कुछ पीडीएफ फाइलें हैं जिनके पास यह नहीं है।

Answer 1

आप वर्तमान क्रोम एपीआई afaik का उपयोग कर इसे प्राप्त नहीं कर सकते हैं। आप क्या कर सकते हैं XHR के माध्यम से इस पृष्ठ को फिर से लोड करें और वापस सामग्री-प्रकार शीर्षलेख देखें। कुछ इस तरह:

पृष्ठभूमि एचटीएमएल:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { 
    if(changeInfo.status == "loading") { 
     if(checkIfUrlHasPdfExtension(tab.url)) { 
      //.pdf 
      pdfDetected(tab); 
     } else { 
      var xhr = new XMLHttpRequest(); 
      xhr.open("GET", tab.url, true); 
      xhr.onreadystatechange = function() { 
       if (xhr.readyState == 4) { 
       var contentType = xhr.getResponseHeader("Content-Type"); 
       if(checkIfContentTypeIsPdf(contentType)) { 
        pdfDetected(tab); 
       } 
       } 
      } 
      xhr.send(); 
     } 
    } 
}); 

manifest.json:

"permissions": [ 
    "tabs", "http://*/*", "https://*/*" 
] 

पीडीएफ फाइलों के लिए लौट आए सामग्री प्रकार application/pdf होना चाहिए। कुछ ध्यान में रखना हालांकि यह है कि सामग्री-प्रकार शीर्षलेख में एन्कोडिंग भी हो सकती है: text/html; charset=UTF-8।

Answer 2

एमआईएम प्रकार प्राप्त करने के लिए सिर्फ एक नया अनुरोध जारी करना थोड़ा भारी है, और भरोसेमंद नहीं है। उदाहरण के लिए, यदि वर्तमान में प्रदर्शित पृष्ठ POST फॉर्म सबमिशन का परिणाम है, तो GET अनुरोध जारी करना आम तौर पर उसी पृष्ठ पर नहीं पहुंचता है।

यदि आप ऐसे एक्सटेंशन को विकसित कर रहे हैं जिसे अक्सर इस जानकारी तक पहुंच की आवश्यकता है, तो प्रतिक्रियाओं को ट्रैक करने के लिए chrome.webRequest API का उपयोग करें।

• इस विस्तार केवल वे टैब जो के बाद विस्तार भरी हुई है लोड किए गए हैं के लिए परिणाम दिखाता है:

  // background.js 
  var tabToMimeType = {}; 
  chrome.webRequest.onHeadersReceived.addListener(function(details) { 
      if (details.tabId !== -1) { 
       var header = getHeaderFromHeaders(details.responseHeaders, 'content-type'); 
       // If the header is set, use its value. Otherwise, use undefined. 
       tabToMimeType[details.tabId] = header && header.value.split(';', 1)[0]; 
      } 
  }, { 
      urls: ['*://*/*'], 
      types: ['main_frame'] 
  }, ['responseHeaders']); 
  
  chrome.browserAction.onClicked.addListener(function(tab) { 
      alert('Tab with URL ' + tab.url + ' has MIME-type ' + tabToMimeType[tab.id]); 
  }); 
  
  function getHeaderFromHeaders(headers, headerName) { 
      for (var i = 0; i < headers.length; ++i) { 
       var header = headers[i]; 
       if (header.name.toLowerCase() === headerName) { 
        return header; 
       } 
      } 
  } 
  

  नोट: निम्न डेमो एक्सटेंशन ब्राउज़र बटन को क्लिक पर सामग्री प्रकार को दर्शाता है।

• यह केवल http/https पृष्ठों पर काम करता है। ftp :, फ़ाइल :, फाइल सिस्टम :, ब्लॉब :, डेटा: समर्थित नहीं है।
• जब कोई MIME- प्रकार सर्वर द्वारा निर्दिष्ट नहीं किया गया है या जब MIME- प्रकार text/plain है, तो क्रोम सेट होने तक MIME sniffing पर वापस आ जाता है। पहले मामले में, पता चला एमआईएम-प्रकार कुछ भी हो सकता है। बाद के मामले में, डिफ़ॉल्ट MIME-type text/plain है।

पूर्णता के लिए, यहाँ एक manifest.json फ़ाइल है कि पिछले कोड का परीक्षण करने के लिए इस्तेमाल किया जा सकता है:

{ 
    "name": "Click button to see MIME", 
    "version": "1", 
    "manifest_version": 2, 
    "background": { 
     "scripts": ["background.js"], 
     "persistent": true 
    }, 
    "browser_action": { 
     "default_title": "Show MIME" 
    }, 
    "permissions": [ 
     "webRequest", 
     "activeTab", 
     "*://*/*" 
    ] 
} 

Answer 3

एक कुछ हद तक hackish तरीका (यह हमेशा या बस कभी कभी काम करता है अगर मैं पता नहीं है) करने के लिए है पेज सामग्री को देखो। वहां आपको क्रोम के पीडीएफ व्यूअर के लिए एक तत्व मिलेगा। यह इन पंक्तियों के साथ दिखता है:

<embed width="100%" height="100%" name="plugin" src="https://example.com/document.pdf" type="application/pdf"> 

आप यह देखने के लिए "टाइप" विशेषता देख सकते हैं कि आप क्या कर रहे हैं।

Answer 4

मुझे अपने एक्सटेंशन में से कुछ ऐसा ही करना पड़ा और @serg द्वारा दिए गए the answer के समान कुछ किया लेकिन इसके बजाय एक HEAD अनुरोध का उपयोग किया।सिद्धांत रूप में, एक हेड अनुरोध जीईटी अनुरोध के समान होना चाहिए, लेकिन प्रतिक्रिया निकाय भेजने के बिना, जो किसी छवि या फ़ाइल के मामले में अतिरिक्त डेटा और समय प्रतीक्षा का थोड़ा सा हो सकता है।

मैं सामग्री-प्रकार पर संलग्न किसी भी वर्णमाला को छोड़ने के लिए हेडर को विभाजित और स्थानांतरित कर सकता हूं।

getContentType: function(tab, callback){ 
    var xhr = new XMLHttpRequest(); 
    xhr.open("HEAD", tab.url, false); 
    xhr.onload = function(e) { 
     if (xhr.readyState === 4) { 
      if(xhr.status === 200) { 
       callback(xhr.getResponseHeader("Content-Type").split(";").shift()); 
      } 
      else{ 
       callback('Unknown'); 
       console.error(xhr.statusText); 
       return; 
      } 
     } 
    }; 

    xhr.onerror = function (e) { 
     console.error(xhr.statusText); 
     return; 
    }; 

    xhr.send(); 
}