11

尝试构建 Chrome 扩展程序。目前我已经整理了一个上下文菜单项。单击上下文菜单项时，它会itemClicked()在我的后台脚本中触发context_menu.js：

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

警报触发。我也可以做一些事情，比如通过发送 ajax 请求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 （删除了不相关的东西，如名称/描述......等）

{


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

}
4

1 回答 1

20

您可能误解了背景页面（及其更年轻、更资源友好和首选的兄弟：事件页面）和内容脚本的概念。

内容脚本：

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

背景页面：

  • 绑定到您的扩展程序（每个扩展程序最多有 1 个背景（或事件）页面）。
  • 总是在后台某处（事件页面不时“打盹”，但你总是可以唤醒它们）。
  • 不能直接访问任何网页。
  • 可以与内容脚本（和其他视图）进行通信（请参阅消息传递）。
  • 可以做一些很酷的事情（因为他们可以访问很酷的chrome.* API）。

chrome.contentMenus API 仅适用于背景页面。因此，您必须创建任何上下文菜单并在onClicked那里监听事件（在后台页面中）。
单击上下文菜单后，您可以使用编程注入将一些代码（或内容脚本）注入活动选项卡的网页。

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

清单.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
    ]
}

背景.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 });
    }
});

（如果您注入的代码足够复杂，那么注入 .js 文件可能是一个更好的主意。有关Programmatic Injection的更多信息。）

于 2013-11-11T22:12:15.767 回答