13

मेरे पास कोणीय (v1.6.3) का उपयोग करके एक साधारण ब्राउज़र एक्सटेंशन है, लेकिन ब्राउजर एक्सटेंशन की पॉप-अप विंडो में कोणीय अभिव्यक्ति एज में मूल्यांकन करने में विफल रही है, लेकिन यह क्रोम में है।कोणीय अभिव्यक्ति क्रोम एक्सटेंशन में मूल्यांकन करती है लेकिन एज एक्सटेंशन में नहीं

कोणीय अभिव्यक्ति बस <div>{{2+2}}</div> है।

जब मैं (किसी प्रासंगिक वेबसाइट पर ब्राउज़ manifest file, अर्थात् http://marketplace.visualstudio.com, https://marketplace.visualstudio.com या http://www.bbc.com में विन्यस्त, और विस्तार बटन पर क्लिक करें रूप में, क्रोम एचटीएमएल उत्पादन के लिए "4" का मूल्यांकन करता है, लेकिन एज एचटीएमएल उत्पादन के लिए "{मूल्यांकन करता है {2 + 2}} "।

क्रोम उदाहरण

Chrome as a browser extension

एज उदाहरण

Edge as a browser extension

मैं एचटीएमएल विश्वास करते हैं और कोणीय बातचीत ही मौलिक ध्वनि है, क्योंकि जब मैं pop up page के लिए सीधे ब्राउज़ करें, जैसे file:///C:/temp/app/popup.html एक यूआरएल का उपयोग कर, Chrome और एज सही ढंग से अभिव्यक्ति {{2+2}} लिए "4" का मूल्यांकन।

क्रोम उदाहरण है जब popup.html

Chrome direct browse to popup.html

एज उदाहरण के लिए सीधे brosing जब popup.html

Edge direct browse to popup.html

के लिए सीधे ब्राउज़ कर संक्षेप में, यह एक एज विस्तार है जो अभिव्यक्ति मूल्यांकन के रूप में ही है विफल रहता है; एक क्रोम एक्सटेंशन के रूप में या एज और क्रोम दोनों में सीधे ब्राउज़िंग के साथ यह काम करता है।

तीस आप ट्यूब पर दूसरा वीडियो डेमो: YouTube demo

मैं GitHub लेकिन कोड पर स्रोत कोड का एक पूर्ण संस्करण रखा है काफी सरल है और निम्नलिखित शामिल हैं:

एक popup.html फ़ाइल पेज के लिए पॉप-अप विंडो, जो कोणीय अभिव्यक्ति शामिल हैं:

<html> 
<head> 
    <script type="text/javascript" src="scripts/angular.min.js"></script> 
    <script type="text/javascript" src="scripts/app.js"></script> 
</head> 
<body> 
    <div ng-app="myApp"> 
    <div>{{2+2}}</div> 
    </div> 
</body> 
</html> 

एक app.js फ़ाइल कोणीय मॉड्यूल को परिभाषित करने के:

var myApp = angular.module('myApp', []); 

एक contentscript.js कि वेबसाइट बताता पॉप-अप को खोलने के लिए:

// Set the window object for multiple browser compatibility 
window.browser = (function() { 
return window.msBrowser || 
    window.browser || 
    window.chrome; 
})(); 

window.browser.runtime.sendMessage({ action: "openPopUp" }); 

एक background.js स्क्रिप्ट है कि वास्तव में popup.html फ़ाइल को खोलता है:

// Set the window object for multiple browser compatibility 
window.browser = (function() { 
return window.msBrowser || 
    window.browser || 
    window.chrome; 
})(); 

window.browser.runtime.onMessage.addListener(
    function (request, sender, sendResponse) { 
     if (request.action == "openPopUp") { 
      window.browser.tabs.query({ active: true, currentWindow: true }, 
       function (tabs) { 
        window.browser.pageAction.show(tabs[0].id); 
       }); 
     } 
    }); 

और अंत में एक manifest.json फ़ाइल है कि तारों को एक साथ सब कुछ है, जो दोनों ब्राउज़र को समझने:

{ 
    "manifest_version": 2, 
    "name": "BrowserExtensionUsingAngularWorksChromeNotEdge", 
    "version": "1.0.0", 
    "author": "Greg Trevellick", 
    "page_action": { 
    "default_icon": { 
     "19": "icon_19x19.png" 
    }, 
    "default_popup": "popup.html" 
    }, 
    "background": { 
    "scripts": [ "scripts/background.js" ], 
    "persistent": false 
    }, 
    "content_scripts": [ 
    { 
     "matches": [ 
     "http://marketplace.visualstudio.com/*", 
     "https://marketplace.visualstudio.com/*", 
     "http://www.bbc.co.uk/*" 
     ], 
     "js": [ 
     "scripts/contentscript.js", 
     "scripts/angular.min.js" 
     ] 
    } 
    ], 
    "permissions": [ 
    "activeTab", 
    "declarativeContent", 
    "http://marketplace.visualstudio.com/", 
    "https://marketplace.visualstudio.com/", 
    "http://www.bbc.co.uk/" 
    ], 
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" 
} 

इसके लायक होने के लिए, क्रोम एक्सटेंशन के साथ शुरू करने के कुछ निर्देश here और एज here के लिए पाए जा सकते हैं।

+0

यह सिर्फ नहीं एक अभिव्यक्ति है कि मूल्यांकन नहीं कर रहा है। यह कोणीय ऐप है जो बूटस्ट्रैप नहीं है। अगर यह बूटस्ट्रैप में विफल रहता है, तो एक त्रुटि होनी चाहिए। त्रुटि संदेश क्या कहता है? – estus

+0

क्या आपका मतलब कंसोल में एक त्रुटि है? मुझे कंसोल में कोई त्रुटि देखने को याद नहीं है। –

+0

स्क्रिप्ट त्रुटि होने पर हमेशा एक त्रुटि होनी चाहिए (और आपके मामले में यह करता है)। यदि कोई त्रुटि संदेश नहीं है तो यह कुल अनुमान बन जाता है। मैं एज में विस्तार विकास नहीं करता हूं, लेकिन एक्सटेंशन से त्रुटियों को प्रदर्शित करने के लिए अतिरिक्त कदम हो सकते हैं। – estus

उत्तर

1

वर्तमान में AngularJS एज विस्तार protoco के लिए bootstrap नहीं होंगे एल। मैंने PR on GitHub to address this सबमिट किया है। यदि आप angular.js फ़ाइल में this change बनाते हैं तो आप इसे काम करना शुरू कर देंगे।

तुम भी bootstrap manually एक समाधान के रूप कर सकते हैं।

+0

धन्यवाद kspearrin! मैंने आपके द्वारा सुझाए गए सरल परिवर्तन को बनाया है और एंज का उपयोग करते समय एंजुलर अभिव्यक्ति को अब "4" नहीं "{{2 + 2}}" का हल करता है :-) –

2

unsafe-eval अब माइक्रोसॉफ्ट एज एक्सटेंशन में समर्थित नहीं है, तो आप से Supported manifest keys

माइक्रोसॉफ्ट एज एक्सटेंशन वर्तमान में केवल समर्थन Default Policy Restrictions कुछ समाधान इस समान प्रश्न AngularJS uses eval in chrome extension

में उल्लेख किया है का उपयोग करना चाहते हो सकता है: script-src 'self'; object-src 'self'

+0

धन्यवाद, लेकिन मैं "असुरक्षित-eval" बिना और यहां तक ​​कि एक एनजी-सीएसपी विशेषता के साथ की कोशिश की है, लेकिन यह कोई फर्क नहीं पड़ता। ऐसा लगता है जैसे कोणीय नियंत्रक पाया गया है, लेकिन मैं स्थानीय रूप से कोणीय चला रहा हूं, सीडीएन से नहीं। –