Question

我的chrome扩展程序中有一个上下文菜单，现在我需要在用户单击该菜单时捕获特定的页面元素。这是我的清单文件：

{
  "manifest_version": 2,
  "name": "Capture",
  "description": "This extension is capturing all text elements in the page",
  "version": "0.1",
  "permissions": ["contextMenus"],
  "background": {
    "scripts": ["jquery-2.0.2.js", "background.js"]
  },
  "manifest_version": 2
}

background.js

function captureTextBoxes(e) {
    var textboxes = $(':text') ; 
        //alert(textboxes.length);
        textboxes.each(function (i){
        //code here
    }
}

chrome.contextMenus.create({
    title: "Capture All text box Elements", 
    contexts:["page"], 
    onclick: captureTextBoxes,
});

这总是捕获0个文本框元素。所以我通过添加以下行来检查传递的文档：

    alert(document.documentElement.innerHTML);

它返回：

    <head></head>
    <body style="">
        <script src="jquery-2.0.2.js"></script>
        <script src="background.js"></script>
    </body>

这不是我的实际页面，而是由Chrome本身创建的动态页面。反正有没有访问右键单击上下文菜单的实际页面内容？（来自后台javaScript）

Answer 1

contextMenus.onClicked事件（触发onclick（in persistent background pages only）指定的回调）仅适用于后台页面，后台页面无法直接访问任何网页DOM。

如果您想操纵网页DOM，您必须：

将内容脚本注入网页。
将消息传递给该内容脚本，以便它可以为您操作DOM。

_{（SO中有很多资源说明如何实现这两者。）}

另外，看一下类似问题的 this answer

如何从chrome扩展的背景js访问页面元素

1 个答案: