Tiện ích mở rộng của Chrome: Cách chuyển hướng đến trang HTML tùy chỉnh theo yêu cầu web cụ thể?

Question

Tôi muốn viết một tiện ích mở rộng chuyển hướng tất cả lưu lượng truy cập web đến một miền cụ thể, giả sử wikipedia.org, đến trang trung gian có nội dung như "Whoa, bub. Bạn sắp truy cập Wikipedia . Bạn có chắc về điều này?" theo sau bởi Có và Không nút.

Làm cách nào để phản hồi yêu cầu URL cụ thể và thay thế trang mong muốn bằng một tùy chỉnh khi đáp ứng điều kiện là trang có "wikipedia.org" trong miền?

Answer 1

Bạn có thể làm điều này bằng webRequest tính năng, trang nền và trang tùy chỉnh với có và không nút. Ví dụ: viết một cái gì đó tương tự trong trang nền:

var URLStorage; 

function interceptRequest(request) 
{ 
    if(request && request.url) 
    { 
    if(request.type == "main_frame") // new page/site is loading in main window 
    { 
     if(request.url.indexOf("wikipedia.org") > -1) 
     { 
     URLStorage = request.url; 
     return {redirectUrl: chrome.extension.getURL("confirmation.html")}; 
     } 
    } 
    } 
} 

chrome.webRequest.onBeforeRequest.addListener(interceptRequest, {urls: ["*://*/*"]}, ['blocking']); 

Ví dụ này không kiểm tra nghiêm ngặt nếu wikipedia được đề cập trong miền, nhưng tôi đã làm điều này để làm rõ. Trong mã thực sự của tôi, một lớp đặc biệt 'URL' được sử dụng để phân tích cú pháp thông qua url và cung cấp các thuộc tính cho mọi phần của nó, để chúng có thể được kiểm tra có chọn lọc.

Trong confirmation.html chỉ cần đặt 2 nút và liên kết chúng với mã thích hợp, ví dụ: chuyển hướng đến trang web được yêu cầu, nếu người dùng trả lời "có".

$('#okbutton').click(function() 
{ 
    document.location.href = chrome.extension.getBackgroundPage().URLStorage; 
}); 

Đừng quên đề cập đến "WebRequest" và "webRequestBlocking" trong permissions phần của biểu hiện của bạn.

Answer 2

Bạn có thể tạo tập lệnh nội dung để chèn mã javascript vào mỗi trang mà người dùng truy cập. Trong kịch bản nội dung của bạn, bạn có thể có các js kiểm tra url hiện tại chống lại url không hợp lệ và chuyển hướng chúng cho phù hợp.

Tôi nghĩ rằng tập lệnh nội dung tải sau khi trang đã tải để có thể có một khoảng thời gian ngắn mà người dùng nhìn thấy trang họ đang tìm kiếm và sau đó được chuyển hướng đến trang đích của bạn. Kiểm tra các tài liệu nội dung kịch bản ở đây: http://developer.chrome.com/extensions/content_scripts.html

{ 
    "name": "My extension", 
    ... 
    "content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "css": ["mystyles.css"], 
     "js": ["jquery.js", "myscript.js"] 
    } 
    ], 
    ... 
} 

"phù hợp", bạn nên làm cho các mảng của một cái gì đó tương tự như

"matches": ["http://www.*.com/*", "http://*.com/*, "https://www.*.com/*", "https://*.*.com/*] 

và "js" sẽ là tên của tập tin javascript của bạn mà bạn muốn sử dụng để viết tiêm vào trang.

cái gì đó như:

if(window.location == "http://wikipedia.com"){ 
    window.location.href = "http://mysplashpage.com"; 
} 

Tất nhiên, đó js sẽ không làm việc trong tất cả các trường hợp, ví dụ, nếu người dùng đang cố gắng để có được vào một thư mục của trang web mục tiêu. Bạn có thể sẽ cần phải một số kiểm tra regex hoặc một số chức năng khác như giao thức và máy chủ như đã định nghĩa ở đây: http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/