0

I would like to interact with the DOM of my current page when i click on an event in a contextualMenu from ChromeExtension.

There is my code :

manifest.json

{
  "name": "jQuery DOM",
  "version": "1",
    "permissions":[
        "http://*/",
        "contextMenus"
    ],
  "description": "Manipulate the DOM when the page is done loading",
  "background": {
      "scripts": ["sample.js", "jquery.min.js"]},
  "browser_action": {
    "name": "Manipulate DOM",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery.min.js", "background.js" ],
    "matches": [ "http://*/*", "https://*/*"]
  }],
    "manifest_version": 2
}

sample.js

// Copyright (c) 2010 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// A generic onclick callback function.

    function editOnClick(info, tab) {

        alert($("body").html());

    }

// Create a parent item and two children.
    var parent = chrome.contextMenus.create({"title": "Therefore"});
    var child1 = chrome.contextMenus.create(
        {"title": "Éditer", "parentId": parent, "onclick": editOnClick});

When i try this, i get with my alert box:

<script src="sample.js"></script>
<script src="jquery.min.js"></script>

But with $("body").append('TEST') in my background.js, i can interact directly with the DOM of my currently page. I don't know why i can't from a contextualMenu.

Siegfried Lefebvre
  • 1
  • You are mixing up a background page and the current page. Your scripts sample.js and background.js run in different contexts. Have a read at https://developer.chrome.com/extensions/overview#arch – Xan Oct 30 '14 at 15:23
  • The Chrome extension API does currently not offer any way to know which DOM element was clicked prior the context menu activation. (though I want to add this feature to Chromium at some point, after figuring out the best way to communicate the node, since the background page is completely different from the content script/page, as @Xan says. The contextMenus.onClicked event is triggered in the background page, while the clicked node is only available in the content script/page). – Rob W Oct 30 '14 at 23:44
  • So is there any other way to get the DOM element when an event is triggered ? I can't do anything with the contextualMenu ? – Siegfried Lefebvre Oct 31 '14 at 09:26
  • @SiegfriedLefebvre Have you read the documentation I linked? You will need a content script to do anything with the page DOM. This is a workaround: http://stackoverflow.com/questions/7703697/how-to-retrieve-the-element-where-a-contextmenu-has-been-executed – Xan Oct 31 '14 at 11:21
  • Or even this: http://stackoverflow.com/questions/18387784/pass-dom-element-from-background-script-to-chrome-tabs-executescript – Xan Oct 31 '14 at 11:23
  • I know what is the point. But i wanted to try this, i don't get any event triggered. In fact, nly background.js is executed, but not the content_script. I don't know why. I have just a manifest.json, background.js and myscript.js as the content script. – Siegfried Lefebvre Nov 03 '14 at 12:49

1 Answers1

0

I get some answers. I had to create an event triggered by content-script.js because it's not possible to access to the DOM page from the background.

There is my new code for example :

background.js

    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

contentscript.js

    chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

It's from the official documentation. When i try this, i ve got this error : Error in event handler for (unknown): Cannot read property 'farewell' of undefined Stack trace: TypeError: Cannot read property 'farewell' of undefined

i don't know what's wrong with this simple example. It's like i ve got no answer from my contentscript.js

Siegfried Lefebvre
  • 1