Chrome-Erweiterung Kontext Menü: wie Anhängen, div, um die Seite nach einem Klick auf Menüpunkt

Spielen, um mit dem Bau einer Chrome-Erweiterung. Im moment habe ich zusammen ein Kontextmenü. Wenn der Kontext-Menü-Eintrag klickt, feuert itemClicked() in meinem hintergrund-Skript context_menu.js:

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

Den Alarm ausgelöst. Kann ich auch noch Sachen wie das senden von ajax-Anfragen durch itemClicked()

Jedoch kann ich nicht Anhängen, beliebige Elemente der Seite (oder DOM-manipulation jeglicher Art). Sogar etwas so einfaches wie das nicht funktioniert:

  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);

So, ich habe versucht, fügen Sie den gleichen code in einen content-script:

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

Aber es immer noch nicht funktionieren. Was mache ich falsch?

Wie kann ich das Kontext Menü Anhängen etwas an der Seite nach Klick?

Vielen Dank!

Edit: das hier ist mein manifest.json (entfernt die irrelevante Sachen wie name/Beschreibung...usw)

{


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

}

Hintergrund-Scripte wird nicht erlaubt, Zugriff auf das DOM, so sollten Sie nicht erwarten, dass, um zu arbeiten. Aber ich bin nicht zu sehen, warum der Inhalt Skript würde nicht erreichen, dass. Könnte Sie nach Ihrem manifest.json?
Hinzugefügt!
Anstatt den Inhalt Skript Listener für das Ereignis, haben Sie versucht, mit den hintergrund-Skript inject die notwendigen code?
das funktioniert tatsächlich - vielen Dank. Kann ich Spritzen ein content-script, das nicht ausgeführt werden, es sei denn, es ist ein Aufruf über executeScript? (aus meinem Verständnis, Inhalte, Skripte automatisch ausführen jedes mal, wenn ein tab geladen wird)
tatsächlich eingespritzte Inhalt Skript funktionierte nur, wenn ich einen alert... Es immer noch nicht zulassen, wird für jede DOM-manipulation :/

InformationsquelleAutor Michelle | 2013-11-11

17

Haben Sie wahrscheinlich missverstanden das Konzept einer hintergrund-Seite (und seine jünger, mehr Ressourcen-freundlich und bevorzugte Geschwister: event-Seite), und dass der eine Inhalt Skript.

content scripts:
- Gebunden sind, um eine bestimmte web-Seite geladen in einem tab.
- Leben in einer isolierten Welt (JS-Kontext), haben aber direkten Zugang zu den web-Seiten von DOM.
- Kommunikation mit dem hintergrund-Seite (siehe Message Passing).
hintergrund-Seiten:
- Gebunden sind an Ihrer Erweiterung (es gibt max. 1 hintergrund (oder event) Seite, die für jede Erweiterung).
- Sind immer irgendwo im hintergrund (Ereignis-Seiten "take a nap" von Zeit zu Zeit, aber man kann immer aktiviert werden).
- Keinen direkten Zugang zu einem beliebigen web-Seite.
- Kann die Kommunikation mit der content-Skripte (und andere Ansichten) (siehe Message Passing).
- Tun können Coole Sachen (denn Sie haben Zugang zu kühlen chrome.* APIs).
Den chrome.contentMenus API ist nur verfügbar, zu einem hintergrund-Seite. So haben Sie zu jedem Kontext-Menü und lauschen Sie onClicked Veranstaltungen gibt es (im hintergrund der Seite).

Sobald ein Kontext-Menü angeklickt wurde, können Sie Programmgesteuerte Injektion Spritzen einige code (oder ein content-script) in die aktive Registerkarte web-Seite.

Unten ist der Quellcode eines Beispiel-Erweiterung, die veranschaulicht diese Methode.

manifestieren.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 });
    }
});
```
(Wenn Ihr injiziert code ist kompliziert genug, es könnte eine bessere Idee zu injizieren .js-Datei. Mehr info auf Programmgesteuerte Injektion.)
- Vielen Dank für die Erklärung dieses so klar! Deine Antwort eigentlich machte mir klar, dass ich schwachsinnig und schrieb .setAttribute("css", "blabla") statt-Stil... Das war eigentlich, warum alle Warnungen ich in den content-Skripten feuerten, aber der angehängte Objekte nicht angezeigt
- Für mich ist der code in background.js hatte, genannt zu werden, von einem chrome.runtime.onInstalled.addEventListener Rückruf bei der Verwendung von Ereignis-Seiten (persistent: false).
InformationsquelleAutor gkalpak

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.