Chrome 확장 프로그램 : 특정 웹 요청에 대한 응답으로 맞춤 HTML 페이지로 리디렉션하는 방법은 무엇인가요?

Question

모든 웹 트래픽을 특정 도메인으로 리디렉션하는 확장 프로그램을 작성하고 싶습니다. "wikipedia.org, 페이지의 중간에"Whoa, bub. Wikipedia에 가려고합니다. . 이거 확실하니?" 이어서 예 및 아니요 버튼이옵니다.

특정 URL 요청에 응답하고 도메인에서 "wikipedia.org"가있는 페이지의 조건을 충족 할 때 원하는 페이지를 맞춤 URL로 바꾸려면 어떻게해야합니까?

Answer 1

당신은 예 및 없는 버튼이 사용 webRequest 기능, 배경 페이지 및 사용자 정의 페이지를 할 수 있습니다. 예를 들어, 배경 페이지에서 비슷한 쓰기 :

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']); 

위키 피 디아가 도메인에 언급되고있는 경우이 예제는 엄격하게 확인하지 않습니다,하지만 난 명확성을 위해 이런 짓을. 내 실제 코드에서는 전달 된 URL을 파싱하고 모든 부분에 대한 속성을 제공하여 선택적으로 확인할 수있는 특수 클래스 'URL'이 사용됩니다.

confirmation.html에는 사용자가 "예"라고 대답 한 경우 2 개의 버튼을 배치하고 적절한 코드에 바인딩합니다 (예 : 요청 된 사이트로 리디렉션).

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

는 매니페스트의 permissions 절에서 "WebRequest 클래스"와 "webRequestBlocking"를 언급하는 것을 잊지 마십시오.

Answer 2

사용자가 방문하는 각 페이지에 자바 스크립트 코드를 삽입하는 콘텐츠 스크립트를 만들 수 있습니다. 콘텐츠 스크립트에서 js가 잘못된 URL에 대한 현재 URL을 확인하고 적절하게 리디렉션하도록 할 수 있습니다.

페이지가로드 된 후 콘텐츠 스크립트가로드되어 사용자가 찾고 있던 페이지를보고 방문 페이지로 리디렉션되는 짧은 기간이있을 수 있습니다. 여기에 콘텐츠 스크립트 문서를 체크 아웃 : 당신이

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

에 비슷한 배열을해야 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"] 
    } 
    ], 
    ... 
} 

은 "일치"와 "JS는"당신의 자바 스크립트 파일의 이름이됩니다 당신 주사를 페이지에 쓰는 데 사용하고 싶습니다. 같은

뭔가 : 물론

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

, 즉 사용자가 대상 웹 사이트의 디렉토리에 도착하려고하는 경우, 예를 들어, 모든 경우에 작동하지 않습니다 JS. 여기에 정의 된대로 당신은 아마 몇 가지 정규식 검사 또는 프로토콜 및 호스트 같은 몇 가지 다른 기능을 수행해야합니다 http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/