如何優化Hackbar Chrome擴展的搜索表現

一、了解Hackbar Chrome擴展

Hackbar是一款非常受歡迎的瀏覽器擴展程序，它可以幫助開發者模擬網路攻擊測試等。Hackbar主要用於測試和調試應用程序的安全性，比如SQL注入漏洞等。對於開發者來說，Hackbar是一個非常好用的工具。在使用Hackbar時有時候我們需要在原始數據和編碼數據之間進行切換，同時我們還需要對一些特殊字元進行編碼，這時候就需要使用Hackbar的搜索功能來進行優化。

二、搜索功能的不足之處

雖然Hackbar的搜索功能功能很強大，但是仍然存在一些不足之處。比如說在Hackbar中我們使用了Ctrl+F來進行搜索，但是這個搜索功能只能夠搜索到當前的url，而不能夠搜索具體的http請求響應。同時，如果我們想要對於特殊字元進行搜索時，由於編碼的不同可能會導致搜索失敗的情況發生。因此對於Hackbar的搜索功能進行優化是非常有必要的。

三、使用關鍵詞篩選功能

對於Hackbar的搜索功能，我們可以結合使用一些關鍵詞篩選功能，從而進行優化。這些關鍵詞可以包括請求的方法、響應的狀態碼、請求的頭部信息等。例如，我們可以通過輸入「GET」或「POST」來進行響應方法的篩選，通過輸入「200」或「403」來進行狀態碼的篩選。這樣一來，我們就可以快速地篩選出所需要的HTTP請求響應信息。

function filterByKeyword(keyword) {
  const matchKeyword = (text) => text.toLowerCase().includes(keyword.toLowerCase());
  const requests = document.getElementsByClassName("request");

  for (let req of requests) {
    const method = req.querySelector(".method").textContent.trim();
    const statusCode = req.querySelector(".status-code").textContent.trim();
    const headers = req.querySelector(".headers").textContent.trim();
    const requestData = req.querySelector(".request-data").textContent.trim();
    const responseData = req.querySelector(".response-data").textContent.trim();

    if (matchKeyword(method) || matchKeyword(statusCode) || matchKeyword(headers) || matchKeyword(requestData) || matchKeyword(responseData)) {
      req.style.display = "";
    } else {
      req.style.display = "none";
    }
  }
}

四、使用正則表達式進行搜索

除了使用關鍵詞進行篩選以外，我們還可以對於搜索的內容進行正則匹配。這種方法可以更為精確地進行搜索，並且支持通配符、模糊搜索、多個關鍵詞等功能。例如，我們可以使用正則表達式「/.*\bexample\.com\b.*/」來搜索包含「example.com」的請求數據。

function filterByRegexp(regexp) {
  const requests = document.getElementsByClassName("request");

  for (let req of requests) {
    const requestData = req.querySelector(".request-data").textContent.trim();
    const responseData = req.querySelector(".response-data").textContent.trim();

    if (requestData.match(regexp) || responseData.match(regexp)) {
      req.style.display = "";
    } else {
      req.style.display = "none";
    }
  }
}

五、使用本地存儲進行搜索歷史記錄

考慮到開發者有時需要重複使用相同的關鍵詞進行搜索，我們可以將搜索記錄進行本地存儲，並在下一次進入頁面時進行恢復。這樣一來，我們就可以快速找到之前匹配的結果。

function storeSearchHistory(keyword) {
  const history = localStorage.getItem("searchHistory");
  const historyArr = history ? JSON.parse(history) : [];
  if (!historyArr.includes(keyword)) {
    historyArr.push(keyword);
  }
  localStorage.setItem("searchHistory", JSON.stringify(historyArr));
}

function restoreSearchHistory() {
  const history = localStorage.getItem("searchHistory");
  const historyArr = history ? JSON.parse(history) : [];
  const searchBox = document.getElementById("search-box");

  historyArr.forEach((keyword) => {
    const option = document.createElement("option");
    option.value = keyword;
    searchBox.appendChild(option);
  });
}

六、結合多種方法進行優化

為了讓搜索功能能夠更好地進行優化，我們可以結合多種方法進行使用。例如，在篩選關鍵詞和正則表達式時，我們可以將關鍵詞轉換為正則表達式，從而支持更多的搜索模式。在顯示匹配結果時，我們可以將匹配部分進行高亮，從而使用戶更快地找到匹配部分。

function highlightMatches(keyword) {
  const requests = document.getElementsByClassName("request");

  for (let req of requests) {
    const requestData = req.querySelector(".request-data");
    const responseData = req.querySelector(".response-data");

    requestData.innerHTML = requestData.innerHTML.replace(new RegExp(keyword, "gi"), "$&");
    responseData.innerHTML = responseData.innerHTML.replace(new RegExp(keyword, "gi"), "$&");
  }
}

function search(keyword) {
  highlightMatches(keyword);
  filterByRegexp(new RegExp(keyword, "i"));
  storeSearchHistory(keyword);
}

function init() {
  const searchBox = document.getElementById("search-box");

  searchBox.addEventListener("change", (e) => {
    search(e.target.value);
  });

  restoreSearchHistory();
}

init();