How do I automatically save URLs in a Google Chrome extension when a user visits a specific site?
Question
I am new to web programming, but not to programming in general. I am trying to build a Google Chrome extension that will automatically save the URL whenever a user visits any page on StackOverflow.com. Then I would like to display the list of URLs in in the extension popup.
So far, I have decided that I need a Page Action extension because I only want it to be active on StackOverflow pages. I understand the different ways to access tabs and their URLs, but I don't know where to put the code.
For example, I'm not sure if I need a content script and/or background script. I'm also pretty confused about Listeners and whether I need to be sending messages between the content script and the event page or popup script. This is what I have so far:
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/*"
]
}
popup.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>
popup.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});
});
});
content.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
chrome.extension.getBackgroundPage().console.log(tab.url);
chrome.storage.sync.set({tabId : tab.url})
});
1 answers
solution1
0 ACCPTED 2020-06-17 20:58:44
Content scripts cannot access all extension APIs, they don't have access to chrome.tabs.onUpdated ( more details ).
In this case, you don't need a content script, you can add that listener in the background script, this script is running the entire time the browser is open if it is not set to persistent: false .
About communication between contexts: In this case, if you will only have a background script and a popup, you can access the background script from the popup using chrome.extension.getBackgroundPage() or, you can simply save data in the store in the background script and load it from the store when the popup is opened. If you're looking for realtime updates, you can use a communication port or a request/response scheme ( more details ).
I don't know if you've already done this because you haven't shared the contents of the background script ( eventPage.js ) but in order to show the page action on specific pages you'll have to register it, you can find out more details about that here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.