Chrome 扩展：DOM + ContextualMenu答案

【问题标题】：Chrome extension : DOM + ContextualMenuChrome 扩展：DOM + ContextualMenu
【发布时间】：2014-12-26 16:51:46
【问题描述】：

当我点击 ChromeExtension 的 contextualMenu 中的事件时，我想与当前页面的 DOM 进行交互。

这是我的代码：

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

当我尝试这个时，我得到了我的警报框：

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

但是在我的 background.js 中使用$("body").append('TEST')，我可以直接与当前页面的 DOM 进行交互。我不知道为什么我不能从 contextualMenu 中。

【问题讨论】：

您正在混淆背景页面和当前页面。您的脚本 sample.js 和 background.js 在不同的上下文中运行。阅读developer.chrome.com/extensions/overview#arch
Chrome 扩展 API 目前不提供任何方法来了解在上下文菜单激活之前单击了哪个 DOM 元素。（虽然我想在某个时候将此功能添加到 Chromium，但在找出与节点通信的最佳方式之后，因为背景页面与内容脚本/页面完全不同，正如@Xan 所说。contextMenus.onClicked 事件是在后台页面触发，而点击的节点仅在内容脚本/页面中可用）。
那么当事件被触发时，有没有其他方法可以获取 DOM 元素呢？我不能对 contextualMenu 做任何事情？
@SiegfriedLefebvre 你读过我链接的文档吗？您将需要一个内容脚本来对页面 DOM 执行任何操作。这是一种解决方法：stackoverflow.com/questions/7703697/…
甚至这个：stackoverflow.com/questions/18387784/…

标签： javascript jquery dom google-chrome-extension

【解决方案1】：

我得到了一些答案。我不得不创建一个由 content-script.js 触发的事件，因为无法从后台访问 DOM 页面。

以我的新代码为例：

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

来自官方文档。当我尝试这个时，我得到了这个错误：事件处理程序中的错误（未知）：无法读取未定义的属性“告别” 堆栈跟踪：TypeError：无法读取未定义的属性“告别”

我不知道这个简单的例子有什么问题。好像我的 contentscript.js 没有答案

【讨论】：