Làm cách nào để tương tác với background.js từ cửa sổ bật lên?

Question

Có cách nào để chuyển thông tin giữa popup.html (hoặc popup.js) và tập lệnh nền không?

Tôi muốn cửa sổ bật lên hiển thị thông tin từ tài khoản của người dùng hoặc cho phép họ đăng nhập nhưng có background.js xử lý xác thực và logic khác. Tôi có background.js được khai báo trong tệp kê khai, nhưng dường như không có dấu hiệu cho thấy nó đang được sử dụng.

Chỉnh sửa: Nếu tôi đang đi về điều này tất cả sai và có một cách tốt hơn để làm điều này, đó sẽ là tuyệt vời quá.

Answer 1

Sử dụng chrome.extension API.

Bạn có thể gửi yêu cầu qua lại hoặc thậm chí tốt hơn sử dụng cổng để liên lạc liên tục.

Ví dụ tôi đưa ra sẽ tạo liên lạc hai chiều giữa cửa sổ bật lên và trang nền kết nối khi cửa sổ bật lên được mở ra.

Chỉ cần tạo tệp socket.js được bao gồm trong cả trang nền và trang bật lên. Sau đó, trên mỗi bạn chỉ có thể tuyên bố:

new Socket(); 

Đây là việc thực hiện socket.js:

var Socket = function() { 
    window.socket = this; 

    this.port = chrome.extension.connect({name:"popupToBackground"}); 

    chrome.extension.onConnect.addListener(function(port) { 
     if(port.name == "backgroundToPopup") {} 
      else if(port.name == "popupToBackground") { 
      window.socket.port = chrome.extension.connect({name:"backgroundToPopup"}); 
     } 
     else { 
      return; 
     } 

     port.onMessage.addListener(function(msg) { 
      try { 
       window[msg.namespace][msg.literal][msg.method].apply(this, msg.args); 
      } 
      catch(error) { 
       // your failed action goes here. 
      } 
     }); 
    }); 
}; 

Hãy chắc chắn rằng bạn thực hiện các phương pháp chung gọi trong công tác nhắn listener cho bạn. Tôi thích định dạng mà tôi đã đưa ra ở trên - nó rất mạnh mẽ. Để gửi tin nhắn qua lại chỉ gửi cho họ để các ổ cắm:

socket.post({ namespace: "myNamespace", 
       literal: "myLiteral", 
       method: "myMethod", 
       args: ["argOne", "argTwo"] 
      }); 
}); 

Vì vậy, nếu điều này được thực hiện từ các trang popup sau đó trang nền sẽ gọi:

window.myNamespace.myLiteral.myMethod(argOne, argTwo); 

Đối với tôi đây là một rất đẹp đối tượng javascript có thể dùng lại. Bạn thậm chí có thể thêm chức năng nguyên mẫu cụ thể nếu bạn muốn - cách này của nó thậm chí còn dễ dàng hơn để gửi tin nhắn:

Socket.prototype = { 
    sendOneTwo: function() { 
     socket.post({ namespace: "myNamespace", 
         literal: "myLiteral", 
         method: "myMethod", 
         args: ["argOne", "argTwo"] 
    }); 
}; 

Bây giờ tất cả các bạn có thể nói là:

socket.sendOneTwo(); 

Answer 2

Lưu ý rằng trang nền và cửa sổ bật lên trực tiếp trong cùng một quy trình (quy trình mở rộng), do đó, một trang có thể nhận được cửa sổ DOM của cửa sổ kia và sau đó gọi hàm hoặc đặt trực tiếp các biến. Ví dụ, cửa sổ bật lên có thể gọi chrome.extension.getBackgroundPage để thay đổi nền:

chrome.extension.getBackgroundPage().variable = 42; 

và trang nền có thể gọi chrome.extension.getViews để có được popup:

var popups = chrome.extension.getViews({type: "popup"}); 
if (0 < popups.length) 
    popups[0].variable = 42; 

Một cách khác để thiết lập các biến chia sẻ được bằng cách sử dụng DOM truyền thống API, vì mỗi tiện ích đều có nguồn gốc giả (chẳng hạn như "eakjnniffhfegdpfehmnpcmjiameincp"). Vì vậy, khi bạn sửa đổi localStorage, document.cookie hoặc IndexedDB trên nền, nó có thể được đọc lại trong cửa sổ bật lên.

Điều đó nói rằng, bạn vẫn có thể muốn sử dụng thông báo chuyển API ngay cả trong các trang trong quá trình mở rộng, vì nó có thể làm cho mã của bạn thống nhất hơn. Gửi tin nhắn là cách duy nhất để giao tiếp với tập lệnh nội dung.

Answer 3

Đối với mục đích chỉ gỡ lỗi Tôi tìm thấy điều này khá tiện dụng trong cửa sổ bật lên JS:

console = chrome.extension.getBackgroundPage().console