如何让 Chrome 历史记录忽略部分 URL

Question

由于我的工作涉及查看网站上的许多项目，因此我需要知道哪些项目已访问，哪些未访问，以避免重复查看。

问题是这些项目的 URL 包含一些动态变化的垃圾参数。这意味着浏览器的历史记录在识别哪些项目已被查看方面几乎没有用处。

这是一个 URL 示例：

https://example.com/showitemdetail/?item_id=e6de72e&hitkey=true&index=234&cur_page=1&pageSize=30

只有“item_id=e6de72e”部分可用于识别每个项目。其他参数都是动态垃圾。

我的问题是：如何让 Chrome 只将“example.com/showitemdetail/?item_id=e6de72e”部分标记为已访问，而忽略其余参数？

请注意，我不想修改 URL，因为这可能会提醒网站服务器怀疑我在滥用他们的数据库。我希望垃圾参数仍然存在，但浏览器历史机制忽略它们。

我知道这并不容易。我提出了一个可能的解决方案，但不知道它是否可以实施。是这样的：

步骤：1）一个扩展后台脚本，用于从我打开的每个页面中提取 item_id，然后将其存储在字符串集合中。这个字符串集合应该保存在某个文件中。

步骤：2）每次我打开一个包含各种项目列表的网页时，后台脚本都会验证每个 URL 是否包含与上述集合中的任何一个匹配的字符串。如果是这样，该 URL 将自动添加到历史记录中。然后该项目自然会显示为已访问。

逻辑听起来好吗？如果是这样，如何通过做一个简单的扩展来实现它？

当然，如果您有其他更简洁的解决方案，我会非常有兴趣学习。

Answer 1

非常感谢，fvbuendia。经过一番反复试验，我成功了。 这里就不一一贴出所有代码了，提供几个小技巧供其他用户参考：

1) 获取新打开网页的URL并提取ID，使用chrome.tabs.onUpdated.addListener和extractItemId = tab.url.replace(/..../, ....);

2) 然后使用 chrome.storage.local.set 和 chrome.storage.local.get 将 ID 保存到 storage.local。 ID 应保存到对象数组中。

• 1) 和 2) 应该写在后台脚本中。

3) 每次打开项目列表页面，后台都会调用内容脚本中的一个函数，询问页面中所有的URL。像这样：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
 if(changeInfo.status == "complete") {
  if(tab.url.indexOf("some string typical of the item list page URL") > -1) {
   chrome.tabs.executeScript(null, { code: 'getalltheurls();' });
}  }
});

4) 内容脚本中要执行的函数：

function getalltheurls() {
 var urls = [];
 var links = document.links;
  for (var i = 0; i < links.length; i++) {
   if(links[i].href.indexOf("some string typical of the item list URLs") > -1) { urls.push(links[i].href);}
  }
 chrome.runtime.sendMessage({ urls: urls });
    };

5) 后台接收 URL，然后将它们转换为 ID 数组，使用

idinlist = urls[i].replace(........)

6) 然后后台使用 chrome.storage.local.get 获取本地存储，并检查这些 ID 是否在存储的数组中。如果是这样，请将 URL 添加到历史记录。

for (var i = 0; i < urls.length; i++) {
if (storedIDs.indexOf(idinlist) > -1 ) { chrome.history.addUrl({ url: urls[i] }); }
}

Answer 2

假设到项目的链接总是有 item_id，那会工作，是的。

您需要以下步骤：

记录元素

1. content_script 将代码添加到产品页面并进行跟踪。

2. 在访问产品页面时：

   我。您可以通过检查 URL 参数来提取当前产品 ID（请参阅one of these codes）。

   二。您使用storage api 检索某个存储变量，例如：visited_products。您需要将此变量实现为 Set，因为它是处理唯一元素的最佳数据类型。

   三。使用 .has() 检查当前元素是否在列表中。如果是，那么你跳过它。如果一切都好，它应该总是新的，但检查没有坏处。如果没有，那么你使用 add() 添加新的产品 id （虽然 Set 不允许你添加重复的项目，所以你可以跳过检查直接保存添加它）。确保将其存储到 Chrome。

现在您已经注册了对产品的访问。

检查访问过的元素

1. 如果需要，您可以再次使用 content_script 插入产品页面或所有页面。

2. 您可以使用document.querySelectorAll() 获得页面的所有链接。您可以应用 CSS selector 之类的：a[href*="example.com/showitemdetail/?item_id="]，这将选择其 href 包含该 URL 部分的所有链接。

3. 然后，您使用 for 循环迭代链接。在每次迭代中，您提取 item_id。可能，最简单的方法是：/(?:item_id=)(.*?)(?:&|$)/。这会匹配以 item_id= 开头的所有字符（未捕获），直到找到字符串的 & 或结尾（以先发生者为准，且未捕获）。

4. 抓到id后，可以用.has()检查第一部分的Set，看是否在列表中。

5. 现在，关于如何处理它是否在列表中，取决于您。您可以隐藏访问过的元素。或者对它们应用不同的 CSS 类或样式，以便轻松区分它们。

我希望这能给您一个良好的开端。也许你可以试一试，如果你不能让它工作，你可以提出一个新的问题，说明你卡在哪里了。