फ़ायरफ़ॉक्स वेब एक्सटेंशन, पृथक HTML ओवरले

मैं वेबइक्स्टेंशन का उपयोग करके कुछ वेबसाइटों पर एक पृथक ओवरले प्रदर्शित करने का एक तरीका ढूंढ रहा हूं।
एक आईफ्रेम इस के लिए जाने का तरीका प्रतीत होता है क्योंकि यह सीएसएस, जेएस और डोम के लिए एक अलग अलग दायरा प्रदान करता है। और एक और साफ बात यह है कि लक्ष्य वेबसाइट सामग्री को पढ़ने या बदलने में सक्षम नहीं होगी।फ़ायरफ़ॉक्स वेब एक्सटेंशन, पृथक HTML ओवरले

क्रोम एक्सटेंशन में जो किसी भी समस्या के बिना संभव प्रतीत होता है, लेकिन फ़ायरफ़ॉक्स में वेब एक्सटेंशन के साथ, भले ही वे एक ही वाक्यविन्यास साझा करते हैं, मुझे सुरक्षा चेतावनियां/त्रुटियां मिलती हैं और यह काम नहीं करती है। एक src विशेषता के बिना

एक iframe बनाना और इंजेक्षन कि वेबसाइट के शरीर में:

मैं दो अलग बातें की कोशिश की है। यह विधि विफल रही क्योंकि मुझे iframe.contentWindow.document.open() पर सीएसपी त्रुटियां/चेतावनियां मिलती हैं।
प्रासंगिक सामग्री स्क्रिप्ट कोड:
```
let html = ` 
    <!DOCTYPE html> 
    <html> 
     <head></head> 
     <body> 
     <h1>TEST</h1> 
     </body> 
    </html> 
` 
let iframe = document.createElement('iframe') 
document.body.appendChild(iframe) 
iframe.contentWindow.document.open() 
iframe.contentWindow.document.write(html) 
iframe.contentWindow.document.close() 
```
दूसरी बात मैंने कोशिश की (जो जिस तरह से अधिक मतलब होगा के रूप में यह सामग्री तक पहुंचने से वेबसाइट को अनुमति नहीं देने हैं), एक फ़ाइल में मेरी iframe कोड डाल करने के लिए किया गया था (overlay.html) मेरे वेब एक्सटेंशन में और iframe इसे browser.extension.getURL('overlay.html') पर इसके स्रोत को सेट करके लोड करें।
प्रासंगिक सामग्री स्क्रिप्ट कोड:
```
let iframe = document.createElement('iframe') 
iframe.src = browser.extension.getURL('overlay.html') 
document.body.appendChild(iframe) 
```
प्रकट में मैं इस बात के लिए web_accessible_resources के रूप में परिभाषित किया गया overlay.html:
```
"web_accessible_resources": [ 
    "overlay.html" 
], 
```
उस के बारे में बात यह है कि आइफ्रेम बस लोड नहीं करता है overlay.html फ़ाइल। लेकिन यह निश्चित रूप से उपलब्ध है, अन्यथा location.href = browser.extension.getURL('overlay.html') काम नहीं करेगा। अगर यह काम करता तो यह बेहद सुविधाजनक होता, क्योंकि मैं पूरे ओवरले (एचटीएमएल, सीएसएस, जेएस) को अपने एक्सटेंशन में अलग फाइलों के रूप में संग्रहीत कर सकता था। जैसे कि यह एक स्टैंडअलोन वेबसाइट होगी। और सामग्री-स्क्रिप्ट का उपयोग करके मैं इसे नया डेटा जोड़ने या जो कुछ भी जोड़ने के लिए एक्सेस कर सकता था।

संपादित करें:

फिलहाल मैं स्रोत कोड यह (उस के लिए wOxxOm करने के लिए धन्यवाद) को शामिल करना चाहिए स्थापित करने के लिए मेरी iframe की srcdoc विशेषता का उपयोग कर रहा हूँ। तो कम से कम मेरे पास ऐसा कुछ है जो अब काम करता है। लेकिन मैं इस दृष्टिकोण के बारे में वास्तव में नापसंद करता हूं कि मैं अपनी सामग्री स्क्रिप्ट से आईफ्रेम सामग्री से बातचीत नहीं कर सकता। दिलचस्प बात यह है कि, मैं आईफ़्रेम के जेएस कोड के भीतर से मूल पृष्ठ से बातचीत कर सकता हूं, लेकिन फिर सामग्री स्क्रिप्ट के साथ नहीं। यह भी वास्तव में गन्दा, असुविधाजनक और कठिन है ताकि आप अपने सभी एचटीएमएल, सीएसएस, जेएस कोड को सामान्य वेबसाइट जैसी कई फाइलों के बजाय एक स्ट्रिंग में रख सकें।

स्रोत

2017-01-19 Forivin

हो सकता है कि साइटों को आप एक बहुत ही सीमित सीएसपी को परिभाषित की कोशिश की है? मैं 'iframe.srcdoc' कोशिश करता हूं। शैली अलगाव के लिए आप iframe के बजाय छाया डोम का उपयोग कर सकते हैं। – wOxxOm

धन्यवाद, यह अविश्वसनीय रूप से सहायक था! – Forivin

