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”

希望對您有所幫助！