webNavigation如何使用

本人github

chrome.webNavigation API 提供了一组用于观察和处理浏览器导航事件的方法和事件。这个 API 允许你在页面加载的不同阶段执行代码，例如在页面开始加载、完成加载或出现错误时。

权限

首先，你需要在你的 manifest.json 文件中添加 webNavigation 和 host permissions 权限：

{
  "permissions": [
    "webNavigation",
    "<all_urls>"
  ]
}

事件监听

然后，在你的背景脚本（background.js 或 background.ts）中，你可以使用 chrome.webNavigation API 的各种事件。

onBeforeNavigate

在导航到指定的页面之前触发。

chrome.webNavigation.onBeforeNavigate.addListener(function(details) {
  console.log("Navigating to:", details.url);
});

onCompleted

在页面导航完成时触发。

chrome.webNavigation.onCompleted.addListener(function(details) {
  console.log("Navigation completed to:", details.url);
});

onErrorOccurred

在导航过程中出现错误时触发。

chrome.webNavigation.onErrorOccurred.addListener(function(details) {
  console.log("Error occurred while navigating to:", details.url, "Error:", details.error);
});

过滤

你还可以使用 url 过滤器来限制事件只在特定网站上触发。

const filter = {
  url: [
    { hostSuffix: 'example.com' }
  ]
};

chrome.webNavigation.onCompleted.addListener(function(details) {
  console.log("Navigation completed to:", details.url);
}, filter);

这样，onCompleted 事件只会在访问 example.com（或其子域）时触发。

获取标签页详情

某些事件（如 onCompleted）在其 details 对象中提供了标签页的 tabId，你可以使用这个 tabId 来获取更多关于该标签页的信息。

chrome.webNavigation.onCompleted.addListener(function(details) {
  chrome.tabs.get(details.tabId, function(tab) {
    console.log("Current tab:", tab);
  });
});

这些只是 chrome.webNavigation API 的基础用法。更多高级用法和详细信息，你可以查阅 Chrome 扩展开发文档。