Menu contextuel Extension Chrome: comment ajouter div à la page après avoir cliqué sur l'élément de menu

Jouer avec la construction d'une extension Chrome. Au moment où j'ai mis en place un élément de menu contextuel. Lorsque l'élément du menu contextuel est cliqué, il déclenche itemClicked() dans mon script d'arrière-plan context_menu.js :

 function itemClicked(info, tab) { alert("clicked"); }

Les feux d'alerte. Je peux également faire des choses comme envoyer des requêtes ajax via itemClicked()

Cependant, je ne peux pas ajouter d'éléments à la page (ou manipulation DOM de toute sorte). Même quelque chose d'aussi simple que cela ne fonctionne pas:

  var d = document.createElement('div'); d.setAttribute("css", "width: 100px; height: 100px; background-color: red; position: fixed; top: 70px; left: 30px; z-index: 99999999999;"); document.body.appendChild(d);

J'ai donc essayé d'ajouter le même code à un script de contenu:

 chrome.contextMenus.onClicked.addListener(function(OnClickData info, tabs.Tab tab) { //code to append the input here });

Mais cela ne fonctionnera toujours pas. Qu'est-ce que je fais mal?

Comment puis-je obtenir le menu contextuel pour ajouter quelque chose à la page après avoir cliqué?

Merci beaucoup!

Edit: voici mon manifeste.json (a supprimé les choses non pertinentes comme le nom / la description … etc.)

 { "permissions": [ "activeTab", "tabs", "cookies", "contextMenus" ], "background": { "scripts": ["context_menu.js"] }, "browser_action": { "default_icon": "icon16.png", "default_css": "popup.css", "default_popup": "popup.html" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["vendor/jquery-1.8.2.min.js", "config.js", "content_script.js"] } ], "web_accessible_resources": ["popup.html"] }

Vous avez probablement mal compris le concept d'une page d'arrière – plan (et sa plus jeune, plus conviviale et préférée: la page d'événement ) et celle d'un script de contenu .

Scritps de contenu :

Est lié à une page Web spécifique chargée dans un onglet.
Vivre dans un monde isolé (contexte JS), mais avoir un accès direct aux pages web DOM.
Peut communiquer avec la page de fond (voir Message Passing ).

Pages d'arrière-plan :

Est lié à votre extension (il y a une page d'arrière-plan (ou événement) max. Pour chaque extension).
Sont toujours quelque part en arrière-plan (les pages d'événements «prennent une sieste» de temps en temps, mais vous pouvez toujours les réveiller).
N'a pas accès directement à une page Web.
Peut communiquer avec les scripts de contenu (et d'autres vues) (voir Message Passing ).
Peut faire des trucs géniaux (car ils ont accès à cool chrome. * API).

L'API chrome.contentMenus est disponible uniquement pour une page d'arrière-plan. Ainsi, vous devez créer n'importe quel menu contextuel et écouter les événements onClicked (en arrière-plan).
Une fois qu'un menu contextuel a été cliqué, vous pouvez utiliser Programmatic Injection pour injecter un code (ou un script de contenu) dans la page Web de l'onglet actif.

Vous trouverez ci-dessous le code source d'une extension d'exemple qui démontre cette méthode.

Manif.json:

 { "manifest_version": 2, "name": "Test Extension", "version": "0.0", "background": { "persistent": false, // <-- let's make it an event page "scripts": ["background.js"] }, "permissions": [ "contextMenus", "activeTab" // <-- here, sufficient for our purpose ] }

Background.js:

 /* Create a context-menu */ chrome.contextMenus.create({ id: "myContextMenu", // <-- mandatory with event-pages title: "Click me", contexts: ["all"] }); /* Register a listener for the `onClicked` event */ chrome.contextMenus.onClicked.addListener(function(info, tab) { if (tab) { /* Create the code to be injected */ var code = [ 'var d = document.createElement("div");', 'd.setAttribute("style", "' + 'background-color: red; ' + 'width: 100px; ' + 'height: 100px; ' + 'position: fixed; ' + 'top: 70px; ' + 'left: 30px; ' + 'z-index: 9999; ' + '");', 'document.body.appendChild(d);' ].join("\n"); /* Inject the code into the current tab */ chrome.tabs.executeScript(tab.id, { code: code }); } });

(Si votre code injecté est assez compliqué, il pourrait être préférable d'injecter un fichier .js. Plus d'informations sur Programmatic Injection .)