5

Tôi sắp hoàn thành việc tiện ích Chrome của mình chạy hoàn hảo, nhưng hiện tại tôi đang gặp sự cố mới nhất.Tiện ích mở rộng của Chrome - Tập lệnh nội dung chồng chất nhiều lần từ liên kết/điều hướng AJAX

vấn đề này dường như có liên quan đến kịch bản nội dung được tiêm nhiều lần trên các trang web như Facebook, nơi mà toàn bộ trang không được nạp lại khi nhấp chuột vào một liên kết, vv ...

Tôi nghĩ vấn đề có liên quan đến trang web phụ thuộc rất nhiều vào AJAX.

Nếu tôi làm mới toàn bộ trang hoặc tải trang lần đầu tiên, thì không có vấn đề gì. Tiện ích của tôi chạy và tập lệnh nội dung được tiêm đúng cách.

Tuy nhiên, nếu tôi tải trang lần đầu, sau đó nhấp vào liên kết trên trang web, "phần nội dung" của Facebook sẽ tải bất kỳ liên kết nào bạn đã nhấp vào, trong khi thanh điều hướng màu lam nổi ở trên cùng ' t làm mới hoặc thay đổi.

I.E. toàn bộ trang không tải lại. Vì cả phần "nội dung" của trang web và thanh điều hướng đều nằm trong cùng một khung, tập lệnh nội dung chỉ tiếp tục được tiêm vào một thời điểm khác cho mỗi liên kết mà bạn nhấp vào.

Vì vậy, cuối cùng tôi thấy trong nhật ký bảng điều khiển của mình rằng nó đang chạy 2X, 3X, 4X, 5X vv .. Khi tôi nhấp vào xung quanh nhiều liên kết hơn, con số tăng thêm 1 lần.

Vì vậy, câu hỏi của tôi là thế này:

Có một cách đơn giản để kiểm tra xem kịch bản nội dung đã có mặt/hoạt động trước khi tiêm nó một lần nữa? Hoặc những gì khác có thể được sử dụng như một công việc xung quanh cho một tình huống như thế này?

Trả lời

1

Tôi đã dự đoán một vấn đề tương tự khi viết tập lệnh nội dung cho tiện ích mở rộng của mình để tôi thêm một thuộc tính duy nhất vào phần tử <body> của mỗi trang có tên và phiên bản tiện ích mở rộng.

Điều đầu tiên mà tập lệnh nội dung thực hiện là kiểm tra xem thuộc tính này đã có tập lệnh chưa và sẽ dừng lại hay không. Nếu không, nó sẽ thêm thuộc tính này (với giá trị là true) và tiếp tục với mục đích của nó.

Nếu bạn muốn xem solution;

Khía cạnh hơi phức tạp hơn của kỹ thuật này là tìm nạp phiên bản bằng cách sử dụng message passing và phân tích cú pháp tệp kê khai (truy lục trong yêu cầu AJAX) vào đối tượng JSON.

Để xem chính xác cách tôi đạt được giao diện này tại các chức năng initonRequestHelperhere;

Tất nhiên, bạn chỉ có thể mã hóa phiên bản hoặc bỏ qua nó hoàn toàn. Miễn là tên thuộc tính là duy nhất.

+0

Cám ơn các liên kết và mẫu mã! – delta9

+0

Tôi tin rằng liên kết cập nhật cho giải pháp của anh ấy bây giờ là https://github.com/neocotic/template/blob/master/chrome/bin/lib/content.js –

+0

Cảm ơn @SarahVessels, tôi đã cập nhật tất cả các liên kết có liên quan. – Alasdair

1

Trong khung chính, bạn có thể thêm window.doneInjecting = true; hoặc tương tự không? (hoặc có thể thêm phần tử ẩn vào trang - Tôi không chắc chắn liệu khung con có thể truy cập vào biến JavaScript của cha mẹ của chúng) không?

Nhưng cơ bản là đặt cờ đơn giản để mỗi lần tập lệnh nội dung của bạn được tiêm, hãy kiểm tra xem cờ tồn tại và chỉ tiếp tục nếu nó không?

1

Bật lửa đã được cập nhật mỗi khi trạng thái của tab thay đổi.chỉ tải tập lệnh nội dung của bạn tại changeInfo.status == "complete"

background.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { 
chrome.tabs.getSelected(null, function(tab) { 
    // Do some stuff 
    if (changeInfo.status == "complete") 
    { 
     // load your scripts here 
     chrome.tabs.executeScript(tabId, {file: "jquery.js"}); 
     chrome.tabs.executeScript(tabId, {file: "jquery.highlight.js"}); 
    } 
}); 
}); 
Các vấn đề liên quan