Làm cách nào để chèn tập lệnh nội dung trong tiện ích mở rộng của google chrome khi trang được thay đổi qua history.pushState?

Question

Tôi đang tạo một tiện ích mở rộng nhỏ của google chrome cho trang web và tôi muốn thay đổi một số html trên các trang cụ thể.

Vấn đề là trang web tải nội dung của anh qua ajax và sử dụng API history.pushState nặng. Vì vậy, tôi đã thêm điều này để bày tỏ:

"content_scripts": [ 
    { 
    "matches": ["http://vk.com/friends"], 
    "js": ["js/lib/jquery.min.js", "js/friends.js"],  
    }, 
] 

Tất cả mọi thứ hoạt động tốt khi tôi mở trang lần đầu tiên hoặc tải lại nó. Nhưng khi tôi đang điều hướng giữa các trang của trang web, chrome không chèn tập lệnh của tôi vào trang "/ bạn bè". Tôi nghĩ điều này xảy ra vì URL thực sự không thay đổi. Họ sử dụng history.pushState() và như vậy, chrome không thể chèn/chạy lại tập lệnh của tôi một lần nữa.

Có giải pháp nào cho vấn đề này không?

Answer 1

Bạn có thể thêm sự kiện window.onpopstate trong tập lệnh nội dung và lắng nghe sự kiện đó khi sự kiện kích hoạt bạn có thể chạy lại tập lệnh nội dung một lần nữa.

Tài liệu tham khảo

một)extension.sendMessage()

b)extension.onMessage().addListener

c)tabs.executeScript()

d)history.pushState()

e)window.onpopstate

mẫu trình diễn:

manifest.json

Đảm bảo nội dung kịch bản tiêm URL và các tab tất cả của API có đủ quyền trong file manifest

{ 
    "name": "History Push state Demo", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    "description": "This demonstrates how push state works for chrome extension", 
    "background":{ 
     "scripts":["background.js"] 
    }, 
    "content_scripts": [{ 
     "matches": ["http://www.google.co.in/"], 
     "js": ["content_scripts.js"] 
    }], 
    "permissions": ["tabs","http://www.google.co.in/"] 
} 

content_scripts.js

Theo dõi sự kiện onpopstate và gửi yêu cầu đến trang nền cho chạy lại kịch bản

window.onpopstate = function (event) { 
    //Track for event changes here and 
    //send an intimation to background page to inject code again 
    chrome.extension.sendMessage("Rerun script"); 
}; 

//Change History state to Images Page 
history.pushState({ 
    page: 1 
}, "title 1", "imghp?hl=en&tab=wi"); 

background.js

Theo dõi cho yêu cầu từ nội dung scrip t và thực hiện kịch bản đến trang hiện tại

//Look for Intimation from Content Script for rerun of Injection 
chrome.extension.onMessage.addListener(function (message, sender, callback) { 
    // Look for Exact message 
    if (message == "Rerun script") { 
     //Inject script again to the current active tab 
     chrome.tabs.executeScript({ 
      file: "rerunInjection.js" 
     }, function() { 
      console.log("Injection is Completed"); 
     }); 
    } 
}); 

rerunInjection.js

Một số mã Trivial

console.log("Injected again"); 

Output

Hãy cho tôi biết nếu bạn cần thêm thông tin.

Answer 2

Tôi có thể làm việc này. Từ Chrome Extension docs for webNavigation:

Bạn cần thiết lập quyền cho webNavigation trong manifest.json:

"permissions": [ 
    "webNavigation" 
    ], 

Sau đó, trong background.js:

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) { 
     console.log('Page uses History API and we heard a pushSate/replaceState.'); 
     // do your thing 
    });