Я создаю расширение Google Chrome, которое собирает и хранит URL-адрес и временную метку каждого посещения страницы переполнения стека в массиве в Chrome хранилище . Я собираю эти данные на (постоянной) фоновой странице, и я хотел бы, чтобы в моем всплывающем окне отображались последние посещения.
Я новичок в веб-программировании, поэтому, возможно, я что-то упускаю, но могу Я не могу заставить всплывающее окно отображать что-либо, кроме текста, который я ввел непосредственно в html. Вот соответствующая часть моей фоновой страницы:
фон. js
// Store url in chrome storage and filter by url host suffix
chrome.webNavigation.onCommitted.addListener(function(details) {
// 0 indicates the navigation happens in the tab content window
if (details.frameId === 0) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
// create visit object containing tabUrl and timestamp
var tabUrl = tabs[0].url;
var timestamp = new Date();
var visit = {};
visit[timestamp] = tabUrl;
// get visitlist if it exists, otherwise initialize to empty list
chrome.storage.local.get({'visitList': []}, function(item) {
var newVisitList = item.visitList;
if (newVisitList.indexOf(visit) === -1) {
newVisitList.push(visit);
}
chrome.storage.local.set({visitList: newVisitList});
})
})
}
}, {url: [{hostSuffix : 'stackoverflow.com'}]});
В моем всплывающем окне. js, я пытаюсь получить последние переменные url и timestamp из Chrome Storage. Это немного сложно, поскольку я храню массив объектов visit {timestamp: url}.
popup. js
function displayVisit () {
chrome.storage.local.get(['visitList'], function(list){
var visitList = result.visitList;
var latestVisit = {};
latestVisit = visitList.pop();
var timestamp = latestVisit.key;
var url = latestVisit[timestamp];
visitList.push(latestVisit);
$('#timestamp').text(timestamp);
$('#url').text(url);
});
}
в моем всплывающем окне. html, я просто пытаюсь отобразить последний посещенный URL-адрес StackOverflow и временную метку, но переменные не отображаются во всплывающем окне.
всплывающее окно. html
<!DOCTYPE html>
<html>
<head>
<title>Stack Overflow Visit History</title>
<style>body {min-width: 150px;}</style>
<script src="jquery-3.5.1.min.js"></script>
<script src="popup.js"></script>
<script type="text/javascript" src="background.js"></script>
</head>
<body>
<h1>StackOverflow Recent Visits</h1>
<h2>Url: <span id="url"></span></h2>
<h2>Time: <span id="timestamp"></span></h2>
</body>
</html>
И это мой манифест, если он предоставляет какой-либо полезный контекст:
manifest. json
{
"manifest_version": 2,
"name": "Stack Overflow visit history",
"version": "1.0",
"description": "This Chrome extension stores your Stack Overflow URL visits and provides statistics.",
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"page_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html",
"default_title": "StackOverflowVisits"
},
"background": {
"scripts": ["background.js"],
"persistent": true
},
"permissions": [
"tabs",
"activeTab",
"storage",
"webNavigation",
"declarativeContent",
"https://stackoverflow.com/*"
]
}
Я не использую Chrome хранилище правильно, или проблема в том, как я пытаюсь получить доступ к переменным в моем всплывающем окне?