[17] chrome 扩展开发 - chrome.history 控制浏览器历史
一、描述
使用 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
封装浏览器历史查询的结果的对象
属性 | 描述 |
---|---|
id | item 唯一 id |
url | 用户跳转的 url |
title | 页面最近一次加载的标题 |
lastVisitTime | 上次加载此页面时的时间戳 |
visitCount | 用户到页面的次数 |
typedCount | 用户通过输入 URL 地址到这个页面的次数,见上面的 typed |
3、VisitItem
封装的访问 URL 的对象
属性 | 描述 |
---|---|
id | history 的 id |
visitId | 访问的 id |
visitTime | 访问时间,时间戳 |
referringVisitId | referrer 的 visit id |
transition | transition type |
三、方法使用
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
文章已经结束啦
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/chrome-extensions-history.html
转载请注明文章原始出处 !
扫描二维码,在手机阅读!