chrome API 覆盖历史页面示例答案

【问题标题】：chrome API override history page exampleschrome API 覆盖历史页面示例
【发布时间】：2016-02-24 05:46:44
【问题描述】：

我正在尝试使用扩展程序覆盖 chrome 中的历史记录页面。我在 manifest.json 文件中设置了覆盖页面选项并创建了一个新的 history.html 文件。扩展程序运行完美，历史页面现在显示为空白。我需要在我的新覆盖页面 history.html 页面中列出所有历史记录。有没有办法做到这一点？

这是我的 manifest.json 文件。

{


 "name": "Recently visited urls",
  "version": "1.0",
  "description": "Recently visited urls",
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["popup.js"]
  }],
  "background": {
    "scripts": ["jquery.js","background.js"],
    "persistent": false
  },

  "browser_action": {
    "default_title": "Recently visited urls",
    "default_popup": "popup.html",
    "default_icon": "clock.png"
  },
  "permissions": [
    "history",
    "downloads"
  ],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "chrome_url_overrides": {
    "history": "history.html"
  },
  "manifest_version": 2
}

提前致谢！

【问题讨论】：

标签： google-chrome-extension browser-history

【解决方案1】：

如果您的意思是为什么您的自定义历史记录页面是空白的，您是否在 manifest.json 中声明了history 权限？

更新：

由于chrome.history api 只能通过后台脚本访问，我们需要将消息从后台脚本传递到您的覆盖历史页面。但是，我们无法将内容脚本注入到 chrome://history，在尝试了很多方法后，我认为使用localStorage 是解决此问题的一种解决方法。

manifest.json

{
    "name": "Search History",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Your description",
    "chrome_url_overrides": {
        "history": "history.html"
    },
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    },
    "permissions": [
        "history"
    ]
}

history.html（这里我只是将所有localStorage拼接成一个字符串，你可以在这里自定义你的视图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="historyText"></p>
    <script src="content.js"></script>
</body>
</html>

background.js（你可以通过将maxResults设置为其他数字来配置历史项目数）

chrome.browserAction.onClicked.addListener(function () {
    chrome.history.search({ text: '', maxResults: 10 }, function (data) {
        data.forEach(function(page) {
            localStorage.setItem("Id: " + page.id + ", title: " + page.title, page.url);
        });
    });
});

content.js

var historyText = "";
for(var key in localStorage) {
    historyText += key + ": " + localStorage.getItem(key) + ", ";
}

document.getElementById("historyText").innerText = historyText;

【讨论】：

我已经在 manifest.json 中声明了历史权限。这是我的 history.html 文件。历史
如果可能，您能否编辑您的问题并提供有关您的代码的更多详细信息，包括 manifest.json 和其他相关代码？
@vivekk，我已经更新了实现代码，请看看它是否解决了你的问题。
好的。这很酷。我还有一个疑问。我已将手机与 chrome 浏览器同步。这样我就可以从我的桌面浏览器查看我所有的手机搜索历史记录。但是当我使用 chrome.history.search 函数在我的扩展程序中获取 chrome 历史记录时，该函数只返回桌面浏览器 URL。有什么方法可以获取同步的设备搜索历史记录？
Form Sync your account settings，您可以将历史记录、书签和密码等内容保存并同步到您的 Google 帐户。这样，您将始终在任何 ChromeBbook 和您登录的其他设备上的 Google Chrome 中拥有它们。所以我认为您已经登录了您的帐户，然后您可以调用 chrome.history.search() 来获取您所有的所有设备的浏览历史记录