Я новичок в веб-программировании, но не в программировании в целом. Я пытаюсь создать расширение Google Chrome, которое будет автоматически сохранять URL-адрес всякий раз, когда пользователь посещает любую страницу на StackOverflow.com. Затем я хотел бы отобразить список URL-адресов во всплывающем окне расширения.
Пока что я решил, что мне нужно расширение Page Action, потому что я хочу, чтобы оно было активным только на страницах StackOverflow. Я понимаю различные способы доступа к вкладкам и их URL-адресам, но не знаю, где разместить код.
Например, я не уверен, нужен ли мне сценарий содержимого и / или фоновый сценарий. Я также очень запутался в слушателях и в том, нужно ли мне отправлять сообщения между сценарием содержимого и страницей события или сценарием всплывающего окна. Вот что у меня есть:
manifest. json
"manifest_version": 2,
"name": "Stack Overflow visit history",
"version": "1.0",
"description": "This Chrome extension stores your Stack Overflow URL visits.",
"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": ["eventPage.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://stackoverflow.com/*"],
"js": ["content.js", "jquery-3.5.1.min.js"]
}
],
"permissions": [
"webNavigation",
"tabs",
"https://stackoverflow.com/*"
]
}
всплывающее окно. html
<html>
<head>
<title>Stack Overflow Visit History</title>
<style>
body {min-width: 250px;}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<h2>StackOverflowVisits</h2>
<div id="newUrlList"></div>
</body>
</html>
всплывающее окно. js
var tabUrl = tabs[0].url;
chrome.storage.local.get({'urlList':[]}, function(item){
var newUrlList = item.urlList;
if (newUrlList.indexOf(tabUrl) === -1) {
newUrlList.push(tabUrl);
}
console.log(newUrlList);
chrome.storage.local.set({urlList: newUrlList});
});
});
содержимое. js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
chrome.extension.getBackgroundPage().console.log(tab.url);
chrome.storage.sync.set({tabId : tab.url})
});