किसी साइट से क्रोम एक्सटेंशन का कॉल पृष्ठभूमि फ़ंक्शन

Question

मैं एक वेबपृष्ठ के अंदर एक फ़ंक्शन ढूंढ रहा हूं जो क्रोम एक्सटेंशन को सक्रिय करता है।

कल्पना कीजिए कि http://www.example.com/test.html शामिल हैं:

<script> 
hello(); 
</script> 

और मेरी पृष्ठभूमि पृष्ठ hello समारोह की परिभाषा में शामिल हैं:

function hello() { 
    alert("test"); 
} 

कैसे मुझे यकीन है कि क्रोम एक्सटेंशन की पृष्ठभूमि पृष्ठ के hello जब कहा जाता है कर सकते हैं test.htmlhello(); पर कॉल करें?

Answer 1

नहीं है, content scripts

प्रदर्शन का उपयोग करते हुए सामग्री स्क्रिप्ट

manifest.json

सामग्री स्क्रिप्ट myscripts पंजीयन के साथ background page(s) architecture

हाँ की वजह से अपने ऊपर कोड के साथ। जेएस

{ 
"name": "NFC", 
"description": "NFC Liken", 
"version": "0.1", 
"manifest_version": 2, 
"permissions": ["tabs", "http://*/", "https://*/"], 
"content_scripts": { 
    "matches": "http://www.example.com/*", 
    "js": [ "myscript.js"] 
    }, 
"browser_action": { 
"default_icon": "sync-icon.png", 
"default_title": "I Like I Tag" 
} 
} 

मुझे और जानकारी चाहिए यदि आपको अधिक जानकारी चाहिए।

Answer 2

से पहले एक वेब पेज एक पृष्ठभूमि पृष्ठ के समारोह कॉल करने के लिए सक्षम है, तो निम्न समस्याओं को हल करने की आवश्यकता:

1. एक वेब पेज से hello(); उपयोग करने के लिए सक्षम हो। यह injecting द्वारा किया गया एक स्क्रिप्ट सामग्री स्क्रिप्ट का उपयोग करके hello परिभाषित करता है। इंजेक्शन फ़ंक्शन कस्टम ईवेंट या postMessage का उपयोग करके सामग्री स्क्रिप्ट के साथ संचार करता है।
2. सामग्री स्क्रिप्ट को पृष्ठभूमि के साथ संवाद करने की आवश्यकता है। यह chrome.runtime.sendMessage के माध्यम से लागू किया गया है।
   वेब पेज के रूप में अच्छी तरह से उत्तर प्राप्त करने की आवश्यकता है:
3. पृष्ठभूमि पृष्ठ से एक उत्तर भेजें (sendMessage/onMessage, नीचे देखें)।
4. सामग्री स्क्रिप्ट में, एक कस्टम ईवेंट बनाएं या वेब पेज पर एक संदेश भेजने के लिए postMessage का उपयोग करें।
5. वेब पेज में, इस संदेश को संभालें।

ये सभी विधियां असीमित हैं, और कॉलबैक फ़ंक्शंस के माध्यम से कार्यान्वित की जानी चाहिए।

इन चरणों को सावधानीपूर्वक डिजाइन करने की आवश्यकता है। यहां एक सामान्य कार्यान्वयन है जो उपरोक्त सभी चरणों को लागू करता है। कोड-टू-जा इंजेक्शन, sendMessage विधि का उपयोग करें जब भी सामग्री स्क्रिप्ट की जरूरत संपर्क करने के लिए

• : यदि आप कार्यान्वयन के बारे में पता करने की जरूरत क्या।
  उपयोग: sendMessage(<mixed message> [, <function callback>])

contentscript.js

// Random unique name, to be used to minimize conflicts: 
var EVENT_FROM_PAGE = '__rw_chrome_ext_' + new Date().getTime(); 
var EVENT_REPLY = '__rw_chrome_ext_reply_' + new Date().getTime(); 

