chrome 扩展中的 POST 请求数据和地址栏更改

Question

I am trying to make a chrome extension that will capture GET and POST request and parameters and evaluate the XSS vulnerability by calling an api with the url and parameters. At first I tried chrome.webRequest.onBeforeRequest.addListener event listener and it captures a lot of GET requests for each component of the site when I am just hitting the url in address bar. This was too much load for my api server. So I decided to capture the address bar content since the GET parameters are visible there as well. For capturing POST request I am still using chrome.webRequest.onBeforeRequest.addListener . Now what I want to do is the following: 1. By default my extension should check only address bar content 2. When a button clicked in the extension popup html then only I will capture POST requests What will be best way to do this? Also, Is there any way to filter the GET requests capture so that it will only capture the first url request but not the subsequent components requests? I felt, using the chrome.webRequest.onBeforeRequest.addListener was super effective if not for the unnecessary requests captured.

Answer 1

You can filter the listener by type to limit it to main document and frames:

chrome.webRequest.onBeforeRequest.addListener(details => {
  // do something with details.url
}, {
  types: ['main_frame', 'sub_frame'],
  urls: ['<all_urls>'],
});

In your popup you can show a checkbox to toggle the feature.
The click listener of the checkbox will save the state to the storage:

document.querySelector('input[type=checkbox]').onclick = e => {
  chrome.storage.local.set({watchPost: e.target.checked});
};

The background script will listen to changes in storage and toggle the listener:

chrome.storage.local.get('watchPost', _ => {
  toggle(_.watchPost);
});

chrome.storage.onChanged.addListener(({watchPost}) => {
  if (watchPost) {
    toggle(watchPost.newValue);
  }
});

function toggle(state) {
  const event = chrome.webRequest.onBeforeRequest;
  if (state) {
    event.addListener(onPost, {urls: ['<all_urls>']});
  } else {
    event.removeListener(onPost);
  }
}

function onPost(details) {
  if (details.method === 'POST') {
    // ..........
  }
}

You can also limit the listener to just one tab, see the documentation . Note that re-registering the same function reference won't work: you'll need to manually call removeListener first, then addListener with the new filter.