Javascript Chrome扩展上下文菜单：单击菜单项后如何将div附加到页面

正在构建一个Chrome扩展。目前，我已经准备好了一个上下文菜单项。单击上下文菜单项时，它会在我的后台脚本

context\u menu.js中激发
itemClicked（）
：

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

警报响起。我还可以通过
itemClicked（）

但是，我不能向页面添加任何元素（或任何类型的DOM操作）。即使像这样基本的东西也不起作用：

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

因此，我尝试向内容脚本添加相同的代码：

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

但还是不行。我做错了什么

单击后，如何获得上下文菜单以向页面添加内容

非常感谢

编辑：这是我的manifest.json（删除了不相关的内容，如名称/描述等）

{
“权限”：[
“活动标签”，
“标签”，
“饼干”，
“上下文菜单”
],
“背景”：{
“脚本”：[“context_menu.js”]
},
“浏览器操作”：{
“默认图标”：“icon16.png”，
“default_css”：“popup.css”，
“默认弹出窗口”：“popup.html”
},
“内容脚本”：[
{      
“匹配项”：[“”]，
“js”：[“vendor/jquery-1.8.2.min.js”、“config.js”、“content_script.js”]
}
],
“网络可访问资源”：[“popup.html”]
}
您可能误解了和的概念（以及更年轻、资源更友好、更受欢迎的兄弟姐妹：）

内容脚本：


绑定到加载到选项卡中的特定网页
生活在一个孤立的世界（JS上下文），但可以直接访问web页面
可以与后台页面进行通信（请参见）

背景页面：


绑定到您的扩展（每个扩展最多有一个背景（或事件）页面）
总是在后台的某个地方（活动页面有时会“小睡一下”，但你总是可以唤醒它们）
不能直接访问任何网页
可以与内容脚本（和其他视图）通信（请参见）
可以做一些很酷的事情（因为他们可以访问coolchrome.*API）


chrome.contentMenusAPI仅对后台页面可用。因此，您必须创建任何上下文菜单，并在那里（在后台页面中）侦听
onClicked
事件。

单击上下文菜单后，可以使用将一些代码（或内容脚本）注入活动选项卡的网页

下面是演示此方法的示例扩展的源代码

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

/* 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 });
    }
});

{
“清单版本”：2，
“名称”：“测试扩展”，
“版本”：“0.0”，
“背景”：{
“持久的”：false，//不允许后台脚本访问DOM，因此您不应该期望它工作。但我不明白为什么内容脚本不能完成这一点。您可以发布manifest.json吗？您是否尝试过让后台脚本包含必要的代码，而不是让内容脚本侦听事件？@Teepeemm实际有效-谢谢。我可以插入一个内容脚本，除非通过executeScript调用它，否则它不会运行吗？（据我所知，每次加载选项卡时，内容脚本都会自动运行）实际上，注入的内容脚本只有在我设置警报时才起作用……它仍然不允许任何DOM操作：/谢谢您如此清楚地解释了这一点！您的回答实际上让我意识到我很愚蠢，并编写了.setAttribute（“css”，“blablabla”）实际上，这就是为什么我在内容脚本中设置的任何警报都会触发，但附加的对象没有显示给我的原因，
background.js
中的代码必须在使用事件页面时从
chrome.runtime.onInstalled.addEventListener
回调调用（
persistent:false
）。
/* 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 });
    }
});