Chrome request filtering extension implementation

primers

Then Chrome extension: get started, and then start to realize their own idea at the beginning: network request filtering. Simply put, it is to listen to all the requests of a website and show the requests you want in the extension. The extension name is Capture Request.

• Origin
• My GitHub

Specification of requirements

The above idea is a little vague. To achieve this, combined with the examples in the documentation, the following are done:

1. Extensions should have corresponding ICONS and prompts.
2. Click the toolbar extension icon to open a new Tab page that displays information about the request.
3. The extension listens for web site requests in active tabs and can be configured to filter the listening URL.
4. Supports filtering and exporting of listened requests based on URL.

Some features are not easy to find directly in the documentation, in this case, it is recommended to find an open source extension in the Chrome store, according to the effect of the use of some oF the API, and then find the corresponding documentation. Some implementations of FeHelper are referenced here. Note that FeHelper is developed based on Manifest_version 2. The following development extension is based on The recommended version 3. For the complete code, see Capture Request.

implementation

Icon configuration

As described in getting started, ICONS can appear in toolbars, extension management pages, permissions warnings, and favicons, configured in manifest.json in the following related fields:

{
  "name": "Capture Request"."description": "Capture Request"."version": "1.0"."manifest_version": 3."action": {
    "default_icon": {
      "16": "xxx.png"."32": "xxx.png",}},"icons": {"16": "xxx.png"."32": "xxx.png",}}Copy the code

A detailed description of what size ICONS should be used where is provided here. PNG images are recommended for documentation. Following this, you can find ICONS that are too small to look obvious, or you can use a larger size, Chrome will compress the image to the desired size.

Click on the extension to open the new Tab page

{...+ "permissions": [
+ "scripting",
+ "tabs",
+],
+ "background": {
+ "service_worker": "background.js"
+},. }Copy the code

chrome.action.onClicked.addListener(() = > {
  chrome.tabs.create({
    url: 'page.html'
  });
});
Copy the code

Listen for requests and configurations

The main points to consider in order to display a request on the active Tab web site to an open extension page are:

1. How do I find active Tabs?
2. How do I intercept web requests?
3. How are intercepted requests synchronized to extended custom pages?

With tabs open, you can see that the related API is also in Chrome. Tabs, and you can see that the query method is provided to solve the first problem.

The method of interception request is searched on the Internet and found the document Chrome. webRequest, which introduces the life cycle and triggered events of the request in the extension in detail. After comparison and consideration, I finally decide to listen to the onResponseStarted event, and the permission required is webRequest. That solves the second problem.

Similarly, you can cache the request to Chrome. storage and then retrieve it from the extension page. The required permission is storage. For data synchronization, you can listen for the chrome.storage.onChanged event to get the latest data changes. This solves problem number three.

During debugging, an error message is displayed when the chrome.storage.sync request reaches a certain amount. This method is not suitable for scenarios where a large amount of requested data is stored. Chrome. Storage.

The configuration of the filter request can be handled directly as in the introduction configuration, but it is important to note that whenever the configuration is updated, the onResponseStarted event needs to be listened again.

The main approach is to add webRequest and storage to the manifest.json permissions field.

Add the main code to background-js:

// Store request data defaults
let requestList = []
// Default value for url filtering
let urlPattern = '<all_urls>'

// The handler that listens for the request event
const handlerResponseStarted = (details) = > {
  // Find the active Tab
  chrome.tabs.query({ active: true }, (tab) = > {
    requestList.unshift(details)
    chrome.storage.local.set({ requestList });
    return { cancel: true}; })}// Listen for storage change events
chrome.storage.onChanged.addListener((changeObj, areaName) = > {
  const { urlPattern } = changeObj
  // urlPattern is changed in page.html
  if(areaName ! = ='local'| |! urlPattern) {console.warn('urlPattern does not change')
    return;
  }
  const { newValue } = urlPattern
  const hasAddListen = chrome.webRequest.onResponseStarted.hasListener(handlerResponseStarted)
  if (hasAddListen) {
    chrome.webRequest.onResponseStarted.removeListener(handlerResponseStarted);
  }
  chrome.webRequest.onResponseStarted.addListener(
    handlerResponseStarted,
    { urls: [newValue] },
  );
})
Copy the code

Add the script file pages.js for the extended page page.html and add the key logic:

  chrome.storage.onChanged.addListener((changeObj, areaName) = > {
    const { requestList } = changeObj
    // Check if the requestList has changed since background.js is also monitored
    if(areaName ! = ='local'| |! requestList) {console.warn('requestList does not change')
      return;
    }
    const { newValue } = requestList || { newValue: []}const newItem = newValue[0] | |null
    if(! newItem) {console.warn('no data')
      return;
    }
    // Display the logic of the data
    showData(newItem)
  })
Copy the code

Export data

  let localFilterList = []; // Page filtered data
  // Click the export button
  const exportEle = document.querySelector('#operate-export')
  exportEle.addEventListener('click'.() = > {
    if(! localFilterList.length) { alert('No valid data')
      return;
    }
    const txt = JSON.stringify(localFilterList)
    let blob = new Blob([txt], { type: 'application/octet-stream' });
    // The file name gets the time in seconds, which can be defined as you like
    let dt = (new Date()).getSeconds();
    chrome.downloads.download({
      url: URL.createObjectURL(blob),
      saveAs: true.conflictAction: 'overwrite'.filename: dt + '.json'
    });
  })
Copy the code

The resources

• Chrome extension: Getting started
• Chrome Extensions: What are extensions?
• FeHelper Github