1) सीएसपी मुद्दे के बारे में: मुझे नहीं लगता कि यह साइट है। यह मेरे लिए फ़ाइल में एक ही त्रुटि देता है: /// सी:/'। मुझे लगता है कि यह विस्तार के अपने सीएसपी से संबंधित है। मैं अभी भी वाक्यविन्यास से अपरिचित हूं, इसलिए समाधान प्रदान नहीं कर सकता। पूरी तरह से समझने के बिना और आप अनजाने में अनुमति दे सकते हैं बिना समझने के सावधान पोकिंग छेद रहें। 2) मैंने फिर तुरंत आईफ्रेम लगाया। डायरेक्ट असाइनमेंट सभी विशेषताओं के लिए समान रूप से काम नहीं करता है, हालांकि 'iframe.src' ने मेरे लिए काम किया है। 'Iframe.setAttribute (विशेषता, मान) के साथ सभी विशेषताओं को निर्दिष्ट करने का प्रयास करें; 'विशेष रूप से, मुझे लगता है कि' कक्षा' समस्याग्रस्त है। – user314159

समस्या

सबसे पहले, हम जानते हैं कि समस्या एक सुरक्षा मुद्दा है, वास्तव में इस मुद्दे को क्या है? ठीक है जब iframe src को सेट करके किसी आईफ्रेम में एक्सटेंशन संसाधन लोड करने का प्रयास करते समय ब्राउज़र सुरक्षा के बारे में शिकायत करता है और इस उदाहरण में 'moz-extension: //' में किसी भिन्न प्रोटोकॉल से कनेक्ट होने से आईफ़्रेम को रोकता है।

समाधान

लोड विस्तार संदर्भ से एचटीएमएल आदि और स्ट्रिंग के रूप इंजेक्षन।

Nitty Gritty

इस के आसपास पाने के लिए, हम data:text/html;charset=utf8,${markup} करने के लिए iframe src विशेषता के सेट कर सकते हैं।

यह सीधे आईफ़्रेम को बताता है कि सामग्री HTML है, यह utf8 एन्कोडिंग का उपयोग करती है और इसके बाद कच्चे मार्कअप का पालन किया जाता है। हम नेटवर्क पर किसी भी संसाधन को लोड करने के लिए iframe की आवश्यकता को पूरी तरह से छोड़ रहे हैं।

फ़ायरफ़ॉक्स सामग्री स्क्रिप्ट का निष्पादन संदर्भ उस पृष्ठ से अलग है जो इसे लोड किया गया है। इसका मतलब है कि आप सीएसपी का उल्लंघन किये बिना एक्सएचआर अनुरोध कर सकते हैं।

यदि आप अपने मार्कअप के लिए xhr अनुरोध करते हैं, तो आप एक स्ट्रिंग के रूप में प्रतिक्रिया की सामग्री प्राप्त कर सकते हैं, और सीधे इसे iframe src विशेषता में इंजेक्ट कर सकते हैं।

इस प्रकार सामग्री स्क्रिप्ट:

function loaded (evt) { 
    if (this.readyState === 4 && this.status === 200) { 
     var html = this.responseText; 
     console.log(html); 
     var iframe = document.createElement('iframe'); 

     iframe.src = 'data:text/html;charset=utf-8,' + html; 
     document.body.appendChild(iframe); 

     console.log('iframe.contentWindow =', iframe.contentWindow); 
    } else { 
     console.log('problem loading'); 
    } 
} 

var xhr = new XMLHttpRequest(); 
xhr.overrideMimeType("text/html"); 
xhr.open("GET", browser.extension.getURL('test.html'), false); 
xhr.addEventListener("readystatechange", loaded); 


xhr.send(null);

एक सरल HTML फ़ाइल

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test</title> 
    <meta charset="utf8" /> 
</head> 
<body> 
    <h1>Hello World</h1> 
</body> 
</html>

साथ

तो अब आप सफलतापूर्वक एक एचटीएमएल टेम्पलेट लक्ष्य iframe में इंजेक्ट किया है।

यदि आपको किसी भी छवियों, स्क्रिप्ट्स, सीएसएस फाइलों आदि की आवश्यकता है, तो आपको उपरोक्त उल्लिखित विधि के आधार पर एक बूटलोडर लिखना होगा, नए स्क्रिप्ट टैग इंजेक्शन देना होगा और आगे सीधे आईफ्रेम दस्तावेज़ में लिखना होगा।

स्रोत

2017-01-25 11:39:39

btw, कभी कभी लोगों को अलग अलग प्रोटोकॉल में IFRAME यूआरएल, का उपयोग अर्थात
https:// (जबकि वर्तमान पृष्ठ http:// है)।

तो, iFrame URL रिश्तेदार होना चाहिए, जैसे src="//example.com"

स्रोत

2017-01-28 19:43:16

फ़ायरफ़ॉक्स एक्सटेंशन के संदर्भ से एक्सटेंशन फ़ाइल सिस्टम से फ़ाइलों तक पहुंचने और वेबसाइट संदर्भ नहीं, यह काम नहीं करेगा। फ़ायरफ़ॉक्स एक्सटेंशन फ़ाइलें moz-extension प्रोटोकॉल पर रहते हैं। –

फ़ायरफ़ॉक्स वेब एक्सटेंशन, पृथक HTML ओवरले

उत्तर

संबंधित मुद्दे