확장 API를 통해 HTTP 메소드를 즉시 변경할 수 없습니다. 원하는 결과를 얻는 방법에는 여러 가지가 있습니다. 아래의 답변에서 유형 sub_frame
및 main_frame
의 요청에 대해이 작업을 수행하는 방법을 설명합니다. 그 이유는 사용자가 원했던 것일뿐입니다 (image
또는 stylesheet
과 같은 유형의 POST는 실제로 이해가되지 않습니다).
content script을 통해 GET 요청 대신 POST 요청을 시작하도록 요청자를 수정할 수 있습니다. 예 : <form>
을 찾고 action
을 "POST"
으로 설정하십시오.
일반적으로 작동하는 일반적인 방법은 요청을 가로 채고 내선 페이지로 리디렉션하여 원하는 대상으로 양식을 제출하는 것입니다. web_accessible_resources
에 페이지를 추가하는 것을 잊지 마십시오. URL (쿼리 문자열 또는 참조 단편)을 사용하여 프레임에 매개 변수를 전달하거나 사전에 매개 변수를 저장하고 배경 페이지에 extension messaging API을 사용하여 통신 할 수 있습니다.
예 (URL을 전달하는 쿼리 문자열을 사용하여) :
chrome.webRequest.onBeforeRequest.addListener(function(details) {
var url = chrome.runtime.getURL('redirector.html') +
'?' + encodeURIComponent(details.url)
return {
redirectUrl: url
};
}, {
types: ['main_frame', 'sub_frame'],
urls: ['*://example.com/*']
}, ['blocking']);
redirector.html
이 (
web_accessible_resources
이 페이지를 추가!) : 매개 변수의 유효성 검사가 남아 :
<form method="POST" id="form"></form>
<script src="redirector.js"></script>
redirector.js
는 노트 (포함 할 수 독자에게 연습으로) :
var form = document.forms['form'];
// URL is passed via the parameters
// "chrome-extension://[extensionid]/redirector.html?http%3A%2F%2Fexample.com%2F
// ^
// becomes http://example.com
form.action = decodeURIComponent(location.search.slice(1));
// Example: Append extra form data
var input = document.createElement('input');
input.type = 'text'; // Default
input.value = 'extra data';
form.appendChild(input);
form.submit();
이것은 매우 간단한 예입니다. 페이지에 더 많은 데이터를 전달하려면 매개 변수의 적절한 직렬화 (예 : JSON 또는 ¶m=value
)를 선택하십시오. 동적으로 생성 된 양식에 대한 자세한 내용은 설명서 (<form>
및 HTMLFormElement
)를 참조하십시오.
설명해 주셔서 감사합니다. 정말 도움이되었지만 사용자가 페이지로 이동할 때 요청을 변경하기를 원합니다. 예를 들어, 새 탭에'www.google.com'을 입력하면 GET 요청을하지만, POST 요청이되도록하고 싶습니다. 그게 가능하니? –
@ PabloMatíasGomez 예, 가능합니다. 추가 양식 데이터를 추가하는 예를 사용하여 답변을 업데이트했습니다. –
그게 좋습니다! 이 작업을 수행 할 수 있지만 문제가 있습니다. 양식을 제출하면 onBeforeRequest가 새 요청을 실행하기 때문에 무한 루프가 발생합니다. 요청을 내 양식에서 만들 때 피할 수 있도록 플래그를 추가 할 수 있습니까? ? –