一、描述

使用 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

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

3、VisitItem

封装的访问 URL 的对象

三、方法使用

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

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

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

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

结果示例：

下面代码中我取出前三条然后绘制在 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;
})

结果示例：

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;
})

结果示例：

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);
})

结果示例：

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);
})

结果示例：

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

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);
    })

结果示例：

四、完整代码示例

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

• 文章已经结束啦