Appel de fonction d'arrière-plan de l'extension Chrome à partir d'un site

Avant qu'une page web est en mesure d'appeler une page d'arrière-plan de la fonction, les problèmes suivants doivent être résolus:

1. Être en mesure d'utiliser hello(); partir d'une page web. Ceci est fait par l'injection de un script définissant hello à l'aide de scripts de Contenu. L'injection de la fonction communique avec le contenu du script à l'aide d'un événement personnalisé ou postMessage.
2. Le contenu du script doit communiquer avec l'arrière-plan. Ceci est mis en œuvre par le biais de chrome.moment de l'exécution.sendMessage.
   
   Si la page web doit recevoir une réponse ainsi:
3. Envoyer une réponse à partir de la page d'arrière-plan (sendMessage /onMessage, voir ci-dessous).
4. Dans le contenu du script, créer un événement personnalisé ou utiliser postMessage pour envoyer un message à la page web.
5. Dans la page web, de gérer ce message.

Toutes ces méthodes sont asynchrones, et doivent être mises en œuvre par le biais de fonctions de rappel.

Ces mesures doivent être conçues avec soin. Voici une implémentation générique qui met en œuvre toutes les étapes ci-dessus. Ce que vous devez savoir à propos de la mise en œuvre:

• Dans le code-à-être-injecté, utilisez le sendMessage méthode chaque fois que le contenu de script doivent être contactés.
  
  Utilisation: 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);
}
});

Une extension Chrome n'est pas complète sans un fichier de manifeste, voici donc la manifest.json fichier que j'ai utilisé pour tester la réponse:

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

Cette extension a été testé à http://jsfiddle.net/jRaPj/show/ (contenant hello(); comme on le voit dans la question), et affiche une boîte de dialogue disant "Background dit: null".

Ouvrez la page d'arrière-plan, l'utilisation localStorage.setItem('whatever', 'Hello!'); de voir que le message est correctement modifié.

OriginalL'auteur Rob W

Pas, avec votre code ci-dessus en raison de page d'arrière-plan(s) d'architecture

Oui avec le contenu des scripts

Démonstration À L'Aide De Scripts De Contenu

manifeste.json

L'enregistrement des scripts de contenu myscripts.js

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

Laissez-moi savoir si vous avez besoin de plus d'informations.

OriginalL'auteur Sudarshan