Chrome自定义新标签页扩展点击chrome://apps链接报错如何解决

报错根因 #

Chrome安全策略禁止普通页面上下文直接通过<a>标签的href属性加载chrome://协议的内部资源，即便是扩展覆盖的新标签页，直接跳转也会触发Not allowed to load local resource限制。

解决步骤 #

你现有的manifest.json配置已经包含所需的tabs权限，无需额外修改权限配置，只需要调整页面代码和添加事件逻辑即可：

1. 修改newtab.html中的链接代码，移除直接指向chrome://apps的href属性，添加ID用于绑定事件：

<a href="#" id="appsLink">Apps</a>

2. 在script.js中添加点击事件监听，调用Chrome扩展官方tabsAPI打开目标地址：

document.getElementById('appsLink').addEventListener('click', (e) => {
  // 阻止默认跳转行为
  e.preventDefault()
  // 方案1：在当前标签页打开chrome://apps
  chrome.tabs.update({ url: 'chrome://apps/' })
  // 方案2：如果需要在新标签页打开，替换上面的代码为下面这句
  // chrome.tabs.create({ url: 'chrome://apps/' })
})

内容的提问来源于stack exchange，提问作者Pingu69