Question

我尝试使用扩展程序覆盖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
}

提前致谢！

Answer 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;

chrome API覆盖历史记录页面示例

1 个答案: