Chrome 扩展中脚本之间的通信

Question

我知道这里已经存在这个问题的许多变体，但它们似乎都不适合我。

详情：

我正在编写一个扩展程序，它可以从您在 gmail 中发送的电子邮件中提取一些电子邮件数据。为了实现这一点，我正在使用这个版本的 Gmailr https://github.com/joscha/gmailr。

实际上，我有三个内容脚本：Gmailr.js 和 main.js（与上面链接中的几乎相同）允许我提取我正在寻找的信息。然后我用 content.js 向扩展的后台页面发送消息。

问题是我无法从 gmailr.js 和 main.js 使用任何 Chrome API，我也不确定为什么，所以我无法将这些消息发送回后台页面。

这就是为什么我制作了可以与后台页面通信的 content.js。但是，它似乎无法看到其他内容脚本所做的任何事情。例如，main.js 在页面顶部插入一个 div。当我尝试从 content.js 将事件侦听器附加到此 div 中的按钮时，我被告知不存在此类元素。

如何让 main.js 提取的数据被 content.js 看到？ （我也尝试将数据放在本地存储中，然后触发自定义事件监听器告诉 content.js 读取本地存储，但没有运气，因为他们似乎无法听到对方的事件被触发）。

非常感谢任何见解或替代方案。

（如果需要我可以发布代码，但它是碎片和长）

我的清单文件：

{
  "manifest_version": 2,
  "name": "Email extractor",
  "description": "Extracts data from emails",
  "version": "1.0",
  "background": {
     "script": "background.js"
  },
  "content_scripts": [
    {
      "matches": [
        "*://mail.google.com/*",
        "*://*/*"
      ],
      "js": [
        "lib/yepnope.js/yepnope.1.5.4-min.js",
        "lib/bootstrap.js",
        "main.js",
        "gmailr.js",
        "content.js"

      ],
      "css": [
        "main.css"
      ],
      "run_at": "document_end"
    }
  ],
  "permissions": [
    "tabs",
    "storage",
    "background",
    "*://mail.google.com/*",
    "*://*/*"
  ],

  "browser_action": {
    "default_icon": "img/icon.png",
    "default_popup": "popup.html"
  },

  "web_accessible_resources" : [
    "writeForm.js",
    "disp.js",
    "/calendar/jsDatePick.min.1.3.js",
    "/calendar/jsDatePick_ltr.min.css",
    "lib/gmailr.js",
    "lib/jquery-bbq/jquery.ba-bbq.min.js",
    "content.js",
    "main.js",
    "background.js"
  ]
} 

这是 main.js：

Gmailr.init(function(G) {
    sender = G.emailAddress();
    G.insertTop($("<div id='gmailr'><span></span> <span id='status'></span>)");
    el = document.getElementById("testid");
    el.addEventListener('click', mg, false);
    var status = function(msg) {
       G.$('#gmailr #status').html(msg); };    
       G.observe(Gmailr.EVENT_COMPOSE, function(details) {        
         ....
         status(" user: " + user);
         console.log('user:', user);
         //now try to send a message to the background page
         //this always returns the error that method sendMessage does not exist for     undefined
        chrome.runtime.sendMessage({greeting: "test from gmailr"}, function(response) {
        console.log("did it send?");
        });
    });


});

gmailr.js 很长，也不是我自己的代码，但可以在这里看到：http://pastebin.com/pK4EG9vh

Answer 1

您好，您的问题可能有 3 个原因：

1. 您从 main.js 和 gmailr.js 向 bgp 发送消息的方式可能是错误的，因为您必须从任何内容脚本与 bgp 进行通信。 （在您的清单内容脚本键中，缺少 gmailr.js）。向我们展示您的代码会有所帮助。

2. 从 content.js 搜索访问 main.js 中创建的元素时，您似乎遇到了问题。您是否尝试使用 jQuery $("").on() 方法访问您的元素？一个简单的测试必须是在一个 cs 中声明一个函数并在另一个 cs 中使用它。如果它不工作，这是一个明显的问题。您在清单内容脚本键中声明 .js 文件的顺序也很重要。

3. 尝试在清单内容脚本数组“run_at”:“document_end”

希望对您有所帮助！