javascript - Chrome Extension Context Menu: how to append div to page after clicking menu item

Question

Playing around with building a Chrome extension. At the moment I've put together a context menu item. When the context menu item is clicked, it fires itemClicked() in my background script context_menu.js:

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

The alert fires. I can also do stuff like sending ajax requests through itemClicked()

However, I can't append any elements to the page (or DOM manipulation of any sort). Even something as basic as this doesn't work:

  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 I tried to add the same code to a content script:

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

But it still won't work. What am I doing wrong?

How can I get the context menu to append something to the page after clicking?

Thanks so much!

Edit: here is my manifest.json (removed the irrelevant stuff like name/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"]

}

Answer 1

You have probably misunderstood the concept of a background page (and its younger, more resource-friendly and preferred sibling: event page) and that of a content script.

content scripts:

• Are bound to a specific web-page loaded into a tab.
• Live in an isolated world (JS context), but have direct access to the web-pages DOM.
• Can communicate with the background page (see Message Passing).

background pages:

• Are bound to your extension (there is max. 1 background (or event) page for each extension).
• Are always somewhere in the background (event pages "take a nap" from time to time, but you can always wake them up).
• Do not have direct access to any web-page.
• Can communicate with the content scripts (and other views) (see Message Passing).
• Can do cool stuff (because they have access to cool chrome.* APIs).

---

The chrome.contentMenus API is available only to a background page. Thus, you have to create any context menu and listen for onClicked events there (in the background page).
Once a context menu has been clicked, you can use Programmatic Injection to inject some code (or a content script) into the active tab's web-page.

Below is the source code of a sample extension that demonstrates this method.

manifest.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("
");

        /* Inject the code into the current tab */
        chrome.tabs.executeScript(tab.id, { code: code });
    }
});

(If your injected code is complicated enough, it might be a better idea to inject a .js file. More info on Programmatic Injection.)