var s = document.createElement('script'); 
s.textContent = '(' + function(send_event_name, reply_event_name) { 
    // NOTE: This function is serialized and runs in the page's context 
    // Begin of the page's functionality 
    window.hello = function(string) { 
     sendMessage({ 
      type: 'sayhello', 
      data: string 
     }, function(response) { 
      alert('Background said: ' + response); 
     }); 
    }; 

    // End of your logic, begin of messaging implementation: 
    function sendMessage(message, callback) { 
     var transporter = document.createElement('dummy'); 
     // Handles reply: 
     transporter.addEventListener(reply_event_name, function(event) { 
      var result = this.getAttribute('result'); 
      if (this.parentNode) this.parentNode.removeChild(this); 
      // After having cleaned up, send callback if needed: 
      if (typeof callback == 'function') { 
       result = JSON.parse(result); 
       callback(result); 
      } 
     }); 
     // Functionality to notify content script 
     var event = document.createEvent('Events'); 
     event.initEvent(send_event_name, true, false); 
     transporter.setAttribute('data', JSON.stringify(message)); 
     (document.body||document.documentElement).appendChild(transporter); 
     transporter.dispatchEvent(event); 
    } 
} + ')(' + JSON.stringify(/*string*/EVENT_FROM_PAGE) + ', ' + 
      JSON.stringify(/*string*/EVENT_REPLY) + ');'; 
document.documentElement.appendChild(s); 
s.parentNode.removeChild(s); 


// Handle messages from/to page: 
document.addEventListener(EVENT_FROM_PAGE, function(e) { 
    var transporter = e.target; 
    if (transporter) { 
     var request = JSON.parse(transporter.getAttribute('data')); 
     // Example of handling: Send message to background and await reply 
     chrome.runtime.sendMessage({ 
      type: 'page', 
      request: request 
     }, function(data) { 
      // Received message from background, pass to page 
      var event = document.createEvent('Events'); 
      event.initEvent(EVENT_REPLY, false, false); 
      transporter.setAttribute('result', JSON.stringify(data)); 
      transporter.dispatchEvent(event); 
     }); 
    } 
}); 

background.js

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) { 
    if (message && message.type == 'page') { 
     var page_message = message.message; 
     // Simple example: Get data from extension's local storage 
     var result = localStorage.getItem('whatever'); 
     // Reply result to content script 
     sendResponse(result); 
    } 
}); 

एक Chrome एक्सटेंशन नहीं पूरा मालसूची फ़ाइल के बिना, इसलिए यहाँ है manifest.json फ़ाइल जो मैं प्रयोग किया जाता है उत्तर का परीक्षण करने के लिए:

{ 
    "name": "Page to background and back again", 
    "version": "1", 
    "manifest_version": 2, 
    "background": { 
     "scripts": ["background.js"] 
    }, 
    "content_scripts": [{ 
     "matches": ["http://jsfiddle.net/jRaPj/show/*"], 
     "js": ["contentscript.js"], 
     "all_frames": true, 
     "run_at": "document_start" 
    }] 
} 

इस एक्सटेंशन का परीक्षण http://jsfiddle.net/jRaPj/show/ पर किया गया था (जिसमें प्रश्न में देखा गया hello(); है), और एक संवाद दिखाता है "पृष्ठभूमि ने कहा: शून्य"।
पृष्ठभूमि पृष्ठ खोलें, यह देखने के लिए कि संदेश सही ढंग से बदला गया है, localStorage.setItem('whatever', 'Hello!'); का उपयोग करें।

Answer 3

विस्तार करने के लिए Send messages from web pages लिए अंतर्निहित समाधान नहीं है

mainfest.json

"externally_connectable": { 
    "matches": ["*://*.example.com/*"] 
} 

वेब पेज:

// The ID of the extension we want to talk to. 
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc"; 

// Make a simple request: 
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url}, 
    function(response) { 
    if (!response.success) 
     handleError(url); 
    }); 

एक्सटेंशन की पृष्ठभूमि स्क्रिप्ट:

chrome.runtime.onMessageExternal.addListener(
    function(request, sender, sendResponse) { 
    if (sender.url == blacklistedWebsite) 
     return; // don't allow this web page access 
    if (request.openUrlInEditor) 
     openUrl(request.openUrlInEditor); 
    });