一、描述

使用 chrome.history API可以操作浏览器访问过的页面记录。

可以在浏览器的历史记录中添加,删除和查询URL

权限申请:

 "permissions": ["history"],

history API 通过 transition type 来描述浏览器如何在特定的访问中跳转到某个 URL,比如,如果用户通过单击另一页面上的链接来访问的页面,则 transition API 是 link

下面是对每个 transition type 的描述:

  • link: 通过点击一个链接跳转到页面
  • typed:用户在浏览器地址栏中输入了一个地址,打开页面
  • auto_bookmark: 通过菜单项进入页面(比如通过 UI 中的一个菜单)
  • auto_subframe:子框架导航。这是在非顶级框架中自动加载的任何内容。例如,如果一个页面包含多个广告的 frame,则这些广告网址具有此 transition 类型。用户可能甚至没有意识到这些页面中的内容是一个单独的框架,因此可能不关心URL
  • manual_subframe:对于用户明确请求的子 frame 导航,并在后/前列表中生成新的导航条目。显式请求的 frame 可能比自动加载的 frame 更重要,因为用户可能关心所请求的 frame 加载的事实。
  • generated:用户通过在地址栏中键入并选择一个看起来不像 URL 的条目来到达页面。例如,匹配可能包含Google搜索结果页的网址,但用户可能会将其显示为 "搜索Google for ...",这些与键入的 URL 并不完全相同,因为用户没有键入或查看目标URL。
  • auto_toplevel: 页面在命令行中指定或是浏览器的起始页面。
  • form_submit:用户在表单中填写值并提交。注意,在某些情况下,比如表单使用 javascript 提交内容时 - 提交表单不会有这个 transition type
  • reload:用户通过单击重新加载按钮或在地址栏中按Enter键重新加载页面。会话还原和重新打开关闭选项卡也使用这个 transition type
  • keyword:该 URL 是从默认搜索提供程序以外的可替换关键字生成的。
  • keyword_generated: 对应于为关键字生成的访问,和 keyword 差不多

二、属性说明

1、TransitionType

说明在上面,可取值如下:

"link", "typed", "auto_bookmark", "auto_subframe", "manual_subframe", "generated", "auto_toplevel", "form_submit", "reload", "keyword", or "keyword_generated"

2、HistoryItem

封装浏览器历史查询的结果的对象

属性描述
iditem 唯一 id
url用户跳转的 url
title页面最近一次加载的标题
lastVisitTime上次加载此页面时的时间戳
visitCount用户到页面的次数
typedCount用户通过输入 URL 地址到这个页面的次数,见上面的 typed

3、VisitItem

封装的访问 URL 的对象

属性描述
idhistory 的 id
visitId访问的 id
visitTime访问时间,时间戳
referringVisitIdreferrer 的 visit id
transitiontransition type

三、方法使用

1、chrome.history.search(object query, function callback)

在历史记录中搜索与查询匹配的每个页面的上次访问记录

注意 query 参数,text 字段是必不可少的,但是 text 可以留空,相当于一个 keyword

    const query = {
        text: ''
    };
    chrome.history.search(query, (res) => {
        console.log(res);
    })

结果示例:

1.jpg

下面代码中我取出前三条然后绘制在 chrome 扩展页面中

const query = {
    text: ''
};
chrome.history.search(query, (res) => {
    const arr = res.slice(0,3).map((item) => {
        return item
    });
    let htm = '';
    arr.forEach(element => {
        htm += `<p><a href="${element.url}">${element.title}<a/></p>`;
    });
    document.querySelector('#scroll').innerHTML = htm;
})

结果示例:

3.jpg

2、chrome.history.getVisits(object details, function callback)

检索某个 URL 的访问信息

const details = {
    url: 'http://ptbird.cn'
};
chrome.history.getVisits(details, (res) => {
    const arr = res.slice(0,3).map((item) => {
        return item
    });
    let htm = '';
    arr.forEach(element => {
        htm += `<p>transition: ${element.transition}</p>`;
    });
    document.querySelector('#scroll').innerHTML = htm;
})

结果示例:

4.jpg

5.jpg

3、chrome.history.addUrl(object details, function callback)

使用 transition type link 向历史记录中添加一条记录

const details = {
    url: 'http://ptbird.cn/chrome_extensions_aaa_2-s_as'
};
chrome.history.addUrl(details, (res) => {
    console.log(res);
})

结果示例:

6.jpg

4、chrome.history.deleteUrl(object details, function callback)

从历史记录中删除所有出现的给定URL

const details = {
    url: 'http://ptbird.cn/chrome_extensions_aaa_2-s_as'
};
chrome.history.deleteUrl(details, (res) => {
    console.log(res);
})

结果示例:

可以发现,我删除了历史记录后,再去查找就找不到了

7.jpg

5、chrome.history.deleteRange(object range, function callback)

从历史记录中删除指定日期范围内的所有项目。除非所有访问都在此范围内,否则页面不会从历史记录中删除。

const startTime = Date.now() - 50000;
const endTime = Date.now();
const query = {
    startTime,
    endTime
};
chrome.history.deleteRange(query, (res) => {
    console.log(res);
})

6、chrome.history.deleteAll(function callback)

删除历史记录中的所有项目。

chrome.history.deleteAll((res) => {
       console.log(res);
    })

结果示例:

8.jpg

四、完整代码示例

仓库地址:https://github.com/postbird/chrome-extensions-demo/tree/master/demo15-history