开发者问题收集

错误：参数 4 的值无效。属性“方法”：意外属性

2014-12-01
2400
javascript google-chrome google-chrome-extension

我尝试更改用户发出的请求的请求方法（发出 POST 请求），但出现此错误：

webRequest.onBeforeSendHeaders/1 事件处理程序中的错误：错误：参数 4 的值无效。属性“method”：意外属性。

我的代码如下： 

chrome.webRequest.onBeforeSendHeaders.addListener(function(data) {
    console.log(data);
    return {method: "POST"};
}, { 
    urls: ["<all_urls>"]
}, ["blocking", "requestHeaders"]);

我遗漏了什么吗？我搜索了很多，但找不到任何使用 webRequest 更改请求方法的内容。>

1个回答

扩展 API 并不立即支持更改 HTTP 方法。有几种方法可以获得所需的结果。在下面的答案中，我将仅解释如何针对 sub_frame 和 main_frame 类型的请求执行此操作，因为这可能是您想要的（对于 image 或 stylesheet 等类型，POST 确实没有意义）。

您可以修改请求器，使其通过 内容脚本 发起 POST 请求而不是 GET 请求。例如，通过定位 <form> 并将 action 设置为 "POST" 。

一种通用方法是拦截请求并重定向到您的扩展页面，然后该页面将表单提交到所需的目的地。 不要忘记将页面添加到 web_accessible_resources 。您可以通过 URL（查询字符串或引用片段）将参数传递给框架，也可以将参数存储在后台页面的字典中，并使用 扩展消息传递 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 或 &param=value ）。阅读文档以获取有关（动态生成的）表单的更多信息： <form> 和 HTMLFormElement 。

Rob W
2014-12-01