2012-06-25 54 views
5

Giới thiệuChrome cháy sự kiện nghe nhiều lần

Tôi đã có một vấn đề với phần mở rộng của tôi dành cho Chrome. Nó phải hiển thị một cửa sổ popup lớp phủ nhỏ (được tạo trong jQuery) với kết quả tìm kiếm từ Google dựa trên lựa chọn văn bản của bạn. Về cơ bản, bạn có thể đánh dấu văn bản trên bất kỳ trang nào, nhấp chuột phải vào nó (trình đơn ngữ cảnh), nhấp vào "Tìm kiếm" từ khóa đã chọn '"và một cửa sổ nhỏ bật lên trong cùng một tab như lớp phủ với tất cả kết quả tìm kiếm từ Google.

Vấn đề

Nó hoạt động như mô tả, tuy nhiên chỉ cho lần đầu tiên. Khi tôi sẽ đánh dấu một từ khóa khác và tìm kiếm từ khóa đó, tiện ích mở rộng vẫn còn REMEMBERS từ khóa trước đó và ném 2 cửa sổ cùng một lúc. Và nếu tôi sẽ tìm kiếm một từ khóa khác có thể cung cấp cho tôi 3 cửa sổ với 2 tìm kiếm trước đó và một cửa sổ mới ...

Tôi đã cố gắng loại bỏ người nghe trong tập lệnh nền sau khi thực thi nhưng không hoạt động. Có vẻ như người nghe cũ đang ở đó và họ đang trả lời yêu cầu từ tập lệnh nội dung. Tôi có thể loại bỏ chúng bằng cách nào đó?

Tôi đã cố gắng để đưa:

chrome.extension.onConnect.removeListener(listener); 

vào cuối getClickHandler() chức năng nhưng không hoạt động.

Tôi cũng đã suy nghĩ rằng có lẽ đoạn mã này trong kịch bản nền được làm điều đó, nhưng không chắc chắn

return function(info, tab) { 

Xin vui lòng, bạn có bất cứ đề nghị?

Rất cám ơn trước!

PS. Cửa sổ bật lên này không thể đóng cửa vào lúc này và tôi biết điều đó. Nhưng bạn luôn có thể làm mới trang để có cửa sổ sạch. Vấn đề là lần thứ hai tôi sẽ nhận được 2 cửa sổ bật lên được mở trong cùng thời gian ... và cứ như đã mô tả ở trên.

tập tin Manifest:

{ 
    "name": "Easy search Accelerator", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "Easily search for anything...", 
    "icons": { 
    "16": "icon.png", 
    "48": "icon.png", 
    "128": "icon.png" 
    }, 
    "background": { 
    "scripts": ["sample.js"] 
    }, 
    "permissions": [ 
    "contextMenus", 
    "tabs", 
    "http://*/*", 
    "https://*/*" 
    ], 
    "manifest_version": 2 
} 

nền trang/script (sample.js):

chrome.contextMenus.create({ 
    "title": 'Search for "%s"', 
    "contexts":['selection'], 
    "onclick": getClickHandler() 
}); 
function getClickHandler() { 
    return function(info, tab) { 

    var url = "https://www.google.co.uk/search?q=" + info.selectionText; 

    chrome.extension.onConnect.addListener(function listener(port) { 
    console.assert(port.name == "searchQuery"); 
    port.onMessage.addListener(function(msg) { 
     if (msg.keywordRequest == "Yes") 
     port.postMessage({keyword: url}); 
    }); 
}); 

    chrome.tabs.executeScript(null, { file: "jquery-1.7.2.min.js" }, function() { 
    chrome.tabs.executeScript(null, { file: "frame.js" }); 

    }); 
    }; 
}; 

Nội dung kịch bản (frame.js)

var port = chrome.extension.connect({name: "searchQuery"}); 
port.postMessage({keywordRequest: "Yes"}); 
port.onMessage.addListener(function listen(msg) { 

    var test = msg.keyword; 
    $("body").append("<div style=\"position: fixed;top: 20px;right: 20px;z-index: 9999;\"><iframe style=\"border:1px solid #868686;-webkit-box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.5);\" src=\""+ test +"\" width=328 HEIGHT=240></iframe></div>"); 
}); 

Trả lời

9

cổng nên được sử dụng cho "kết nối" lâu dài.

chrome.extension.sendRequest (nội dung kịch bản) và chrome.extension.onRequest (nền) nên được sử dụng trong trường hợp của bạn (sendMessage/onMessage instead of *Request in Chrome 20+).

Những phương pháp này có thể được sử dụng như sau:

  • On khởi động mở rộng: Bind một sự kiện onRequest trong nền
  • kịch bản nội dung: Lửa sendRequest(request_obj, response_func)
  • Bối cảnh: Nhận được đối tượng trước đó. Làm điều gì đó và gọi response_func.

PS. Bạn có thực sự bao gồm jQuery, chỉ để nối thêm một chuỗi không? Nếu có, tôi đặc biệt khuyên bạn nên thả jQuery và sử dụng vanilla JavaScript:

var div = document.createElement('div'); 
div.style.cssText = "position: fixed;top: 20px;right: 20px;z-index: 9999;"; 
div.innerHTML = "<iframe style=\"border:1px solid #868686;-webkit-box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.5);\" src=\""+ test +"\" width=328 HEIGHT=240></iframe>"; 
document.body.appendChild(div); 
Các vấn đề liên quan